WebMD Reader

Mobile App Design

iphone-webmd-reader-homepage-v1.png

Objective:

Design a customizable WebMD Mobile App that provides curated, personalized content that is relevant and interesting. 

 

Challenge:

The existing WebMD site contains a massive archive of medical and lifestyle information that can be overwhelming to navigate. Early research pointed out that many visitors were singularly focused on the 'Symptom Checker' tool, which often resulted in anxiety-provoking medical hypotheses that dissuaded them from returning to the site. Discovering ways to increase retention, through providing users with access to only content that is relevant and interesting to them became our primary design focus. Decreasing stigma and maintaining privacy also emerged as significant design considerations.  

Site Analysis

Identifying Opportunities for Information Capture and Conversion

Mapping the site's ecosystem clarified that there are three distinct motivators for visiting the site: seeking information for oneself, seeking information for a loved one, or conducting general research. This map also helped identify the ideal point in the existing user flow to capture personal information and transition the user from the desktop application to our WebMD mobile reader. 

Site Ecosystem

Designing the Transition from the Website to Our Mobile App

Sketching the existing WebMD home page highlighted the information overload that visitors experience. Reviewing layouts and existing user flows helped us identify the ideal insertion point of the WebMD Reader into the existing user flow and website homepage. 

User Research

Learned about People's Online Medical Search Behavior

Interview Participant

Interview Participant

Through online surveys and in-person interviews our team created personas, affinity diagrams, and pie charts to better understand and communicate what is most important to users. We learned that many people rely on online medical searches, or friends who are medical professionals as a first stop when they or a loved one has a medical concern. Being autonomous in their search as well as trusting the information source were paramount. The majority of the people we spoke to were unaware of, but interested in, accessing personalized health information from WebMD. 

Gained an Understanding of Who will use the app and Why

Surveys and Interviews

Affinity Diagrams

Personas

Storyboarding to Understand Contextual Considerations

Illustrating the broad context within which a user would engage with the app informed our team about pain points in the process. Limited time with and information from primary care doctors, lab results that are hard to decipher, and limited privacy when viewing the app during commutes emerged is elements to focus on. 

photo-7.JPG

Information Architecture

Fostering Autonomy and Privacy in the Preference Builder

The personalizing capacity of the preference builder emerged as one of the key differentiating factors that sets the WebMD Reader apart from the existing site.  When examining different options for capturing user's medical interests and concerns, our research showed that people would feel more comfortable with the opt-in method of manually filling out preferences as opposed to an automatic capture from previous searches. After more deeply investigating this finding, privacy and stigma around certain medical issues also emerged as essential considerations.

Sitemap

Informed Preference Builder Options

Preference Builder

Categories determined from IA assessment 

The Final Design

Focus on Social Sharing to Decrease Stigma

Stigma, and shame in some cases, around addressing certain medical concerns came up again and again in our research. Our team felt that easy social sharing of articles and videos would have positive impact on this issue. Ability to turn on and off preferences at any time empowers users through giving them a sense of control and allowing them to make changes easily.  These changes are reflected, without delay, in a news feed that combines current video and text content.

Social Sharing

Social Sharing

Preference Builder

Showing 2 Methods of Setting Preferences

1st Iteration Preference Builder

Collections of Content