VAGARO
Design System Documentation
Establishing a source of truth to enable continued growth and product consistency.
00 | FINAL PRODUCT
Zeroheight Documentation
01 | PROBLEM
The current way Vagaro designs and implements features leads to inconsistency and inefficiency.
Being new to the company allowed us to have fresh eyes on the design process at Vagaro. In the first weeks we were at Vagaro, we quickly realized that the product suffered from minor UI bugs and inconsistent use of components throughout.
02 | USER RESEARCH
Other designers were feeling similar frustrations.
Interviewing the designers within the Product team who were more familiar with the design system as well as other designers who weren't familiar showed us that we weren't the only ones with these concerns.
03 | COMPETITIVE ANALYSIS
Vagaro can't keep thinking like a startup - we have to think bigger.
We aren't the first ones trying to solve this problem. Other companies have already done the work to ensure that their design process is consistent and efficient. We just needed to see how they did it.
04 | INFORMATION ARCHITECTURE
We took what we thought worked for other companies and used that to structure our own documentation.
We conducted a SWOT analysis of popular design systems to identify how we wanted to structure our own documentation.
05 | WORKSHOPS
Designers weren't fully on the same page when it came to when and where to use certain components.
To establish that we were holding the Product team's best interests at heart, we hosted weekly workshops to discuss the purpose and usage of components and other foundational elements. Through these workshops, we came to a consensus on how components should be used.
This helped us come up with detailed Dos and Don'ts and Best Practices for the components.
06 | IDEAL PROCESS
How will this documentation be used?
This documentation serves as a tool throughout the entire design process. Different groups of people can find different ways of utilizing the documentation that best suits their needs.
07 | NEXT STEPS
The work that we did only serves as the foundation for a system that will continue to grow.
One of the measures by which we can determine if our documentation has really succeeded is if the system will continue to expand in the future. A design system is only useful if it can serve the designers and developers that are using it.
As such, the design system will only continue to grow as we add and change components and establish better communication with developers and key stakeholders.
Our next steps include getting more dev input to see how we can make this documentation a useful tool for them. With that comes also implementing Storybook integration. Additionally, coming up with guidelines and ways to drive adoption and keep scaling the design system to accommodate for more users.