Building a consistent cross-platform experience
Butterfly Network: Design System
How might we…
enable a cohesive user experience across multiple platforms while helping developers and designers implement more efficiently?
About the Project
The original design system at Butterfly Network was heavily outdated and built only for mobile. Since then, we had added a new cloud product and other app experiences. With a new design system, we aimed to create consistency within existing products and enable future expansion. The design and engineering teams were spending too much time recreating components and compositions, searching for design elements in the existing design system, and trying to deduce usage rules. I led the design systems initiative with the goal of increased design consistency and standardization, less time lost recreating components, improved accessibility, and faster implementation.
Stakeholder Buy-in
As designers, we understand the value of good design systems. However, in order to allocate time and resources towards this project, we needed to explain these benefits to the rest of our peers. I presented the benefits to our broader team. Benefits highlighted were:
Improved speed to implementation
Easier onboarding for new hires
More seamless user experience
Faster site/app performance
Design System Architecture
I led design team workshops so we could:
Map out information architecture plans for the design systems files and pages in Figma
Ensure alignment on project goals and discuss the issues we’ve identified with the current systems
Result:
Design team deduced that our cloud design system was in the most dire condition. Lots of time was needed to recreate screen layouts or go into old files and find existing layouts. We also had a lot of missing components, icons, and existing components were not constructed in a scalable way. Since I was the primary designer for cloud, I felt comfortable starting there, which we could then pressure test with the rest of the team before investing time in mobile and education.
Plan of Action
-
Because of the time consuming nature of this project and the size of our internal team, we decided to partner with Atomic Health. I presented them with a project spec outlining our drivers, context, success metrics, requirements, and timeline. After our kickoff, I lead a weekly meeting with Atomic and the design team to check on progress and manage the timeline.
-
The first step of the project after the kickoff was to gather all existing components and compositions and organize them according to our information architecture map in Figma. This involved scrubbing 55 cloud Figma files. We started with cloud and repeated with mobile later.
-
The Butterfly design team worked with Atomic to conduct an audit of all components and compositions to address design inconsistencies we wanted corrected. We addressed over 100 Figma notes from Atomic asking for decisions on duplicate, outdated, inconsistent, or inaccessible component variations. We ensured that all components were built well and aligned with engineering needs.
Result
We successfully were able to update all our Figma design libraries, resulting in upwards of 30% quicker turnaround for design projects and improved user experience.
