RWD Mobile Mapping Hopkins

Responsive Web Design for
Mobile Information and Mapping
16th Annual Healthcare Internet Conference
November 13, 2012

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 Mapping
A New Era Building our Solution The Outcome
Flexible Site Technologies

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

Focus on a Common Goal

• Institution-wide excitement
• Collaborative spirit
• Focus on problem-solving
• Concern for our visitors


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

Designing a Flexible Site


Balancing Act


Architecting for Mobile

• Re-architected entire site
• How to represent content not
optimized for mobile
• Maps and directions content
moved into mobile site.


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.

The Transformation


Exploring Mapping Technologies


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?


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


• 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



Contextual Awareness
– my phone can sense
and react to my
environment


Technology Survey


Google Indoor Maps
• Google will be helping to shape IPS
technology in the OS, and their Indoor
Mapping Solutions.

Google Indoor Maps Video


Google Indoor Maps - IPS

• Google Maps is available now
– iPhone, Android
– Airports, Malls, Museum's & Casinos
• Submit, and wait for approval – No
guarantees
• Alignment of maps to latitude and
longitude
• “Free”


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


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


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


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)
• $$

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


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

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


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”

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)


Big Ugly Floor Maps


Pinch/Zoom, Interact

• Crystal clear zooming
• High level of detail
• Interactive points of interest
• Requires map that can be
re-drawn, vector based

Indoor Maps Application

Video


Technology Path Mobile


SVG for the Web


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


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


The Outcome


Usability Tests
• 2 tests • Focused on floor maps
• 33 participants • Tested navigation,
• Desktop interaction design,
• iPhone + Android mobile features


Problem #1
Navigation on mobile
[ Video ]

Solution: Collapse navigation.


Result

• Users had significantly less
issues identifying that the
page had loaded.


Problem # 2
Classification of waypoint data.

[ Video ]

Solution: Add search field and auto-
suggest waypoints as results.


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.

Problem #3
How to get home.

Solution: Created “home” icon
that is linked to the homepage,
and added it to the left of the
logo.


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.

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

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

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

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

RWD Mobile Mapping Hopkins

Recommended

Recommended

More Related Content

Similar to RWD Mobile Mapping Hopkins

Similar to RWD Mobile Mapping Hopkins (20)

Recently uploaded

Recently uploaded (20)

RWD Mobile Mapping Hopkins

Editor's Notes