top of page

Clearblue Take Action Program

Company: WebMD | Role: Sr. UX Designer | Industry: Healthcare | Tools: Photoshop, Sketch, Illustrator | Platforms: Web, Tablet, Mobile

​​

Project Overview

The Clearblue Take Action Program aimed to transform raw fertility data into meaningful, personalized "next steps" for users. Existing concepts lacked emotional resonance and clear guidance, which led to confusion and disengagement. The challenge was to design a digital health companion that empowered users to take informed actions on their fertility journey with clarity and confidence.

​

Kickoff

Clearblue sought to extend its trusted health brand into a digital experience. The goal was to create a platform that transformed
raw fertility data into personalized guidance. Existing concepts lacked emotional connection and clear instructions,
so our task was to deliver a solution that balanced scientific accuracy with approachable, supportive design.

Midfidelity Wireframes

Wireframes focused on restructuring the experience into digestible action cards, clear progress indicators,
and supportive educational content.

clear blue wireframes.png

Wireframes restructuring the experience into action cards and progress indicators

Wireframes organized content into digestible action cards, clear progress indicators, and supportive educational content.
Layouts were planned for desktop-first deployment with consideration for tablet and mobile adaptation.

UI Elements

We developed a design system that conveyed warmth and empathy, ensuring visual consistency across the Take Action experience and future Clearblue digital offerings. Components, typography, and color palettes
were carefully designed to feel approachable while maintaining credibility and clarity.

clearblue_variables copy.png

Design system conveying warmth, empathy, and visual consistency

Components, typography, and color palettes were carefully crafted to feel approachable while maintaining credibility.
The system ensures a consistent experience across the Take Action platform and supports future digital offerings.

Final UI Mockups

Final designs translated sensitive health data into actionable, reassuring steps, balancing scientific accuracy with supportive guidance. While the program was desktop-first, we adapted layouts and interactive elements for tablet and mobile users, ensuring readability, touch-friendly navigation, and consistent visual hierarchy across devices. AI-informed notifications
were incorporated to help users stay engaged and follow daily fertility guidance on the go.

clear-blue-easy_2016_tap_0-0_v01.jpg

Final designs translating sensitive health data into actionable, supportive steps

Final layouts balance scientific accuracy with supportive guidance. Desktop-first designs were adapted for tablet and mobile,
ensuring readability, touch-friendly navigation, and consistent visual hierarchy.
AI-informed notifications help users stay engaged and follow daily fertility guidance on the go.

Outcome/Reflection

The Clearblue Take Action Program increased engagement by providing users with daily guidance they could trust.
Early pilots demonstrated higher retention rates and improved comprehension of next steps. Beyond functional gains,
the redesign reinforced Clearblue's positioning as both a trusted medical brand
and an empathetic partner in personal health journeys.

bottom of page