Boosting Team Productivity with a
UI Framework
The Background
Health Recovery Solutions (HRS), a fast-paced telehealth startup, continually innovates to improve outpatient care. Their remote patient monitoring products—ClinicianConnect (web) and PatientConnect (mobile)—aims to help hospitals and hospices streamline provider workflows and enhance
patient engagement.
My Role
As part of a two-person design team, I cataloged ClinicianConnect’s UI components and built a Figma-based UI Kit, laying the foundation for workflow efficiency and future standardization.
The Problem
HRS’s rapid innovation keeps its telehealth products competitive, but without a structured design system, UI variations grew, engineers rebuilt components and designers redid work—slowing development and increasing maintenance costs.
Duration
2023-2024
The Output
To optimize workflows, the design team, embedded within HRS’s engineering team, launched a phased initiative to introduce a unified design system across products:
▶ Phase 1 (complete): Establishing a UI Kit for PatientConnect improved collaboration between design and engineering.
▶ Phase 2 (My Focus) – Building on this foundation, I contributed to the development of a foundational UI Kit for ClinicianConnect by documenting existing screens, identifying component variations, and creating reusable components to improve efficiency and consistency.
Defining the Problem Space
To kick off Phase 2, my teammate and I independently analyzed ClinicianConnect’s user flows and UI components, regrouping to compare findings. We uncovered wide component variations and a lack of documentation, making it difficult for designers and engineers to find and reuse elements. To address this, we focused on building a UI framework as a foundation for greater workflow consistency and efficiency.
Conducting a UI
Inventory and Audit
My teammate and I then cataloged screens and tagged components to understand the current UI, identifying significant variations in buttons, form fields, and modals. This process also improved design documentation and set the stage for better collaboration with engineering.
Following IA Guidelines
ClinicianConnect’s UI inventory revealed inconsistent button styles, redundant form fields, and varying modal behaviors, making it harder to maintain design uniformity and reuse components. To address this, we created a UI Kit with standardized components and clearer documentation, aligning it with PatientConnect’s framework for consistency.
Tackling Figma:
Building Small Components
Using insights from our UI audit, I built components from the atomic level and created created component sets for flexibility and reusability, while my teammate developed usage guidelines borrowing elements from PatientConnect for consistency.
More Building and
Scaling the UI Library
These components also became the basis for reusable templates, ensuring design consistency and faster iterations. This approach streamlined processes and made project files easier to inherit and scale. This standardization also reduced design variations, accelerated design-to-development time, and improved collaboration with engineering as requests
came in.
Challenges
As a small design team, balancing documentation with ongoing product work was challenging.
The lack of prior UI documentation meant identifying and cataloging component variations took significant time and effort. To stay efficient, we prioritized high-impact components first, ensuring the UI Kit addressed the most critical inconsistencies while remaining scalable.
Next Steps
To maintain the effectiveness of our design file, my teammate and I identified the following as critical focus areas:
Component Standardization – Auditing component usage to eliminate redundancies and establish a consistent UI language across ClinicianConnect.
Monitoring Usage: Implement strategies to track, assess, and refine the UI Pattern Library's usage, with ongoing feedback gathered for continuous improvement.
Promoting Internal Adoption: Developing initiatives to encourage widespread adoption of the design file and design system across the organization, particularly within product and engineering teams.