HEALTHCARE
MOBILE APP
DESIGN SYSTEM
Building Design System for Healthcare App
Creating reusable components and intuitive user experiences for a Healthcare app.
Overview
Cefaly is a clinically-proven migraine
management device. The companion app
— CeCe — helps patients manage their
treatment sessions, log migraine data,
and track progress.
When I joined the project, other designers
had already established the foundation:
typography, color tokens, and spacing. My
responsibility was to pick up from there,
audit what existed in the product, build
out the missing component library, and
apply the new design system across the
app's screens.
An app without a shared
language
The existing CeCe app had been built without a
documented design system. Components were created
screen-by-screen, resulting in visual and behavioral
inconsistencies.
No documented system
Components existed in the app but had never
been formally catalogued or structured in Figma
for reuse.
Inconsistent UI patterns
Buttons, input fields, and cards varied in style,
state handling, and spacing across different
screens.
Scaling complexity
New screens and features were being planned.
Without a system in place, inconsistency would
only compound.
PROBLEM
PROCESS
01
Understand Experience
Reviewed current product, identified usability gaps, and opportunities for improvement through structured analysis.
02
Build Missing System
Created scalable components, interaction patterns, and visual rules to establish a consistent foundation.
03
Apply to Real Screens
Implemented the system across key screens, ensuring usability, clarity, and a cohesive user experience.
04
Refine Through Iteration
Tested layouts, reviewed flows, and refined details based on practical feedback and real use cases.
Input Fields
Input fields were identified as the highest
priority component — they appear throughout
sign-up, onboarding, and log flows, and the
existing implementation lacked consistent state
handling. I began with research into field layout
patterns, label placement, and usability best
practices for mobile forms.
"Research shows top-aligned labels
reduce cognitive load and allow faster
form completion on mobile."
Coach Marks: Guiding without
interrupting
Coach marks are a critical onboarding tool —
they introduce users to key features without
disrupting their flow. The original coach mark
was a generic modal overlay detached from any
specific UI element. I explored four layout
directions: modal-style, tooltip with tail
(contextual), text-only, and icon-text button
variations.
Selection Chips & Cards:
Rethinking choices
The onboarding flow asks users a series of
health-related questions — migraine frequency,
triggers, goals — using selectable options. I
explored multiple selection patterns: radio lists,
pill chips, icon-grid cards, and hybrid chip+icon
formats.
Cards: Information & Treatment
Information Card
Information card to display treatment stats like session time, intensity, total sessions). The previous information cards displayed each stat in a separate small tile — visually fragmented and hard to scan. The new treatment card consolidates Session Time, Intensity, and Total Sessions into a single vertical card with icon anchors.
Treatment Card
Treatment card to show current intensity and increase or stabilize the intensity. This layout was designed with scalability in mind: if a "decrease" button was ever needed alongside the existing intensity controls, the structure could accommodate it without redesigning the card from scratch.
Applying the system to
key user flows
Flow 01
Pain location selector — onboarding
One of the most unique screens in the app asks
users to mark where on their head they feel
migraine pain. The original used a static 2D
illustration. I explored multiple directions ranging
from flat 2D art to photorealistic 3D models,
ultimately landing on a 3D mesh-style head that
communicates precision without clinical
coldness.
Flow 02
ACUTE treatment session flow
The acute treatment flow handles more complex
states — device disconnection, low battery
warnings, stimulation intensity alerts, and
session completion rating. Each edge case
screen was designed to maintain visual calm
while delivering critical information. The design
system's popup and alert patterns were applied
directly, giving these states a consistent voice
without requiring net-new component
decisions.
What this project
delivered
Consistent language
Key flows — login, sign-up, onboarding,
treatment sessions — all redesigned to
use the same components, spacing, and
interaction patterns.
Scalable structures
Components like the treatment card and
selection card were built with
extensibility in mind, so new features
don't require starting from scratch.
Research-backed decisions
Every major component choice — input
layout, card structure, coach mark style
— was grounded in UX research and
tested through iterations.
Reflection
Joining a project mid-stream with an existing
(but undocumented) product required me to
balance auditing what existed with moving
forward quickly. Working alongside two other
designers meant I had to be clear in my
component decisions — not just "what it looks
like" but "why it works this way" — so that the
system could be understood and extended by
others. The most valuable skill I practiced here
wasn't just design craft, but systems thinking:
making decisions today that simplify the screen I
was working on and the next ten screens
someone else might build.
Each edge case screen was designed to
maintain visual calm while delivering critical
information. The design system's popup and
alert patterns were applied directly, giving these
states a consistent voice without requiring net-
new component decisions.
HEALTHCARE
MOBILE APP
DESIGN SYSTEM
Building Design System for Healthcare App
Creating reusable components and intuitive user experiences for a Healthcare app.
Overview
Cefaly is a clinically-proven migraine
management device. The companion app
— CeCe — helps patients manage their
treatment sessions, log migraine data,
and track progress.
When I joined the project, other designers
had already established the foundation:
typography, color tokens, and spacing. My
responsibility was to pick up from there,
audit what existed in the product, build
out the missing component library, and
apply the new design system across the
app's screens.
An app without a shared
language
The existing CeCe app had been built without a
documented design system. Components were created
screen-by-screen, resulting in visual and behavioral
inconsistencies.
No documented system
Components existed in the app but had never
been formally catalogued or structured in Figma
for reuse.
Inconsistent UI patterns
Buttons, input fields, and cards varied in style,
state handling, and spacing across different
screens.
Scaling complexity
New screens and features were being planned.
Without a system in place, inconsistency would
only compound.
PROBLEM
PROCESS
01
Understand Experience
Reviewed current product, identified usability gaps, and opportunities for improvement through structured analysis.
02
Build Missing System
Created scalable components, interaction patterns, and visual rules to establish a consistent foundation.
03
Apply to Real Screens
Implemented the system across key screens, ensuring usability, clarity, and a cohesive user experience.
04
Refine Through Iteration
Tested layouts, reviewed flows, and refined details based on practical feedback and real use cases.
Input Fields
Input fields were identified as the highest
priority component — they appear throughout
sign-up, onboarding, and log flows, and the
existing implementation lacked consistent state
handling. I began with research into field layout
patterns, label placement, and usability best
practices for mobile forms.
"Research shows top-aligned labels
reduce cognitive load and allow faster
form completion on mobile."
Coach Marks: Guiding without
interrupting
Coach marks are a critical onboarding tool —
they introduce users to key features without
disrupting their flow. The original coach mark
was a generic modal overlay detached from any
specific UI element. I explored four layout
directions: modal-style, tooltip with tail
(contextual), text-only, and icon-text button
variations.
Selection Chips & Cards:
Rethinking choices
The onboarding flow asks users a series of
health-related questions — migraine frequency,
triggers, goals — using selectable options. I
explored multiple selection patterns: radio lists,
pill chips, icon-grid cards, and hybrid chip+icon
formats.
Cards: Information & Treatment
Information Card
Information card to display treatment stats like session time, intensity, total sessions). The previous information cards displayed each stat in a separate small tile — visually fragmented and hard to scan. The new treatment card consolidates Session Time, Intensity, and Total Sessions into a single vertical card with icon anchors.
Treatment Card
Treatment card to show current intensity and increase or stabilize the intensity. This layout was designed with scalability in mind: if a "decrease" button was ever needed alongside the existing intensity controls, the structure could accommodate it without redesigning the card from scratch.
Applying the system to
key user flows
Flow 01
Pain location selector — onboarding
One of the most unique screens in the app asks
users to mark where on their head they feel
migraine pain. The original used a static 2D
illustration. I explored multiple directions ranging
from flat 2D art to photorealistic 3D models,
ultimately landing on a 3D mesh-style head that
communicates precision without clinical
coldness.
Flow 02
ACUTE treatment session flow
The acute treatment flow handles more complex
states — device disconnection, low battery
warnings, stimulation intensity alerts, and
session completion rating. Each edge case
screen was designed to maintain visual calm
while delivering critical information. The design
system's popup and alert patterns were applied
directly, giving these states a consistent voice
without requiring net-new component
decisions.
What this project
delivered
Consistent language
Key flows — login, sign-up, onboarding,
treatment sessions — all redesigned to
use the same components, spacing, and
interaction patterns.
Scalable structures
Components like the treatment card and
selection card were built with
extensibility in mind, so new features
don't require starting from scratch.
Research-backed decisions
Every major component choice — input
layout, card structure, coach mark style
— was grounded in UX research and
tested through iterations.
Reflection
Joining a project mid-stream with an existing
(but undocumented) product required me to
balance auditing what existed with moving
forward quickly. Working alongside two other
designers meant I had to be clear in my
component decisions — not just "what it looks
like" but "why it works this way" — so that the
system could be understood and extended by
others. The most valuable skill I practiced here
wasn't just design craft, but systems thinking:
making decisions today that simplify the screen I
was working on and the next ten screens
someone else might build.
Each edge case screen was designed to
maintain visual calm while delivering critical
information. The design system's popup and
alert patterns were applied directly, giving these
states a consistent voice without requiring net-
new component decisions.
Case Study
Building Design System for Healthcare App
Creating reusable components and intuitive user experiences for a Healthcare app.
Healthcare
Mobile App
System Design
UI/UX Design
Overview
Cefaly is a clinically-proven migraine management device. The companion app — called CeCe — helps patients manage their treatment sessions, log migraine data, and track progress.
When I joined the project, other designer had already established the foundation: typography, color tokens, and spacing. My responsibility was to pick up from there, audit what existed in the product, build out the missing component library, and apply the new design system across the app's screens.
THE PROBLEM
An app without a shared language
The existing CeCe app had been built without a documented design system. Components were created screen- by-screen, resulting in visual and behavioral inconsistencies throughout the product. As the team planned to scale the app with new features, these gaps became a real obstacle.
No documented design system
Components existed in the app but had never been formally catalogued or structured in Figma for reuse.
Inconsistent UI patterns
Buttons, input fields, and cards varied in style, state handling, and spacing across different screens.
Scaling complexity
New screens and features were being planned. Without a system in place, inconsistency would only compound.
PROCESS
01
Understand the Existing Experience
Reviewed the current product, identified usability gaps, inconsistencies, and opportunities for improvement through structured analysis.
02
Build the Missing System
Created scalable components, interaction patterns, and visual rules to establish a consistent design foundation.
03
Apply to Real Screens
Implemented the system across key screens, ensuring usability, clarity, and a cohesive user experience.
04
Refine Through Iteration
Tested layouts, reviewed flows, and refined details based on practical feedback and real use cases.
Component Audit. Knowing what we were working with.
The first thing I did was map out every component present in the existing app. Rather than guessing what existed, I did a full audit and documented the complete component inventory — buttons, cards, chips, app bars, sliders, popovers, coach marks, nav bars, badges, and more.
This gave the team a shared baseline and helped us understand what needed to be built from scratch versus
what needed to be standardised and documented.
Input Fields. Top priority.
Input fields were identified as the highest priority component — they appear throughout sign-up, onboarding, and log flows, and the existing implementation lacked consistent state handling. I began with research into field layout patterns, label placement, and usability best practices for mobile forms.
Design Decision
After evaluating different container styles: outlined, filled, and underline the outlined approach with top-aligned labels was selected. Research shows top-aligned labels reduce cognitive load and allow faster form completion on mobile since users can scan label and input text in a single eye movement. The outlined container clearly communicates interactivity, while the underline variant reduced discoverability.
Research shows top-aligned labels reduce cognitive load and allow faster form completion on mobile
Cards. Build for scalability.
Information Card
Information card to display treatment stats like session time, intensity, total sessions). The previous information cards displayed each stat in a separate small tile — visually fragmented and hard to scan. The new treatment card consolidates Session Time, Intensity, and Total Sessions into a single vertical card with icon anchors.
Treatment Card
Treatment card to show current intensity and increase or stabilize the intensity. This layout was designed with scalability in mind: if a "decrease" button was ever needed alongside the existing intensity controls, the structure could accommodate it without redesigning the card from scratch.
Coach Marks.
Coach marks are a critical onboarding tool — they introduce users to key features without disrupting their flow. The original coach mark was a generic modal overlay detached from any specific UI element. I explored four layout directions: modal-style, tooltip with tail (contextual), text-only, and icon-text button variations.
Design Decision
The tooltip with a directional tail was chosen because it anchors the coach mark visually to the element it's explaining, reducing ambiguity. A modal coach mark (like the original) requires the user to make a mental leap between what they're reading and what it refers to. The contextual tooltip removes that gap. The "Skip all / Next" CTA pattern was preserved, with the filled Next button given strong visual hierarchy to guide progression. A step counter (e.g. 1/10) was added to manage user expectations about the length of the tour.
Selection chips & cards.
The onboarding flow asks users a series of health-related questions — migraine frequency, triggers, goals — using selectable options. The original implementation used simple radio buttons with plain list items. I explored multiple selection patterns: radio lists, pill chips, icon-grid cards, and hybrid chip+icon formats before arriving at the final selection card system.
FLOW Design
Applying the system to key user flows
With the component library in place, I moved into screen-level design — applying the system to some of the flows. Each screen had to work within the new design language while also improving clarity and usability over the previous version.
Flow 01
Pain location selector — onboarding
One of the most unique screens in the app asks users to mark where on their head they feel migraine pain. The original used a static 2D illustration with overlapping region labels and simple round toggle buttons below. This created ambiguity — tapping a region on the illustration vs tapping the button below felt disconnected.
I explored multiple visual directions ranging from flat 2D line art to photorealistic 3D models, ultimately landing on a 3D mesh-style head that communicates precision without clinical coldness. The "Mark all / Unmark all" affordance was retained for speed.
Flow 02
Prevent and Acute Treatment
The PREVENT treatment flow guides users through a 20-minute neurostimulation session. The redesigned flow uses the light mode design system — clean white surfaces, large countdown typography, and a clear intensity control with a prominent Stabilize button. Session completion states (complete vs incomplete) are visually differentiated using the icon + stat card system built in the component phase.
Project Deliverables
A documented component library
12+ component categories fully designed with states, variants, and usage rules — reducing future design decisions to application rather than invention.
Consistent screen language
Key flows — login, sign-up, onboarding, treatment sessions — all redesigned to use the same components, spacing, and interaction patterns.
Scalable structures
Components like the treatment card and selection card were built with extensibility in mind, so new features don't require starting from scratch.
Research-backed decisions
Every major component choice — input layout, card structure, coach mark style — was grounded in UX research and tested through iterations.
OUTCOMES & REFLECTION
Joining a project mid-stream with an existing (but undocumented) product required me to balance auditing what existed with moving forward quickly. Working alongside two other designers meant I had to be clear in my component decisions — not just "what it looks like" but "why it works this way" So that the system could be understood and extended by others. The most valuable skill I practised here wasn't just design craft, but systems thinking: making decisions that scaled beyond the screen I was working on.