using data and customer insights to drive design

USING DATA AND CUSTOMER INSIGHTS TO DRIVE DESIGNVermont Web Marketing Summit | October 25, 2016

Andy CampbellWeb [email protected]

Katie McCurdyUser Experience Designer & [email protected]@katiemccurdy

USING DATA AND CUSTOMER INSIGHTS TO DRIVE DESIGN | Vermont Web Marketing Summit 2016


The University of Vermont Medical Center

● 500+ Bed Hospital● 960+ Providers● 22,000 Inpatient Admissions● UVM College of Medicine Robert Larner M.D.

College of Medicine at the University of Vermont established in 1822

● Best regional hospital for 4 consecutive years by US News and World Report

● Among top 50 ‘Greenest Hospitals’ 2 years running

● Surprisingly good food


Our website

● About 2,000 pages plus a health library● ~125,000 monthly visitors● ~2 minutes visit duration● ~2.5 pages per visit● 40% bounce rate


Our digital ecosystem

● Website● Blog● 8 Social Media Channels● Email campaigns


Our data sources -quantitative (what) and qualitative (why)

● Analytics● Heatmaps● Interviews● Surveys● Usability testing

How have we used data and insights to design better digital experiences?


"Without knowledge action is useless and knowledge without action is futile." - Abu Bakr



FINDING A DOCTOR

Challenge: it’s too hard to find a primary care doctor accepting new patients


ORIGINAL DESIGN


WHAT OUR SURVEY SAID


“It was not clear from the website if doctors were accepting new patients.”

“I want the ability to find primary care doctors accepting new patients”

“List general practitioners taking new patients”

WHAT WE DID


OUTCOME - TRAFFIC UP NEARLY 40%


Traffic to primary care provider profile pages has increased 39% year-over-year since implementing the new design.

Challenge: how can we help people find the right doctor for their condition?


BEFORE


WHAT TESTERS SAID


“The top 2 things I care about: what insurances they take, and do they focus on the thing I need help with (clinical interests.)”

– Caitlin, Patient

WHAT TESTERS SAID


“They all look the same in the search results […] that is why the ‘clinical interests’ are super helpful and that is what helped me find my doctor.”

– Alli, Patient

SO WE ADDED CLINICAL INTERESTS


WHAT WE LEARNED: RETROFITTING IS HARD


It’s difficult to try to fit something into an existing design.

That’s why we’re planning for it with our redesign.

Challenge: how can we help patients understand a provider’s personality?


INTERVIEW INSIGHT: PATIENTS WANT TO UNDERSTAND PROVIDERS AS PEOPLE


“Their demeanor is important.”

“I want to see if they look happy in their photo.”

ACTION: ADD PROVIDER VIDEOS (268 SO FAR)


ACTION: ADD PROVIDER VIDEOS TO SEARCH


ACTION: ADD PROVIDER VIDEOS TO PROFILES


PROVIDER VIDEOS INCREASED TIME ON PAGE


The average time on page for provider profiles with bio videos is a full two minutes longer than provider profile pages without videos.

WHAT USABILITY TESTERS SAID


“I’d prefer the video bio.”

“I really like the video bios! That’s nice.”

“If they have no photo I would not choose them.”

ENCOURAGING PHOTOS & VIDEOS FOR ALL



REDESIGNING OUR ENTIRE WEBSITE


Data helps us make decisions along the way. We’ve relied heavily on:

● Analytics● Heatmaps● Interviews● Surveys● Treejack - a tool for testing our navigation● Usability testing

KEY PAIN POINTS


Our survey showed us some of the key areas we need to focus on:

● Information browsing● Navigation● Site information

SURVEY QUOTES


“I cannot find what I am looking for”

“Too much irrelevant stuff - hard to find what I am looking for”

“[use] less text”


Our process

● Design sprints● Prototyping ● Usability testing


DATA-DRIVEN PERSONAS & DESIGN

PRINCIPLES

PERSONAS

A set of representative, archetypal users based on behavior - not demographics (different from user segments).

Personas help your team:

● Build and sustain empathy with end users● Make user-centered product decisions● Avoid designing for yourselves● Help internal stakeholders get on board


KEY INSIGHTS > OUR PERSONAS


People often come to our site to:

● Find a doctor (analytics, heatmaps, interviews)

● Get a phone number or directions (analytics, interviews)

● Get medical record info (analytics)

How can we envision our personas’ journey?


How can we keep from forgetting about our personas through the design process?


PERSONAS > HOW CAN YOU DO IT?


Things to consider including:

● Specifics - name, age, location, job, background

● Technology comfort● Key quote● Behaviors● Goals● Needs● Fears

How else can we carry forward the important things we’ve learned?


DESIGN PRINCIPLES

Design principles are a set of guidelines that help you stay on-track throughout your project. They help you:

● Stay true to your intended ‘process’● Stay focused on end users and their

constraints● Get buy-in for certain strategy points


Our Design Principles


PUT PATIENTS FIRST


WHY?We’ve got a lot of content to deal with, and a lot of organizational structure. We want to make sure patients, families, and visitors can find what they need - that this information does not get lost in the shuffle, and that we present a patient-oriented site instead of an organization-oriented site.

IMPLICATIONS● When making decisions about navigation and content, we

may promote patient-oriented information and actions above organization-centric content

● When creating navigation, labeling, and other content structures, we place patients’ actual needs first (using data and interview results to develop a prioritized list of needs.)

REDUCE STRESS


