Leading the Way for Responsive Web Design for Mobile Information & Mapping at The Johns Hopkins Hospital

652 views
555 views

Published on

With the opening of a 1.6 million square-foot medical complex approaching, the Johns Hopkins Digital Strategy Team saw an opportunity to recreate how patients and staff visit and navigate the hospital. Learn how they gained the support of executives and internal stakeholders, shaped the vision, managed conflicting expectations, and balanced old and new technologies to launch responsive web environments for desktop and mobile users. Examine the ongoing evolution of technologies for interactive mobile way-finding.

Speakers:
Brian Harder, Manager, Strategic Web Services, Johns Hopkins Medicine
Melissa McMacken, Manager, Information Architecture & Web Services, Johns Hopkins Medicine Aaron Watkins, Director of Internet Strategy & Web Services, Johns Hopkins Medicine

Presented at the 16th Annual Healthcare Internet Conference in Las Vegas, Nevada on November 15, 2012

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
652
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • [Aaron]
  • [Aaron]
  • [Aaron]
  • [Melissa]
  • [Melissa]
  • [Melissa]
  • [Melissa]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Brian]
  • [Melissa]
  • [Melissa]
  • [Melissa]
  • [Melissa]
  • [Aaron]
  • Leading the Way for Responsive Web Design for Mobile Information & Mapping at The Johns Hopkins Hospital

    1. 1. Responsive Web Design forMobile Information and Mapping16th Annual Healthcare Internet ConferenceNovember 13, 2012
    2. 2. A New Era for Hopkins Care• The Charlotte R. Bloomberg Children’s Center and the Sheikh Zayed Tower• New adult and pediatric departments.• Spacious rooms and architecture• Unique gardens, dramatic artwork• Facilities emphasize patient and family amenities as powerfully as medical technologies explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    3. 3. The New Facilities• Located in urban setting• 1.6 million square feet, approximately 130,680 square feet per floor• An entrance larger than a football field• 560 private rooms explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    4. 4. Focus on a Common Goal• Institution-wide excitement• Collaborative spirit• Focus on problem-solving• Concern for our visitors explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    5. 5. Focus on Solutions for Users• Build a new hospital web presence with robust information – Change mindset from “required” to “creative”• Develop visitor resources, especially navigation – Getting here – Getting around• Focus on Mobile – Flexible design – Wayfinding explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    6. 6. Designing a Flexible Site explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    7. 7. Balancing Act explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    8. 8. Architecting for Mobile • Re-architected entire site • How to represent content not optimized for mobile • Maps and directions content moved into mobile site. explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    9. 9. Designing for Mobile • Moved from 3 to 2 column format. • Simplified presentation of related content. • Adjusted navigation for mobile. • Modified presentation of social sharing tools to make them more prominent. explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    10. 10. The Transformation explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    11. 11. Exploring Mapping Technologies Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    12. 12. Meaningful Technology? • What solutions are available to assist both internal staff and patients and visitors who need to find a location in the new buildings? • How are other organizations solving this issue? Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    13. 13. Positioning Technologies • Global Positioning System • GPS on modern phones is assisted • Assisted – uses WI-FI hotspots and cellular towers to get the most accurate location when GPS is not the most convenient method of location detection • Still GPS is not a highly accurate indoor technology Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    14. 14. Positioning Technologies• Indoor Positioning System• Uses 4 additional satellite systems• Uses your phone’s gyroscope, magnetometer, accelerometer, altimeter, combined with GPS, Wi-Fi, Bluetooth, NFC (radio communication) and cellular signals to establish your position and direction. Credit: IDG News Service – PCWorld Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    15. 15. Positioning Technologies Contextual Awareness – my phone can sense and react to my environment Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    16. 16. Technology Survey Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    17. 17. Google Indoor Maps• Google will be helping to shape IPS technology in the OS, and their Indoor Mapping Solutions. Google Indoor Maps Video Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    18. 18. Google Indoor Maps - IPS • Google Maps is available now – iPhone, Android – Airports, Malls, Museums & Casinos • Submit, and wait for approval – No guarantees • Alignment of maps to latitude and longitude • “Free” Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    19. 19. Wi-Fi Triangulation/GPS • American Museum of Natural History in New York • Based on public Wi-Fi • Triangulation based on Wi-Fi points • Three years in the making, $$$$ • Completed by a group called Spotlight Mobile – who recently launched a platform - Meridian Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    20. 20. Meridian – IPS type • Meridian is an app launched in Portland. • Step by step pre-built directions, includes location technologies • Organizations can be part of the Meridian Platform or customize based on their framework • Other similar App frameworks are available Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    21. 21. RFID Location• Based on RFID tag, or device identifier• Embedded RFID transmitters• Popular in accessibility applications, equipment locating, and even staff location• Expensive for large footprints, and requires RFID tag• Not the direction of the indoor way- finding industry Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    22. 22. Wi-Fi Fingerprinting• Unique patterns of Wi-Fi signals that when read can show your location (One of the sciences of IPS)• 6-8 meters accuracy• Infant industry• App dependent VS. phone dependent• Shorter development efforts (simply reads your existing Wi-Fi network)• $$ Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    23. 23. Our Solution?• Short turn-around• Mapping technologies above were either very expensive, beta, or in the case of Google – no guarantees• Created an interactive map application explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    24. 24. explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    25. 25. Native Apps• Fully Featured, taking advantage of phone features such as GPS, and other features• Great distribution network• Connection not required at all times• App for every platform• Updates are more cumbersome• Development and maintenance costs explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    26. 26. Web Apps• Available without download or “App Store”• Easy to update• Good cross device support• Web staff can build a Web App• More limited feature support, cannot use many native phone functions• Less precise to the platform• Required 4G or Wi-Fi connection explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    27. 27. We chose Web App• Technology is familiar - current web team resources• Allows us to test and update quickly – all users get the upgrade• Tied into the rest of the mobile pages for the full Johns Hopkins Hospital site• Allows for some easy interactivity from standard web pages, such as “Find This Location” explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    28. 28. Indoor Maps Application • Interactive • Cross Platform (Device) • Cross Browser – Web Based • Interactive Map – 75% of smartphone and tablets • Fall back support (static maps for older devices) explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    29. 29. Big Ugly Floor Maps explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    30. 30. Pinch/Zoom, Interact • Crystal clear zooming • High level of detail • Interactive points of interest • Requires map that can be re-drawn, vector based explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    31. 31. Indoor Maps Application Video explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    32. 32. Technology Path Mobile explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    33. 33. SVG for the Web explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    34. 34. Scalable Vector Graphics (the good) • Making a comeback but missing years and years of development when Flash was ruling • Good modern browser support • Can be used with Flash Fallback for older browsers • Pretty good mobile support explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    35. 35. Scalable Vector Graphics (the challenges) • Using SVG with interactive components, such as waypoint pins inconsistent compatibility • Must use Flash fallback for IE 7 and 8, which relies on “converter” scripts and libraries such as SVG Web • Testing/Testing/Testing explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    36. 36. The Outcome explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    37. 37. Usability Tests• 2 tests • Focused on floor maps• 33 participants • Tested navigation,• Desktop interaction design,• iPhone + Android mobile features explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    38. 38. Problem #1Navigation on mobile [ Video ]Solution: Collapse navigation. explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    39. 39. Result • Users had significantly less issues identifying that the page had loaded. explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    40. 40. Problem # 2Classification of waypoint data. [ Video ]Solution: Add search field and auto-suggest waypoints as results. explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    41. 41. Result• Before: 91% of the participants took more than 2 minutes to complete all of the steps in the task.• After: 55% of the participants took less than 2 minutes to complete all of the steps in the task. explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    42. 42. Problem #3How to get home.Solution: Created “home” iconthat is linked to the homepage,and added it to the left of thelogo. explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    43. 43. Result• Before: Only 11% of the participants clicked on the banner to try to get home.• After: 50% of the participants used the home icon to navigate back home. explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies
    44. 44. Impact: By the Numbers• Traffic to the Hospital • By the third month, growth sub-site skyrocketed plateaued. In the time for two months since, YOY comparisons following launch. with the same time period Compared to prior two in 2011: months: ⇧ 112% in visits ⇧ 72% in visits ⇧ 244% in page views ⇧ 180% in page views ⇧ 62% in pages per visit ⇧ 62% pages per visit explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    45. 45. Impact: By the Numbers• 25% of visitors to the hospital site visit the driving/parking pages.• 1/3 of the visitors who visit the driving/parking pages use the internal wayfinding application.• Visitors who use a QR code/promotional URL given at the front desk typically view twice as many pages per visit as the normal site average. explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    46. 46. Opportunities• Explore technology opportunities as they evolve.• Focus on promotion of the wayfinding solution – On the driving/parking pages – Within the building – Upon arrival – In rooms and waiting areas – At point when it is most needed explorehopkinshospital.org Designing a Exploring Mapping A New Era Building our Solution The Outcome Flexible Site Technologies
    47. 47. Questions? • Aaron Watkins – Director of Internet Strategy – aaron.watkins@jhmi.edu; @aaronwatkins • Brian Harder – Manager, Strategic Web Services – bharder1@jhmi.edu; LinkedIn /brianharder • Melissa McMacken – Manager, Information Architecture & Web Services – mcmacken@jhmi.edu; @melissamcmacken explorehopkinshospital.org Designing a Exploring MappingA New Era Building our Solution The Outcome Flexible Site Technologies

    ×