Designing a Consumer Health & Wellness Portal for Merck

 

Client: Merck
Services: UX & UI Design

In 2014 Merck, one of the largest pharmaceutical companies in the world,  had a new initiative.  They sought to connect with their customers daily lives, by sharing insights, encouraging healthy choices, and providing tools to help keep customers on the right path to a healthy life.

They desired a content platform that helped their customers manage health conditions, or learn to drop an old habit. They wanted a platform to give advice for caring for a loved one, or even just sharing a healthy recipe.

My Role: I was introduced to this project through Rodale’s content marketing division, and had a three part objective. Part 1: Craft the global navigation, header and footer as the frame work for the site. Part 2: Identify content needs and article types to be designed into wordpress page templates and components using the “conditions” section as a base for other section types. Part 3: Translate the MerckEngage® brand book into a UI design. Part 4: Put it all together and ship!

home

Part 01. Planning

The project kicked off with category and navigation planning. Because the platform was to be built on WordPress, design was provided the content sections, and then worked with the editorial and marketing team to itemize page template types, component needs, and the global header and footer.

02. Wireframing:

After we planned the items to be created, I wireframed the full header, footer and 8 page content types, and page components.  I used a 12 column responsive grid system to allow the site to easily scale from desktop to mobile.

03. UI & Visual Design

Separately, Merck had paired up with an agency to formulate brand guidelines for the site. I was provided a logo and asset package with color selections and brand illustrations. I took these assets and translated them into functional UI components for a design system that kept consistent with the brand personality.

Artboard Copy 2
Artboard Copy 4

04. Full Comps and Hand-off

Finally, I applied UI styling to the previously designed wireframes and prepped the files for hand off to the engineering team.