2023-2024
My Role
UX/UI Designer
Scope
Focused on auditing inconsistent UI patterns and building foundational components and responsive patterns to support a scalable system.
Team Allison Spillane (UI Designer), Sara Sailors (Engineering Lead)
Year 2023-2024
Duration One Year
ClinicianConnect is a web-based telehealth platform developed at Health Recovery Solutions (HRS), supporting care teams in managing complex patient data. I worked on features used to triage cases, monitor vitals, and manage care workflows.
As the product scaled, features were shipped rapidly without a shared design system, leading to inconsistent UI patterns and duplicated components. For users managing high-stakes data, this fragmentation made workflows harder to navigate, increased the risk of error, and added rework for design and engineering teams.
Patterns fragmented as the product scaled without a shared system.
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.
ClinicianConnect had widespread variation across UI patterns and interactions. Rather than building a full design system, I worked with the team to scope the work to what would create immediate impact, the answers led us to define a flexible, Figma-based UI Library grounded in four principles:
Prevent new UI variations across clinician workflows.
Reduce Variations
Designed to be lightweight and easy
to maintain .
Support a Small Team
Designed to scale across
clinician workflows
Build for Scale
Reduced rework with a shared starting point for design and engineering.
Increase Efficiency
Competitive
Analysis
While a mobile system existed, there was no shared system for the web platform, so I looked at established systems like Material and IBM Carbon to understand how mature systems structure components, documentation, and scalability. Rather than replicating them, we focused on identifying patterns that could introduce structure without over-engineering at our stage.
Comparative analysis informed a lightweight, scalable structure for the initial UI library.
Next, working with the team, I audited dozens of live screens, tagging UI components to create a clear inventory of patterns across the product.
With the audit complete and findings in hand, I began building the Figma-based UI Kit using atomic design principles, starting small and prioritizing clarity, reusability, and accessibility so components could be integrated immediately as new workflows were introduced. This established consistent patterns that scaled across workflows and reduced redundant implementations.
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
The library made UI behavior predictable across workflows and gave design and engineering a shared starting point. Instead of recreating components feature by feature, the team could build on a consistent foundation, reducing rework and speeding up iteration.
~30%
Faster design-to-development time
Cleaner handoffs, reduced rework, faster decisions.
(Estimated from reduced design iteration cycles)
BEFORE
Fragmented component patterns
Inconsistent borders and spacing
No shared validation pattern
Different interaction patterns for
similar inputs
AFTER
Introduced a shared component system across clinician workflows.
INPUT FIELDS
40+
reusable components reduced variation across workflows
Consistent states across form components
Clear focus and validation feedback
Predictable dropdown interactions
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: