My Role
Product Designer (UX/UI Designer)
Scope
Team
Me — Foundational UI components, UI audit
Allison Spillane — Mobile & advanced components
Sara Sailors — Engineering Lead
The Problem
As the platform grew, UI variations accumulated across components and interactions. Without a shared foundation, clinicians encountered a less predictable interface, while design and engineering faced ongoing rework.
Patterns fragmented as the product scaled without a shared system.
The Solution
To improve design consistency and development velocity, I partnered with a teammate and engineering to build a scalable component library in Figma.
Rather than building a full design system upfront, we focused on foundational components that delivered immediate value and could scale over time, with naming conventions and implementation constraints aligned on from the start.
Defining
the Scope
ClinicianConnect had grown without a shared inventory of UI patterns, creating variation across workflows as the platform evolved. Because product direction was still evolving, introducing new components too early risked reinforcing patterns that might later change. The team and I decided to first document and structure existing UI patterns, creating a stable foundation before standardizing components.
Mapping
the Interface
Observed Validation Variations
01
Default field
02
Required field + success feedback
03
Required field + success + help icon
04
Required field
Variability in input styling and validation states spotted across clinician workflows.
Competitive
Analysis
Without an existing design system for the web platform, each team member independently evaluated Material Design and IBM Carbon to understand how mature systems organize components and documentation. After regrouping, we identified principles that supported the evolving product roadmap without overbuilding the system prematurely.
Comparative analysis informed a lightweight, scalable structure for the initial UI library.
Audit:
UI Patterns
Next, ClinicianConnect was organized into key workflows, and I audited dozens of live screens, capturing and tagging UI components to create an inventory of patterns and inconsistencies across the product.
Once the inventory was complete, the team consolidated our findings into a shared inventory that became the blueprint for the initial UI kit.
Building
the System
With the inventory complete, I determined the core components for the initial UI kit. Following atomic design principles, I started with typography and spacing before building higher-variation interactive components. As I built the library, I addressed critical accessibility issues, including missing focus states and insufficient color contrast.
At the same time, I co-developed a presentation for engineering and product teams demonstrating how consolidating component variations would reduce duplicate work over time.
Visual Foundations
Typography
ClinicianConnect
H1
22px/Semibold
ClinicianConnect
H2
16px/Bold
This UI Library was built to support
reusability across screens and teams
Body Paragraph
16px/Regular
Sizing and Spacing
All component sizing should be in multiples of 8px or 4px, 8px is preferable. Consistent, standard, and scalable.
Example: System modal with real-world copy
Core Components
System in Context
40+
reusable components reduced variation across workflows
The
Outcome
The library became a shared source of truth for new feature work, making it easier for design and engineering to identify reusable patterns, reduce rework, and accelerate iteration.
After
INPUT FIELDS
~30%
Cleaner handoffs, reduced rework, faster decisions.
What’s Next
Before wrapping up my contribution, the following priorities were identified to help evolve the library into a more scalable system: