Design System to help Streamline Efficiency and Consistency
I spearheaded Vesta's first design system, leading a team of four designers from foundation to component library. I owned the components directly — building the reusable library that became the team's single source of truth — while aligning the group around a shared token architecture and consistent standards across the two products.
Company
Vesta - By Demes Group
Date
2021
Duration
6 year
Stage
Shipped
Role
Product designer
Team
4 Product designers, 4 Devs
Company overview
By Demes Group found itself at a pivotal moment of strategic decisions for Vesta – Security, a prominent brand within its portfolio specializing in Security solutions. The company was evolving its approach, shifting from being solely security-focused and cyber security to becoming a Home Automation products and platforms-oriented, introducing a new suite of enterprise products.
To facilitate this transition, I spearheaded the creation of the design system that became the singular source of truth for Vesta’s enterprise product design, while also ensuring effective alignment between the design and development teams. This system not only reflects Vesta – Security’s distinctive identity but also streamlines coherence and efficiency in the development process, solidifying the brand’s vision in every aspect of the user experience. This comprehensive approach significantly contributes to strengthening Vesta – Security’s presence in the home automation sector within the broader scope of By Demes Group.
How did we began?
We started with a design audit
At first, figuring out how to kickstart the design system was tough. Should we start by making the parts? No way, that wasn’t the smart move. Vesta already had about 2 products made by developers. They kind of worked, but they were all over the place; the look and parts weren’t the same. So, we began by checking out these products’ designs. We looked at what they did well and wrote down all the things users needed to get stuff done. Then, we figured out the basics of what a design system should include.
What does a ‘Minimum Usable’ design system look like?
Before diving in and starting to work on the details, we paused to figure out what the most basic version of the design system would be and how much time it would take to make it. We looked at the parts and patterns we saw again and again in our design review, and we decided it would take about 12 weeks to create a Minimum Usable Design System.
The process
Inspired by leading design systems from Atlassian and Salesforce, we proceeded to group the design system into three key categories: Foundation, Components and Patterns and we divided the work streams into three design sprints lasting 8 weeks.
Design principles
We established design principles to measure the quality and success of every visual and non visual elements that we design, we always referred to the design principles and any component or pattern that doesn’t uphold these principles is redesigned. The design principles we followed are Clarity, Consistency and Scalability.
Foundation
We defined the foundation as visual and non visual elements that provides a basis upon which components and patterns of the design system are designed. The foundation elements include design principles, colors, typography, grids, spacing and layout.
Components
We defined components as the simplest visual elements of the design system. They are the reusable building blocks that meets a specific interaction or UI need specifically designed to work together to create patterns and smooth user experiences.
Design Tokens
We also spearheaded the development of a comprehensive token architecture to enhance scalability, ensuring streamlined operations.
Results and learning
The design system made a big difference in how fast we could work. We could test ideas quicker and didn’t need as much time to make prototypes. Developing the design system taught us some valuable lessons about teamwork and responsibility. But we found it hard to expand the design system to other teams because of these reasons:
Aligning with the development team
Even though the development team joined the design systems project early on, staying in sync with development was tough. Development took longer than design, teaching us that we need to include development time in our work plans and sprints.
Measuring Business Impact
Measuring the business impact of the design system posed a challenge. We weren’t sure how much time we saved in design and development, or how much money we saved the company. The main lesson we learned from this project was the importance of setting clear goals from the start.