Components & Patterns
Consultations, diagnostics, pharmacy, insurance, and wellness operated with distinct workflows and varying data densities. The challenge was to architect a unified framework that honored unique decision contexts while eliminating fragmented user experiences.
Goal:
Streamline design-to-dev handoff via unified components and patterns.
Prevent reinvention of solutions by establishing shared component & pattern library.
Drive faster iterations as product complexity grows.
Components
Following Brad Frost's Atomic Design Principles, we first built the core components of these groups:
Actions
Inputs
Feedbacks
Status
Navigation
Component Properties as API contracts
We audited internal requirements and collaborated with developers to finalize the component properties so that Figma props and component APIs completely matched.
Benefits:
Designers and developers talk about components the same way.
Handoffs become seamless.
AI-assisted generation remains aligned with system constraints.
Highlights
Documentation
We documented components in Figma, creating a shared source of truth for designers, developers, and evolving product workflows as Mozaic scaled.
Component Management
We intended the Mozaic component library to stay curated rather than a catch-all repository. Organisms created during new projects remained local to their features, allowing teams to experiment and iterate, until their broader system value was clear. We were looking for:
Proven reuse: The organism is used across services and is not a local one time use.
Consistency was critical: From a brand and experience perspective, it was essential to keep the component consistent.
Clear value: It meaningfully reduced repeated decision-making or implementation effort across the team.
Patterns
As Mozaic grew, we discovered repeating interactions and user intents across services and converted them into Patterns.
Objective: Standardize system logic and response across all services while allowing UI layouts and data density to remain context-specific.
Examples
Upload Module
Date & Slot Selection
Documentation
We documented patterns to capture interaction intent, usage, and behavioral rules—ensuring teams solved recurring problems consistently without reinterpreting the system each time.
Platform & Domain Variance
Patterns in Mozaic recorded repeated user intent and expected behavior, allowing solutions to mature through real use rather than theoretical abstractions.
Patterns emerged as localized solutions and graduated only after cross-service reuse.
Intent and behavioral logic remained stable, even as UI changed across desktop, mobile, and app.
Structural variations (eg: side sheets vs bottom sheets) shared the same hierarchy, actions, and rules.
This ensured consistency across services while preserving platform-appropriate experiences.
Topic Deep Dives
Foundation & Token Architecture
AI-Assisted Workflows
How Mozaic enabled consistent, system-aligned UI generation using AI tools.