Design System

I incepted and launched Firefly, Equip’s first design system. It encompasses design guidelines and components for both patient-facing and internal experiences. Since its creation, designers, engineers, and users have provided positive feedback—notably referring to the significant reduction in time and effort as well as its visual elegance.

During my time at Equip, I faced the challenge of creating a patient-centric experience without a pre-existing design system to rely on.

Leveraging my background in design systems, including my role in crafting Kiva's design system, I charted a clear course. I began by establishing a foundation of colors, typography, basic components, and guidelines, guided by our brand identity, best practices, and the pursuit of a more elegant patient-facing experience.

To ensure clarity for engineers, project managers, and fellow designers, I eschewed metaphorical names and focused on practical organization. Collaborating with the patient app's lead engineer, we partially aligned with the existing component structure used in engineering, even if it meant compromising certain aspects, like the color structure.

The structure of the design system was straightforward: starting with essentials such as colors, typography, and breakpoints, we then delved into granular components like buttons, icons, and form fields. These components were grouped logically, ultimately forming cohesive features.

The Firefly Design System garnered praise from engineering, design, and product teams. Its positive impact was evident as our app debuted, streamlining feature development, maintaining clean code through componentization, and accelerating design workflows. This system's cohesiveness also enhanced user recognition and usability.

In the end, the Firefly Design System not only saved time and resources for the Eng, Product, and Design teams but also elevated usability and added a touch of visual elegance to Equip's patient-centric experience.