Opportunity

When I first joined Varo, engineers and designers were using Material Design for Android & Web apps and Human Interface Guidelines for iOS.

The most common feedback I received from the engineers was that design deliverables were inconsistent.

Outcome

Created and managed a design library in Figma that hosted styles, components, and patterns for iOS, Android, and web apps.

Refined styles by implementing design tokens and leveraged Storybook for improved efficiency.

Hosted a bi-weekly forum with engineering partners to educate, receive feedback, and collaborate on all things design systems related.

Impact

Repeatable process for adding or managing foundational styles through the use of tokens significantly decreased unused and inconsistent styles.

Designing extensive components made it seamless to apply updates based on the product roadmap. Over 180 components with 23K inserts in Figma.

The design systems team was included in the product development process as stakeholders at project kick-offs.

Takeaways

Creating style guides and component libraries are just the tip of the iceberg when it comes to design systems. Ensuring that the system is understood and adopted at the individual level all the way to executive leadership is vital.

A design system team is a service team with its main goal to support its end users; designers and engineers. Open channels for feedback and explorations will help the system grow.