2025
HealHub
All-in-one health platform
HealHub is a comprehensive medical and health mobile app designed to help users track their wellbeing, manage medical tasks, connect with doctors, and receive AI-powered guidance — all within a single, unified ecosystem. The goal was to create a calm, trustworthy, and highly usable experience, where users feel in control of their health and confident interacting with medical data.
The platform covers a full spectrum of healthcare needs:
Patient Mobile App — personalized dashboard, health tracking, AI recommendations, appointment scheduling, medication management, and symptom logging.
AI-Powered Guidance — chat, insights, and tailored recommendations to support proactive health management.
Support & Communication Tools — doctor communication, emergency contacts, and access to helpful resources and documentation.
Instead of just designing screens, I focused on building a robust, scalable Design System that serves as the backbone for the entire HealHub ecosystem. This approach ensured visual consistency, accessibility, and a seamless developer hand-off.
1. Foundation & Design Tokens
I began by establishing a comprehensive set of Design Tokens. This included a semantic color palette (prioritizing WCAG 2.1 accessibility for medical contexts), a modular typography scale, and an 8pt spacing grid. By using Figma Variables, I ensured the system is future-proof and ready for effortless Dark Mode implementation.
2. Atomic Component Library
The UI was built using Atomic Design principles. I developed a library of "pancaking" components—from basic atoms (buttons, inputs) to complex organisms (appointment cards, interactive health charts).
Master Components: Utilized advanced Figma features like Slots, Boolean properties, and Component Properties to reduce library bloat.
Smart Variants: Every component accounts for all possible states (Default, Hover, Focus, Error, Loading), ensuring zero ambiguity during development.
3. Interaction & Motion System
To elevate the user experience beyond static layouts, I defined a Motion Manifesto for the app.
High-Fidelity Prototyping: I used Framer to create prototypes with real physics-based animations (Springs/Damping).
Functional Motion: Every transition was designed to guide the user—using shared element transitions to maintain context during the medical data drill-down.
4. Scalability & Governance
The onboarding flow and questionnaires were designed as reusable templates. By creating a system of flexible modules, the app can adapt to different medical profiles without the need for bespoke screens. This "System Thinking" reduced design debt and accelerated the hand-off process by providing developers with a clear source of truth.
