My Role: UX/UI Designer
Team: Allison Spillane (UI Designer), Sara Sailors (Engineering Lead)
Year: 2023-2024
Duration: One Year
When I joined Health Recovery Solutions (HRS). a startup specializing in remote patient monitoring (RPM) and telehealth, I worked on enhancing ClinicianConnect, a web portal used by clinicians to triage patient data, track vitals, and manage care workflows, all integrated with electronic health records (EHRs).
HRS’s core web platform supporting clinicians was scaling quickly. But as new features were shipped at a rapid pace, with no shared system to guide design or development, the interface started developing, inconsistent UI patterns, duplicated components, a lack of scalable, reusable systems.
Design and engineering teams were spending unnecessary time rebuilding components and troubleshooting inconsistencies, slowing velocity and increasing maintenance costs.
To help teams move faster, and design more consistently, my teammate and I built a scalable UI kit in Figma, implementing Brad Frost’s atomic design principles to deliver immediate value to design and engineering.
Rather than attempt to build full design system at once, we focused on creating a structured, reusable foundation that could deliver immediate value while supporting long-term scale.
We started with a full UI walkthrough of the product. Rather than rely on assumptions, we noted interface patterns across key screens and what components were currently used. This quickly revealed inconsistent button styles, form labels, and modal behaviors that had evolved without a shared structure, These inconsistencies made it difficult for users to predict system behavior and increased cognitive load for task completion.
Observed Validation Variatons
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.
Our system review made it clear there was plenty we could improve and knowing ClinicianConnect would eventually need a full design system we narrowed our focus strategically. We asked ourselves:
What’s causing the most friction right now?
What can we improve for immediate value?
The answers led us to create a flexible, Figma component library to:
Support current design and development needs
Reduce visual inconsistencies
Lay the groundwork for a future, full-scale design system
Competitive
Analysis
To validate our direction, we reviewed established systems like Material and IBM Carbon, not to replicate them, but to understand common structural foundations and documentation strategies that enable scale.
This reinforced that starting with a lean, well-organized UI library was a smart and realistic step for where ClinicianConnect was headed.
Material Design
What Works
Exceptional documentation
Beginner-friendly onboarding
Well-defined component anatomy
Where It Breaks Down
Can be overly prescriptive
Customization becomes harder without breaking key patterns
Design Takeaways
Applied Material’s structure and documentation approach while maintaining flexibility.
Carbon Design
What Works
Clear and minimal navigation
Documentation that supports scale
Defines accessibility user groups
Where It Breaks Down
Visual style can feel rigid
Extensive documentation can feel overwhelming at first
Design Takeaways
Start smaller to improve usability and maintainability, while building a flexible foundation for scale.
Comparative analysis informing our UI Kit direction.
Next, we cataloged dozens of live screens and tagged each reusable UI component. This audit gave us clear visibility into what actually existed within ClinicianConnect and resulted in a concrete component inventory.
With audit findings in hand, we began building in Figma following atomic design best practices. We prioritized: clarity, reusability, accessibility, real-time application. More importantly, our UI library was used as it was built, with new features using standardized components in real time, immediately reinforcing consistency.
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
Built on System Foundations
Input Fields
Input fields for text entry and validation.
Enabled
Text
Forgot Password?
Focused
|Text
Forgot Password?
Filled
●●●●●
Forgot Password?
Input stroke outlines and helper text colors are exaggerated for documentation clarity.
Buttons
Buttons across core flows (default and disabled states).
Primary
Secondary
Default
Button
Button
Disabled
Button
Button
Standardized components applied to authentication workflows. The login card sits on a semi-transparent surface to separate it from the background.
System in Context
The
Outcome
Created a foundational UI library that introduced structure to an otherwise fragmented interface, 30% faster task completion.
Rather than immediately refactoring production code, our work focused on aligning design and engineering around a shared component language and reusable patterns.
My teammates and I established a documented inventory that clarified what existed, what was duplicated, and what needed consolidation.
While we did not yet measure formal velocity metrics, teams reported:
Faster feature builds
Less back-and-forth between design and engineering
Reduced rework on UI refinements
Before wrapping up my contribution, I partnered with my team to define clear priorities for evolving our work towards a more scalable system, we decided upon the following:
Thank you for reading! Explore other work