Health Tech · Mobile App
Designing a Digital Awareness Platform for Pulmonary Arterial Hypertension
A patient-focused platform that helps people understand symptoms, manage treatment awareness, and access reliable health information.
Role
Product Designer
Duration
6 Months
Platform
Mobile App
Team
Solo Designer
Project Overview
At a Glance
Problem
Patients with Pulmonary Arterial Hypertension lacked accessible digital tools to understand their diagnosis, navigate treatment pathways, and access reliable health information — leaving them without support during one of the most difficult periods of their lives.
Role
Product Designer responsible for UX strategy and end-to-end design execution.
Platform
Mobile-first health awareness app (iOS & Android).
Duration
6 months
Leadership
My Role
As the sole designer on this engagement, I owned the end-to-end UX process — from discovery through to engineering handoff — while designing a platform that needed to balance clinical credibility with emotional warmth for patients navigating a rare chronic illness.
Led UX strategy for a patient-facing mobile health awareness platform
Designed mobile-first experience for PAH patient education and awareness
Created a visual language that balanced clinical credibility with emotional warmth
Structured complex medical information into accessible, guided patient flows
Built a reusable component system for scalable health content delivery
The Problem
Real-World Challenges Faced by PAH Patients
Pulmonary Arterial Hypertension is a rare and complex condition. Patients face significant barriers in understanding their diagnosis, accessing reliable information, and managing the emotional weight of a chronic illness.
01
Delayed Diagnosis
Symptoms are often misunderstood leading to late detection.
02
Information Gap
Patients struggle to access simple explanations about the condition.
03
Emotional Stress
Managing a chronic condition causes anxiety and uncertainty.
User Research
Seeing the World Through Their Eyes
Patient Pain Points
Lack of clear education about the condition
Confusing medical terminology in existing resources
Limited emotional support during diagnosis and treatment
Design Opportunities
Simplify medical knowledge through visual storytelling
Visualise treatment journeys as guided, step-by-step flows
Empower patient self-awareness through accessible tools
Design Strategy
Strategy Rooted in Empathy
Every design decision was anchored in patient needs — prioritising clarity, emotional safety, and accessibility over aesthetic novelty.
01
Accessible Health Information
Use simple language and visual storytelling to make complex medical content approachable for patients of all backgrounds.
02
Guided Patient Journey
Break complex medical processes into easy, digestible steps that reduce overwhelm and build confidence.
03
Emotional Support
Use a reassuring tone and calm visuals to create a safe, supportive environment throughout the experience.
04
Mobile First Design
Patients access information primarily on mobile — every screen was designed for thumb-friendly, on-the-go use.
System Thinking
How the Design Addressed Platform Complexity
Designing for patients navigating a rare chronic illness required more than good visuals — it demanded a structured, scalable approach to information architecture, content delivery, and emotional experience.
01
Patient-Centered Information Architecture
Medical content was mapped around patient needs and awareness stages — ensuring information is encountered in the right sequence, at the right depth, without overwhelming first-time users.
02
Progressive Content Disclosure
Complex medical information is broken into layered steps — foundational concepts first, detailed clinical data accessible on demand — reducing cognitive load while maintaining clinical accuracy.
03
Scalable Component Architecture
A reusable set of health content cards, navigation modules, and awareness flow components — built for consistency across all screens and extensible as new content areas are added.
04
Guided Awareness Flows
Core patient journeys — symptom awareness, treatment understanding, and support access — designed as structured, step-by-step flows that guide patients from confusion to confidence.
Methodology
From Research to Reality
A structured, patient-centred process — from discovery through to a tested, high-fidelity mobile experience.
Research
Concept
Wireframes
Prototype
Visual Design
Testing
Research
Concept
Wireframes
Prototype
Visual Design
Testing
01 — Research
Understanding patient needs and healthcare information gaps.
02 — Concept
Designing a platform centered around awareness and accessibility.
03 — Wireframes
Structuring information and navigation flows.
04 — Prototype
Interactive flows for education and awareness modules.
05 — Visual Design
Calming UI style with strong readability.
06 — Testing
Ensuring clarity and usability.
Design System
A Visual Identity That Builds Trust
Every visual decision — from type scale to colour palette — was made to lower anxiety and raise confidence. The system needed to feel clinical enough to be credible and warm enough to feel human.
Typography
Clean, readable UI typefaces chosen for health information — legible at small sizes, calming at large display sizes.
Display
32px
Bold
Heading
24px
SemiBold
Body
16px
Regular
Caption
12px
Medium
Color Strategy
Soft reds and neutrals that evoke calm and trust — carefully calibrated to feel reassuring rather than alarming.
Primary
#C0392B
Soft Red
#E8827A
Warm White
#F5F0EF
Mid Neutral
#8A8F98
Deep BG
#0D0E11
Component System
Reusable cards and modules built for content-heavy health information — composable, accessible, and consistent across all screens.
Info Cards
Navigation
Actions
Final Product
Key Screens That Tell the Story
High-fidelity screens from the shipped product — showing the core patient education, awareness, and navigation flows across the mobile app.
Outcomes
Designing for Real Impact
The platform created a measurable shift in how patients engage with their health — moving from confusion and anxiety to clarity and confidence.
50+
Screens Designed
A complete mobile experience covering symptom awareness, treatment journeys, and patient support — all within a single unified design system.
3
Core Patient Flows
Symptom awareness, treatment pathway guidance, and emotional support — structured as guided, step-by-step experiences for patients.
100%
Mobile-First Design
Every screen designed for thumb-friendly, on-the-go use — ensuring patients can access critical health information wherever they are.
Improved Accessibility to Healthcare Information
Patients better understand their symptoms and treatment pathways through clear, visual health content.
Mobile-First Awareness Platform
Complex health information made accessible through plain language, guided flows, and visual storytelling — designed for on-the-go use.
Simplified Complex Medical Education Content
Users gain confidence managing their health journey — reducing anxiety and improving treatment adherence through structured, approachable content.
Next Case Study
Finova Expense Tracker
Vibe Coding · SaaS Finance App