Dwolla Design System
A comprehensive design system, starting from scratch, with global Figma components and extensive documentation.
Dwolla
Shipped August 2022
Our existing “design system” was a Figma file that never got updated. Most of our mockups consisted of screenshots pieced together, and random components created on the fly. As a result, our mockups differed in style and structure, leading to confusion among team members and stakeholders. We set out to establish a scalable design system, ensuring consistency and streamlined communication.
Who does this impact?
Design systems impact on the entire product development process, influencing design, engineering, and ultimately, the experience for users. By providing a comprehensive set of guidelines, standards, and reusable components, design systems streamline collaboration between designers and engineers.
Competitive analysis
By delving into the design systems of industry leaders, I was able to identify patterns and insights to incorporate into our own. I looked at individual elements, layouts, and documentation. I gathered screenshots and made a list of things to include in our design system.
Process
In order to create a shared understanding of how we would go about creating the design system, I created a process for the other designer and I to work in collaboration. This allowed us to work asynchronously and use daily stand-ups to coordinate which part of the design system we were going to work on.
Page Template
Since I was working with another designer on the same project, I wanted to make sure the design system had a consistent structure and layout. I created a template for each component page to follow. This allowed us to have consistency from the beginning and avoid having to do re-work at the end to fix up loose ends.
Documentation
The documentation was sectioned by usage, types, elements, anatomy, and edge cases. We also included links to the code documentation in Material UI.
Publishing to Figma
By publishing our design system to a Figma library, this allows each designer to access it from any file. No back and forth required to find what you’re looking for.
Adjusting Components
With the design system published in Figma, we can effortlessly adjust the components in our mockups on the fly. This means catering to the various states, styles, and elements. This newfound flexibility enables us to create cohesive and consistent user experiences across our mockups.
Results
The Dwolla Design system has helped us create rapid prototypes and cut down the time for front-end development changes in half. The next challenge becomes transferring the design system to Figma’s new variables feature…
More Case Studies
Data Driven Diagnosis: Designing a Clinical Decision Support System
A Better First Impression: Redesigning the Onboarding Flow
Product-led Feature Growth: Self-Service Feature Upgrade Experience