I do UX Design and Research.
Display 0822 2019-01-06.png

WebMD Fetal Development Tool

WebMD Fetal Development Tool

pregnancyfinal1whitebg.jpg
pregnancyfinal2whitebg.jpg
pregnancyfinal3whitebg2.jpg

Scope: 3 months

Categories: UX, Solution Ideation, Prototyping,

Role: UX Designer, Conducted research, competitive analysis, prototyping,

Tools: Sketch, Invision

Solution

I designed the tool to separate the information by trimester. Users can select the week they would like to look into and see an image of the body as well as the fetus. I designed the tool so users could easily navigate week to week as well as jump to a different trimester if they wanted to. This design accommodates the two types of browsers that use the tool.

Problem

The Fetal Development tool is highly used on the Webmd website. However, it has not been updated for a while and it was not optimized for mobile. There needed to be a responsive redesign that maintained SEO and was easy to navigate.


Process

pregnancy process.jpg

I was the lead UX designer tasked to redesign the WebMD fetal development tool for expecting mothers to see how their babies were developing week by week. At the time, the site was outdated, inaccessible and non-responsive. There were also clear usability issues like the use of a hover state which did not translate into mobile.

 

My approach was to begin designing mobile first and adapting it to desktop (not shown). I began by gathering all of the requirements needed from the project manager including ad space and requirements. After gathering the requirements, I was then began to under process of looking at a highly visual pregnancy tool. What goals did the user have in mind? What were they trying to accomplish? We determined a main value add of the tool was allowing users who wanted to use the tool linearly week by week the opportunity to do so but also design the tool for users to be able to easily jump around. Through user testing we also discovered that users want information about which weeks correspond with which trimester.


Research


Screens

pregnancyfinal1whitebg.jpg

Chunking: Separating the information by trimester made the information easier to take in. Users could also expand all the trimesters if they wanted a view with every week.

Navigation: Drilling into the week, the user can see images of the body as well as the fetus, they can also quickly and easily navigate to the next week. If the user scrolls to the bottom, they can also jump to another trimester.

pregnancyfinal3whitebg2.jpg