MIH Design System shared across BMA Health web, mobile and kiosk
Overview
The MIH Design System is the shared design foundation behind the three BMA Health products: the PHCIS web system (HCIS) used by staff, the patient Mobile App and the self-service Kiosk. One token pipeline powers a product theme for each platform, so the three products look and behave like one service.
Scope: 1,700+ design tokens in a three-tier architecture (Primitive → Semantic → Component) · light and dark mode · three product design systems (HCIS web, Mobile App, Kiosk) · design.md documentation of 140+ components · live component library of 60+ families.
My role & team
Freelance Lead UX/UI Designer (May–Nov 2026 · almost done, UX/UI wrapping up by the end of November 2026; not live yet). I architected the design system from scratch and lead a three-person UX/UI team: myself and two UX/UI designers, working with the BA and development team.
Problem & context
Three products with very different users and screens (dense staff workflows on the web, patients on their phones, first-time users standing at a kiosk) had to be designed and delivered on a tight government timeline, and still feel like one service. Developers and AI coding agents also needed a single source of truth they could build from directly.
Goals
One token pipeline shared across web, mobile and kiosk, with a theme per product.
Documentation that both developers and AI agents can build from.
Keep design and code in sync as the system grows.
Process
Figma first: from May 2026, when HCIS work began, we built the initial designs in Figma and set up the Design System and design tokens there, then extended them to the Mobile App and Kiosk from late July 2026, ahead of the formal client kickoff in August 2026.
Three-tier tokens: Primitive → Semantic → Component tokens with light and dark mode, feeding a product theme for each platform. For example, the kiosk uses a dedicated blue theme and the Prompt typeface at large sizes readable from standing distance.
Moving to code with vibe coding: when the delivery window shrank, I led the team to move the system into working code with Cursor and Claude Code, and connected code to Figma via MCP with two-way token sync.
design.md on GitHub: I authored design.md (15,000 lines, 140+ documented components) as the single source of truth for developers and AI agents, shared with developers on GitHub. Design tokens are distributed through GitHub as a versioned package, so developers build from the same source as the design.
Keeping it consistent: a live component library (60+ families) and a lint hook keep the system drift-free across 2,800+ commits.
Outcome
The design system now underpins all three BMA Health products: HCIS web, Mobile App and Kiosk. The project is almost done, with UX/UI wrapping up by the end of November 2026, and is not live yet. Full screens are shown during interview presentations.
Learnings
Starting in Figma gave the team a fast shared foundation, but moving the system into code with a written design.md is what let developers and AI agents build consistently at speed.