top of page

WebMD Pregnancy Page

Role: Creative Direction, Design, UX/UI
Adobe XD, Illustrator, Photoshop

BootsWebMD initially created a series of articles detailing a weekly update on what mothers could expect during pregnancy. The goal was to provide a user-friendly navigation structure in order to surface the newly-created content to visitors. However, previous page renditions were inadequate for surfacing the content due to the sequential nature of the articles, and therefore PV's were in decline. Users found the tool, too full of information, and visually were not happy with the experience overall. The previous UI was very bland and outdated, and there was no sense of purpose or hierarchy that offered any sense of education to the user. The overall user experience was in serious need of an overhaul given the nature of the subject.

​

The team gathered for a kick-off meeting to discuss project numbers and wants, and overall goals we wanted to achieve for the project. We also discussed what issues users were having and why the conversion rate was so low. I also conducted a card-sorting session to prioritize features and pinpoint what the more popular page content requests were, as well as whatever else the team felt needed better representation.

sticky.png
Card sorting prioritization exercise for the BootsWebMD Pregnancy page kick-off

I then sketched-out low-fidelity page content ideas to provide a better navigational path to the content. Per prior user feedback, I also wanted to institute a better UI visual component to documenting images each tri-mester. I then presented revised wire frame mocks to the team, then tested and revisited our new designs, and then presented final high-fidelity mocks to the Development team

for build.

preg2!.png
Low-fidelity sketches of pregnancy page layout and page flow.
preg2.png
Low-fidelity sketches of pregnancy page tabbed navigation

I then met with members of the Web Development and Brand Content teams to go over the new page navigation and user flow to pinpoint any problems we may experience with how I thought the information would best be representing, using the 3 trimester periods in a 2 column, horizontal zebra-pattern styling.

t.jpg
Detailed view of trimester table column layout

I then presented the final UI elements to the WebDevelpment team to proceed with setting up CSS variable to apply to all pages.

pregnancy_variables.png
Revised pregnancy page UI elements

As a result of reformatted UI and better page-flow, the Pregnancy week-by-week page saw a jump in page views of 60,000 PV's per month, and all content linked from the page experienced a 58% lift in page views per month, year over year for 2015, and an additional 47% in 2016.

bottom of page