WebMD Family & Pregnancy App

 

Brief

The Project

As part of the General Assembly User Experience Design program we were assigned a project to increase WebMD's user acquisition and retention. We were asked to suggest modifications to increase user engagement and retention and design a solution that is user-centric and could help how the service is used and perceived. 

Activities

UX Design, Research, Information Architecture, Content Management, Visual Design

TOOLS

Pen and paper, InDesign, Sketch, InVision, Typeform (Survey service)

 
 
 

Problem

The current family and pregnancy app has unnecessarily large and complex mega menus that are overwhelming for users to overview.

Men felt as if they were not included in the app and had a difficult time finding appropriate content appropriate to their role.

Approach

Redefining the management of the content is crucial. 

Implementing gender neutral designs through color research and interview confirmation is important to address men's dislike for the app. 

 
Final mock up design explained by process below.

Final mock up design explained by process below.


 

Research

Survey Discoveries

  • Surveyed people rated WebMD a 3/5 in their confidence of wanting to read pregnancy related content from them.
  • Over 80% of users would search for WebMD focused content using Google and then land on WebMD articles.
  • 83% of people found What to Expect and Babycenter.com to be more useful pregnancy resources.
  • Men/non-pregnant partners in particular felt left out of most pregnancy apps as they were more mom-focused/
  • Demographic data/

Heuristic Analysis

After the surveys, I conducted a heuristic evaluation of the existing application, Babycenter and What to Expect. See below for results.

 

WebMD 1.0

  • Has two menus but no clarity on content differentiation
  • No consistency of standards: too many features to track similar pregnancy data
  • No match between system and real world: Information does not appear in a logical or natural order

Babycenter

  • Focuses on recall rather than recognition: menu is smaller, however user needs to remember where items are stored due to poor content management
  • Gender-neutral and minimalist design appropriate for all caregivers

What To Expect

  • Although color theme is consistent, design aesthetic is not
  • Clear navigation system, user is in control as menu is visible at all times
  • Timeline feature not customizable
 
 

PERSONAS

Utilizing demographic data gathered through the surveys I was able to establish three personas. The personas were used to further focus the design on the pain points highlighted in the interviews. 

Research Takeaways

From the survey I learned that users are more interested in apps like What to Expect and Babycenter. After conducting a heuristic analysis I learned that the navigation, though not perfect, is much simpler for both apps and for What to Expect it was visible at all times. This type of clarity needed to be mirrored in the new iteration of the WebMD Pregnancy App. While blue and pink are popular maternity colors to reveal gender, color psychology and user research showed that yellow and green were amongst favorites to reflect harmony, optimism and balance during pregnancy.

 

 

Plan

Information Architecture

I reviewed the mega menus that are in the current application and rearranged the information in order to reduce the number of pages in the navigation. To test the new content topics, I had a sample of users complete a card-sorting exercise with closed labels to test if they are intuitive to the users. A lot of the men that were tested supported the solution that content should be divided by moms and dads.

This user requested a special section just for fathers.

This user wanted filters for each section to differentiate content by the different roles in a pregnancy.

User Flow

Based on the way the audience was thinking I developed user flows for each of the personas created earlier in the design process.

 

Site Map

Following the discoveries established during the card sorting exercise and the user flow development I created a site map for the Family & Pregnancy application. I wanted to ensure that knowledge content is divided by three filters: mom, dad and additional caregivers. 

 

 

Design

FIrst Wireframes

The main purpose of the app is to be gender neutral and have a clean and easy to navigate design. Due to the time constraints for this project, I decided to only focus on the development of the milestone tracker feature and on improving the content management filters for the different types of caregivers. 

User Testing

User testing supported the new information architecture and the flow of the pages. Initial color and font sizes showed issues with accessibility, which was addressed in the last iteration with higher contrast and larger text fonts.

FINAL HIGH FIDELITY MOCK UPS

In the final iteration, users will have an easier time filtering their role in the pregnancy and getting to the content that they are looking for.

Users who are interested in the tracking feature are able to easily log their data and sort them by user-defined categories. Finally, should they be interested in only seeing certain data points, they are able to modify their views using filtering options.


Lessons Learned

My greatest takeaway from this project that color psychology and making color decisions is not as easy as it may seem. Designing a "gender-neutral" product is quite a specific task. It is difficult to decide which colors are neutral, yet still evoke a kind of happiness and excitement towards family planning and pregnancy.