BEFORE...

Alex Alman

DURING...

WebMD Final Wireframe 3.jpg

AFTER

Zach Norton
 

THE BRIEF

IMG_0999.jpg

For a team project at General Assembly, our goal was to enhance user acquisition and retention for WebMD's primary site. We created a health profile tool that collects users' information and provides them with personalized suggestions for health improvement. The creation of this tool also encompassed a complete, responsive redesign of the WebMD homepage to accommodate desktop and mobile devices alike.

 

THE TOOLS

adobe illustratorrev.jpg
axurelogorev.jpg
keynoterev.jpg
surveymonkeyrev.jpg
 

MY ROLE

Under the direction of Alex, Kathy and I designed the overall look and feel of the Health On Demand profiling tool by undertaking an extensive research and comparative analysis process. I produced many of the rapid paper prototypes, illustrations, and visual research/comparisons that influenced the final product deliverables. I also wrote and built in Axure the user survey demonstrated in the final prototype and coached the client presentation.

 

PROCESS

 

Step 1: Analysis of Existing Site and Competitors

IMG_0959.jpg
IMG_0936.jpg

Upon receiving the project brief, Alex, Kathy, and I brainstormed a survey that would guide the creation of the Health On Demand prototype. I conducted visual comparative and competitive analyses of the existing mobile and desktop WebMD sites after Kathy and I identified leading competitors (i.e. Everyday Health, Mayo Clinic, Livestrong) and compelling user experiences (i.e. Oscar, Poncho, OKCupid, Fitocracy). Together, we determined key deadlines and milestone dates.

 

Step 2: Survey and User Interviews

IMG_1062[1].JPG

Using SurveyMonkey, the project team analyzed data trends and key user concerns from the replies of 49 respondents. We also conducted an additional 9 qualitative user interviews that identified typical product use scenarios for the existing WebMD site and its competitors. Afterwards, we organized our findings into affinity diagrams to determine critical user interactions.  

 

Step 3: Initial Paper Prototyping and User Testing

IMG_0980.jpg
IMG_5901.jpg

After producing a wide variety of layout comparisons and interaction design sketches, the team finalized a paper prototype based on a “full circle” of health that included exercise, sleep habits, and diet. Upon organizing the drawings into multiple use case scenarios, we invited several of our previous interviewees to test the initial prototype and then made revisions based on their feedback and our earlier research.

 

Step 4: Primary User Identification

WebMD presentation_Page_10.jpg

We gathered all of our research and testing data to design three user personas. Based on our evidence, we identified Tanya, a 24-year-old, Manhattan-based advertising executive as our primary user. Like many of the WebMD users that we identified, she suffers from a chronic illness and is proactive in pursuing lifestyle changes that could ease her condition.  We designed Health On Demand to be indispensable for users like her. 

 

Step 5: Wireframe Build and Further Testing

With the creation of Tanya came the inception of a primary use case scenario. This scenario, in which Tanya sought out dietary solutions for ongoing skin problems, proved to the be cornerstone for the refined design of our tool. Using Adobe Illustrator and Axure, we designed new wireframes and higher-fidelity icons. We then guided previous interviewees through a  friendly survey that determined health habits and dietary restrictions and identified location-based suggestions that could improve user well-being. 

 

Step 6: Prototype Build and Presentation

WebMD presentation_Page_05.jpg
WebMD presentation_Page_16.jpg

Following the last round of user testing, the team finalized illustrations and interactions for a higher-fidelity prototype and then presented it to the clients via Apple’s Keynote software. In our presentation, we clearly defined the benefit of the Health On Demand tool for WebMD’s new and existing users and identified potential business partnerships that could satisfy the client’s business and brand goals.

 

SITE MAP

 

USER FLOW

WIREFRAMES

WebMD Final Wireframe 1.jpg
WebMD Final Wireframe 2.jpg
WebMD Final Wireframe 4.jpg
 

PROTOTYPE

WebMD Proto 3.jpg
WebMD Proto 2.jpg
WebMD Final Prototype 4.jpg