HealthConnect
Patient App

A complete end-to-end healthcare ecosystem designed for iOS. This UX/UI case study showcases the full product design process—from user research, service mapping and information architecture through to interaction design, high-fidelity UI, prototyping and usability testing. The outcome is a connected digital experience that simplifies appointments, medical records, payments and ongoing care while improving efficiency for both patients and healthcare providers.

Solo Designer User Research UX Strategy iOS UI Usability Testing Design System
Login
Home
Records
Project
HealthConnect — iOS App
Client
HealthConnect
Role
Solo UX/UI Designer — End to End
Platform
iOS Mobile
Tools
Adobe XD · Illustrator
Process
Research → Persona → Flow → Wire → UI → Test
01
Discovery & Research
Problem · Users · Insights
01 The Problem

Healthcare is complex.
The app shouldn't be.

Patients in Australia face a fragmented healthcare experience — juggling separate systems for appointments, records, medications and payments. The brief was clear: design a single platform that makes navigating healthcare as simple as everyday consumer apps.

The dual-user challenge — designing for both patients who need simplicity and medical staff who need efficiency — shaped every decision made throughout this project.

01

Fragmented touchpoints

Patients used 3–5 separate systems just to book an appointment, access results and pay their bill.

02

High anxiety context

Healthcare users are often stressed or unwell. Every extra tap, unclear label or failed step has real human cost.

03

Two opposing user types

Patients need hand-holding. Medical staff need speed. One design system had to serve both without compromise.

04

Trust & data sensitivity

Medical data is personal. The visual language had to communicate safety and authority at every step.

02 User Research

Understanding who
we were designing for

I conducted user interviews and contextual research with both patient and staff users before any wireframe was drawn. The research surfaced three core insights that shaped the entire design strategy.

Insight 01

Patients avoid apps they don't trust

Trust signals — hospital branding, verified doctor profiles, secure payment indicators — were the #1 factor in adoption intent.

Insight 02

"Which department?" is the hardest question

First-time patients consistently failed to select the correct department. This became the "Intelligent Guidance" feature.

Insight 03

Post-visit care is neglected

Patients forget medications and miss follow-up appointments. Proactive notifications were a high-value, low-friction solution.

03 User Personas

Two users.
One system.

I developed two primary personas from the research — one patient and one healthcare provider — to anchor all design decisions in real human needs.

👩

Tina W.

Patient · Returning user
34
Brisbane, AU
Moderate
3–4x per year

Goals

  • Book appointments fast
  • Access health records anytime
  • Pay bills without paper

Frustrations

  • Confused by departments
  • Forgets medication times
  • Hates re-entering details
👨‍⚕️

Dr. Nadine

General Physician · Women's Hospital
42
Women's Health
High
12–18

Goals

  • View schedule at a glance
  • Reduce no-shows
  • Quick patient profile access

Frustrations

  • Slow booking systems
  • Patients arrive unprepared
  • Fragmented record systems
04 User Flow

Mapping the
patient booking journey

The core flow I focused on was the end-to-end appointment booking journey — the most critical path for patient users. The design reduces this from an average of 9 steps (across fragmented systems) to 5 in-app steps.

Open App
New
User?
Register +
ID Verify
Home
Dashboard
Registration
Screen
Select
Hospital
Smart
Guidance?
Select
Department
Browse
Doctors
Select
Time Slot
Review
Patient Info
Confirm
Booking
Notification
Set
Attend +
Pay Bill
Health
Records

Primary user flow — patient appointment booking · 10 steps · end to end

02
High-Fidelity Screens
Connected patient journey
05 Screen Gallery

A connected patient journey
across booking, records and payment.

Every screen is part of a single continuous patient journey — from first login through to post-visit care and bill payment. Click any screen to view at full size.

Entry & Onboarding
Login
01
Login
Entry
ID Verification
02
ID Verification
Entry
Home Dashboard
03
Home Dashboard
Discovery
Appointment Booking Flow
Side Navigation
04
Side Navigation
Navigation
Registration
05
Registration
Booking
Doctor List
06
Doctor List
Booking
Doctor Detail
07
Doctor Detail
Booking
Booking Confirm
08
Booking Confirm
Booking
Records & Alerts
09
Records & Alerts
Post-Visit
Payment & Hospital Information
Bill Payment
10
Bill Payment
Payment
Payment Confirm
11
Payment Confirm
Payment
Hospital Detail
12
Hospital Detail
Discovery
Flow: EntryDiscoveryNavigationBookingPost-VisitPayment
03
Design System
Colour · Type · Components
06 Visual Language

