Intro
Butterfly Network is transforming patient assessment and streamlining the diagnostic process through handheld point-of-care ultrasound technology. While the company highly values quality design, their lack of a unified design system and component library led to increased load on designers, longer design timelines and inconsistencies across Butterfly’s product ecosystem.
Project Meta
Role
Agency: Atomic Health
Sr. UX Designer, Design Ops Lead
Timeline
September 2021 – March 2022
Contributors
Project Lead: Liz Hixon
Project Manager: Erin Ziebart
Product Designer, Design Ops: Liz Hixon
Additional: Victoria Macia
Contribution
I created an extensive and scalable component library from Butterfly’s range of digital products, guided decision-making for duplicate components, implemented component usage documentation and led discussions about design system governance. In addition to standard library styles and components such as colors, effects, icons, buttons, forms, tags and more, this far-reaching undertaking also captured custom elements specific to Butterfly’s technology, unlocking their capacity to scale and design on greatly shortened timelines.
Background
While Atomic Health had partnered with Butterfly on multiple product features, we found the lack of a component library quite taxing. It took time to locate elements in existing designs and determine whether new components were needed. We also discovered inconsistencies across the product: search designs, tags, forms fields, icons, button sizes and font weights varied across product applications.
Our team (especially me) was thrilled when Butterfly gave us the challenge of unifying the product through the creation of a single source of truth design library. This would not only ensure a consistent product experience, but also enable faster design and development processes.
Process
Taking Inventory
Beginning with the Butterfly enterprise platform, our team conducted a full scale audit and “scrubbed” all styles and components found in the products. We made a spreadsheet of every Butterfly Figma file as well as each page contained in those files.
Figma inventory spreadsheet. We used this spreadsheet to catalog Butterfly’s design projects and files and to track the scrubbing process of components into the design inventory file.
Component Scrubbing
Marking our progress in the spreadsheet along the way, we slowly went through each Figma file, copying every last element – typography, colors, shadows, icons, buttons, tables, cards, forms, etc. – and pasting them into an organized inventory file. Styles got pasted to one page; illustrations, icons and photos to another; buttons on another; form elements on another… Elements in this inventory file were arranged in columns by source project and file, enabling us to reference the context in which the component was found if necessary.
Layout of design inventory file. Every single component found across all of Butterfly’s Figma files and live products was documented, creating a comprehensive inventory from which we built out the Figma design library and compared duplicate components for review and governance.
Populating a Library
Going column by column in the inventory file, I added each element to a new design library. As we came across duplicate components with varying styles, we documented these variations to discuss for governance.
An example of duplicate components: both round and square tags were being used interchangeably across Butterfly’s products. We documented and presented the various use cases, enabling the Butterfly team to decide to eliminate round tags.
A sample of styles and components in the new Butterfly design library
Testing
After the first few months of progress on the design library, we published a Beta version for the design team to begin using in their work. Not only did this enable them to move faster right away, it also opened up communication between us and the people actively using the library. They were able to provide feedback about how they were using the components, what worked well and what could be improved. Based on their contributions, we made library updates to further streamline Butterfly’s design process.
Outcomes
Overview
Butterfly’s design leadership expressed immense gratitude for the extensive thought and care put into this project. They acknowledged how much the library’s implementation enabled their teams to design faster, develop faster and ensure consistency, both visually and interactively, across all of their digital platforms.
Additional
If you would like a deeper look at this project, please reach out to me directly via liz@redairplane.design.