Case file 05 Healthcare mobile app Design system

Mobile Design System

A fully scalable design system for a healthcare mobile app.

Poor UX, improper styling, and inconsistent UI patterns were affecting the healthcare mobile app experience. My role was to lead the foundational establishment of a new design language and system that could scale across mobile screens.

Read case study View image slots

Mobile design system cover showing healthcare app screens and token variables — A scalable mobile design system for healthcare app screens, visual foundations, and reusable interface decisions.

Problem

Inconsistent UI patterns were becoming the product problem.

The app relied on poor UX, improper styling, and inconsistent interface patterns across core healthcare journeys. Those inconsistencies created a fragmented experience and made every new screen harder to scale.

The strongest signal was negative feedback around inconsistent UI patterns. The work needed to go beyond visual cleanup and establish a system that could serve product teams across future mobile features.

72% negative feedback The biggest problem identified was feedback on inconsistent UI patterns.

Fragmented app language Visual decisions and interaction patterns were not behaving as one mobile product system.

Scaling risk Without reusable foundations, every future healthcare screen risked repeating the same inconsistencies.

Product direction

Start with visual language, then make it reusable.

The roadmap began with research into established systems such as Base, Material 3, and Apple iOS 26. The goal was to create a consistent visual language across the mobile application, then turn that language into reusable tokens, components, and documentation.

Color system

Primitive colors became semantic decisions with inverse support for text and icon accessibility, tested against WCAG contrast.

Spacing, radius, and effects

Spacing nomenclature, uniform radius, rounded elements, elevation, background blur, and inner shadow were standardized.

Typography and localization

Typographic hierarchy was defined with CJK script support so localized screens would not rely on unstable system fallback.

System model

From foundations to real mobile product flows.

Once the foundation was in place, I moved from primitives to semantics, then to components. Components were built with reusable tokens, attached properties, scalable variants, adaptive sizes, themes, and consistent interaction states.

Tokens

Components

Patterns

Documentation

Impact

Better consistency created faster design-to-dev handoff.

Design-to-dev handoff speed50%

Negative feedback around inconsistent UI72%

Color tokens organized114

Spacing and radius tokens8

Project timeline1 month

Image slots

The design-system process, captured from the original case file.

These images are now mapped to editable content. You can replace any of them later without changing the page structure.

Overview of inconsistent healthcare mobile app screens before the design system — 01 Product overview

Seventy two percent of negative feedback came from inconsistent UI patterns — 02 Problem signal

Research beginning for the mobile design system using Base, Material 3, and Apple iOS 26 references — 03 Research beginning

Color system process with semantic mapping and WCAG contrast support — 04 Color system

Spacing radius and effects token process for mobile app design system — 05 Spacing, radius, and effects

Typography process for mobile application hierarchy and CJK localization support — 06 Typography

Component process showing reusable tokens, scalable variants, and interaction states — 07 Components

Role breakdown for collaboration, UX audits, roadmap, research, work, and documentation — 08 Role breakdown

Nathan Curtis quote that a design system is a product serving products — 09 System philosophy

Fifty percent reduction in design-to-dev handoff time — 10 Handoff impact

My role

System design across structure, UI, documentation, and delivery.

CollaborationLed the design work while collaborating with a fellow UX designer and a developer.
UX auditsConducted UX audits to identify flaws, scalability issues, and inconsistencies in patterns across the product.
RoadmapStructured the roadmap to bring the design system from 0 to 1.
ResearchPerformed intensive research for the foundational establishment of the design system.
WorkCreated variables, reusable components, modes, typography systems, primitive tokens, and semantic tokens.
DocumentationDocumented typography, spacing, effects, and colors for future reference.