A system designed
for trust and calm

Healthcare design must communicate safety above all else. The colour system is anchored in clinical blue — authority and trust — with rose accents for warmth, and sky tones for accessibility. Every colour choice was accessibility-tested for WCAG AA compliance.

Clinical Blue
#3A6FA8 · Primary
Teal
#2EC4B6 · Accent / CTA
Sky
#E8F4FD · Backgrounds
Rose
#E8A0A0 · Warmth / Error
Ink
#1A2E44 · Text
White
#FFFFFF · Cards
Core Component Library
📅
Booking Form
Step-by-step selector with location, date, hospital and department. Maintains context across all selections.
👨‍⚕️
Doctor Card
Avatar, name, speciality badge, availability slots. Optimised for scan-reading under time pressure.
📋
Record Module
Medical, physical exam and medication records with consistent iconography and timestamp display.
🔔
Notification Card
Time-stamped alerts for medicine schedules and hospital reviews. Clear hierarchy — time first, action second.
💳
Payment Card UI
Swipeable card selector with active state. Supports credit, PayPal and Apple Pay with a single confirmation modal.
🏥
Hospital Profile
Hero image, rating system across 4 criteria, reviews, and quick-action buttons. Designed for browse and decision.
04
UX Decisions
Key decisions and trade-offs
07 Key UX Decisions

Key decisions
and trade-offs

Good UX is a series of deliberate trade-offs. These decisions show how research insights, task flow priorities and usability feedback shaped the final interface.

Design DecisionProblem it solvedUX rationale
Intelligent Guidance feature Patients couldn't select the right department Symptom-based routing removes the cognitive burden of medical knowledge from the user
3-step ID verification flow Trust and data security concerns Progress stepper (Scan → Verify → Complete) reduces anxiety by showing end is near
Week-view availability grid Users couldn't compare time slots easily Colour-coded Full/Available across 7 days gives instant visual availability — no drilling required
Side drawer navigation Deep feature set needed without cluttering home Hamburger drawer keeps 9 features accessible without overwhelming the primary service grid
Proactive medication notifications Poor post-visit medication adherence Time-stamped push notifications tied to prescription records reduce missed doses without in-app friction
Payment confirmation modal High-anxiety moment with large sums Bottom sheet modal with masked card number, summary and change option gives control before commitment
05
Process & Outcomes
How it was built · What was learned
08 Design Process

From research
to tested interface

01
Phase 1
User Research
Patient and staff workflow mapping, competitive audit, problem definition
02
Phase 2
Persona & Flow
2 primary personas, IA mapping, core user flows defined and validated
03
Phase 3
Wireframes
Low-fi wireframes for all 12 screens, stakeholder alignment, iterated twice
04
Phase 4
Hi-Fi UI + System
Full visual design, component library, colour tokens, Adobe XD prototype
05
Phase 5
Usability Testing
Prototype testing plan, task completion review, 3 UI iterations
09 Outcomes

End-to-end,
solo-delivered

The project delivered a polished iOS prototype and reusable UI system, covering the core patient journey from registration through to bill payment.

12
Screens covering every major patient journey
5+
Core user flows from login to post-visit care
Full
UX process — research → persona → flow → UI → test
10 Reflection

What this project
taught me

Designer's Note

In healthcare UX, small points of friction can create real consequences. A confusing label, hidden reminder or unclear next step can affect whether a patient books, attends or follows up on care.


The "Intelligent Guidance" feature came entirely from research — patients didn't know what was wrong with them, let alone what department to visit. No amount of good UI would have solved that without first understanding the user's actual mental model.


If I ran this project again today, I would use AI to analyse user interview transcripts faster, generate persona hypotheses for validation, and prototype multiple Intelligent Guidance flows simultaneously — compressing weeks of synthesis into days, and spending that time on the decisions that actually require human judgment.