WHY?We heard again and again in innovation workshops that feeling stressed is a big contributor to negative healthcare experiences.

IMPLICATIONS● Language: use words that our patients and visitors use● Navigation: test our navigation to ensure the structure eases

information-seeking and does not increase confusion● Layout: use white space and alignment to create a sense of

calm● Color: use our brand colors in a calming way. Use strong

colors sparingly and thoughtfully. ● Simplicity overall

DESIGN FOR ALL DEVICES


WHY?Mobile and tablet users on touch screens account for almost half of our site visitors. We need them to have a great experience.

IMPLICATIONS● We ensure designs work beautifully for touch input ● We will test designs with people on mobile devices● We will facilitate common mobile actions like calling a phone

number or getting directions.

DESIGN FOR THE NON-IDEAL


WHY?Our website users will be especially diverse in age, comfort with websites, and visual/motor ability. We want to ensure the best possible experience for all users.

IMPLICATIONS● Make sure contrast, font size, etc. are sufficient for people

with lower sight or aging eyes● Make sure we include alt tags and other accessibility

guidelines for screen readers● Ensure targets like Calls-to-action and other elements are

large enough and have enough space around them such that they are easy to select.

● Test on very slow speeds; design and build for fast page loading

CONTENT BEFORE DECORATION


WHY?In the name of getting information as quickly as possible and providing a calming experience on the web, we should adopt a ‘content first’ approach.

IMPLICATIONS● Text, video, and photos are prioritized over decorative

elements.● Design elements support the brand, tone, and feel of the site,

without taking all the attention or interfering with the ability to gather information.

● In some cases (if not all), user-experience may have to trump branding. For example, if we can’t find a natural fit for a branding element (ex. the weave), we may need to forgo it.

CLEAR PURPOSE, CLEAR ACTION


WHY?Visitors need to be confident about who this information is for and what they need to do next. This is a breakdown on our current site.

IMPLICATIONS● Whether the next step is calling, submitting information,

downloading a form, or learning more, we want to make sure next steps are clear and correctly prioritized.

BE CONSISTENT


WHY?It helps to reduce users’ cognitive load and increase confidence if we stay consistent with naming and functionality.

IMPLICATIONS● The page title should always match the search result title ● Inline links and navigation should reference the exact page

title as much as possible● We may need to develop an internal controlled vocabulary to

ensure that we’re all calling things by the same name.● Using modular design, we should ensure that we stay

consistent and reduce the number of ways we allow users to perform an action.

WRITE IN PLAIN LANGUAGE; HELP THEM SCAN

WHY?Our users are often stressed and unable to absorb large amounts of information. We also know that in general, people scan information on the web instead of reading it word-for-word. Finally, our users have a varied levels of understanding of medical jargon. We want to support a positive information gathering experience, given all of these factors, - especially on mobile screens.

IMPLICATIONS● Use the shortest, simplest words possible to communicate an

idea. ● Present content in digestible and scannable chunks.● Break up ‘walls of text’ with headings, bullets, and bolding. ● Prioritize the use of familiar words over highly technical or

highly branded words where possible.● This also helps with SEO!


Why are Personas and Design Principles important?


WHY BOTHER?

These tools help us:

● Justify our design decisions later & move forward with confidence

● Get everyone (+ leadership) on the same page at the beginning and throughout the project

● Keep our users and primary scenarios at top of mind



FROM DATA TO DESIGN

How data informed our design decisions: the excruciating minutiae

Disclaimer: prototype screens ahead


1) Finding a doctor


FINDING A DOCTOR IS KEY


SO WE ARE PLAYING IT UP IN OUR PROTOTYPE


‘DOCTORS’ ALWAYS SHOWS ON SMALL SCREENS


2) Departments & Locations


PEOPLE CLICK ON DEPARTMENTS & PROGRAMS


THEY ARE OFTEN LOOKING FOR CONTACT INFO & DIRECTIONS


Over 12% of visitors to Departments & Programs pages are looking for directions

Nearly 15% of mobile visitors to Departments & Programs pages are clicking on the phone number

WE KEPT DEPTS + MADE IT #2 IN NAVIGATION


WE MOVED FROM AN A-Z LIST OF LINKS...


...TO MORE OF A ‘DIRECTORY’ LISTING


3) Medical Records


MEDICAL RECORDS = MOST-SEARCHED TERM (GOOGLE ANALYTICS)


MEDICAL RECORDS = HIGH CALL CENTER TRAFFIC


IT’S NOT CLEAR WHERE TO FIND MED RECORDS


HEATMAP FOR PATIENTS AND VISITORS PAGE


...ADDING LINK ON NEW PATIENTS & VISITORS


LOOKING AT WAYS TO FEATURE ON HOMEPAGE


RECONSIDERING MEDICAL RECORDS CONTENT


How can you use data to make design decisions?



Make sure you have data:

● Analytics - look at site traffic and search● Heatmaps● Surveys● Interviews - talk to people!● Usability testing - watch them use your site!


Think about your entire digital ecosystem:

● Website● Search campaigns● Facebook campaigns● Email campaigns● ...and even in-person or phone interactions


Things you might act on:

● Website navigation● Homepage design & flow● Calls-to-action● Terminology● Tone & Voice● Branding● Priority of elements


Consider creating tools like personas or design principles to help your team make decisions

THANKS! Vermont Web Marketing Summit | October 25, 2016

Andy CampbellWeb [email protected]

Katie McCurdyUser Experience Designer & [email protected]@katiemccurdy