Designing the System Before the Screen
A foundation first design system for a healthcare app connecting doctors with hospitals for locum duties.
Overview
As the sole designer, I set out to create a foundational design system that could support a future healthcare platform one where hospitals post locum shifts and doctors can discover and apply seamlessly.
Unlike traditional UI first projects, I began directly with system creation focusing on defining scalable visual tokens, atomic hierarchies, and a brand-aligned structure that could later support both app and web experiences.
Why a Design System First
Design systems are often built after design inconsistencies appear, but I wanted to explore the reverse process: Build a flexible, scalable foundation first, and then let the product design evolve from it. This approach ensured that every future screen, component, and interaction would already be grounded in a structured, reusable system.
Core Principles
From Brand to UI: Tokenized Mapping
A three-layer system connecting brand values to semantic aliases and mapped UI elements, with all colors, typography, and components tokenized for consistency and scalability.
This Brand → Alias → Mapped → Token flow ensures all design elements are consistent, reusable, and easy to update across the system.
Color System
Structured from brand tones to functional aliases, our color system ensures consistency across the UI. Primary teal #329D8B reflects trust, calmness, and reliability at the core of the interface.
Each level inherits properties from the previous one, maintaining consistency while enabling scalability.
Typography System
Our typography system establishes clear hierarchy and readability across the interface.
Using the Inter font family, we defined headings, body, and captions with scalable sizes and weights, ensuring consistency and clarity throughout the product.
Each text style is tokenized for consistency, making typography scalable and easy to maintain across components.
Atomic Design System Components
I followed Atomic Design principles to build our component library. Starting with atoms like labels and buttons, I scaled up to templates that support consistent, reusable layouts
Each level inherits properties from the previous one, maintaining consistency while enabling scalability.
Generic Component Library
After defining the foundations, I created generic components not tied to specific app features, but reusable across multiple healthcare flows.
All components were built using Figma Variants, Auto Layout, and tokenized styles, allowing instant updates through centralized properties.
Reflection
Building the Pulse Design System taught me the importance of starting from the foundation rather than the interface.By defining brand structure, mapping, and atomic hierarchy first, I learned how to create a system that thinks before it designs.
Plenty more to share
let’s connect
'Redesigned the enquiry flow to improve recall and completion'
Redesigned Wandering Lama’s enquiry process to reduce user confusion and drop-offs. Focused on improving recall, clarity, and confirmation feedback.
Outcomes :
Enhancing the Online Clothing Shopping Experience
This project explored user challenges and motivations in online clothing shopping, uncovering UX opportunities to boost confidence, trust, and decision-making. While grounded in real user research, the design solutions were conceptual interpretations of those insights.
Outcome :