ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
ReloPortal Redesign
Phase 1: Scope and Research
WebMD | Clearblue Take Action Program UI
A Guided engagement interface designed to translate complex health information into clear patient journeys
and confident next step decisions.
WebMD | UX Designer | Healthcare Platforms: Web, Tablet, Mobile
Project Overview
The challenge was translating complex health guidance into a guided digital experience that worked across web, tablet, and mobile, without overwhelming users navigating sensitive next steps. Clearblue sought to extend its total health brand into a trusted digital experience. The goal was to deliver a solution that balanced scientific accuracy with approachable, supportive design.
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.
Early wireframes explored pathways for structured patient engagement.
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.
Interface elements supported consistent engagement across platforms.
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.
Final designs translated engagement pathways into usable patient experiences.
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 experience enabled patients to integrate their next steps with greater clarity and confidence. Wireframes were developed across key pathways before visual design, ensuring information hierarchy and navigation logic were validated before production, grounding every visual decision in user need rather than aesthetic preference.