Vagaro does not have a single source of truth
Vagaro has goals to expand on a lot in the beauty and wellness industry, but they aren’t addressing inconsistencies in their products.
I created Vagaro's First Design System Documentation
To give some context, Vagaro is a business enterprise tool in the beauty and wellness industry.
Vagaro has goals to expand on a lot, but they aren’t addressing inconsistencies in their products.As a result, these inconsistencies lead to customer mistrust.
When we spend a lot of time to address them, it leads to stagnant growth within the product development
Timeline:
June 2024 - August 2024
Role:
Product Design Intern
Skills
Design System, Component Library, Cross Functional Communication
Overview:
In the span of 9 weeks, I hosted workshops, user surveys & interviews, created Best Practices and Do's & Dont's , and most personally, initialized Vagaro's Trust & Safety Initiatives spearheading accessibilit and inclusive best practices to the Product team.
Documentation of all components on Zeroheight
Zeroheight hosts all possible components for both designers and developers to reference.
Education and Maintenance
It's important to scale the documentation to scale with the growing design system.
Internal and External Pain points
Inconsistencies lead to Customer mistrust.
Inefficiency leads to stagnant growth in development
PAINPOINT #1
68% of Demo Bugs are UI Related
To give some context, our developers worked overseas, and its hard to communicate accurate design ideas with them.
PAINPOINT #2
100% of Designers felt the design system is hard to contribute.
Both developers and designers struggled to maintain the system for pre-existing and future updates.
PAINPOINT #3
5/5 Designers felt the design system is ambiguous
Component usages overlap where it becomes ambiguous and confusing for designers to choose components in their workflow.
Expanding impacts beyond the documentation
How will new designers and developers use the documentation?
Add, Search, and Use Components
New designers and developers can get started right away
As Vagaro is expanding the product team, the documentation can guide them to familiarize themselves with anything to help them in their workspaces such as adding design kits, or other hands-on design best practices.
Design contributions
What if current designers need a new component that is not accounted in the design system?
Through working with the Senior Design System Manager, the documentation gives a step-by-step instruction on how to propose a new component that can be added to the system. This includes collaboration with other designers to audit, explore, and document the new component changes or additions to the team.
Advocating for diversity and inclusion in the beauty space
I also educated the design team on inclusive best practices moving forward.
Did you know that LGBTQ+ Friendly was a part of "amenities"? I designed an inclusion filter to include business attribute labels to help empower small businesses.
Solving Ambiguities and Miscommunications
How will current designers navigate through ambiguity?
Discussed overlapping component functions with all senior designers
I hosted lengthy workshops to facilitate clear component definitions, best practices, and do's and don'ts for our system.
For example, what is the difference between pill selections and segments? Senior designers struggled to distinguish components based on overlapping definitions, resulting in inconsistencies on many pages.
Categorizing components by their use cases
How do we further create a hierarchy that will consolidate the components?
I collaborated with other designers to see how the documentation wiki-page can be searchable by others. This helped break down overlapping definitions and functions.
FINAL
Within the span of the internship, this is what I created.
Our team decided to host our documentation on Zeroheight, a platform having both Figma and Storybook integrations for designers and developers to reference.
Documentation of all components on Zeroheight
Zeroheight hosts all possible components for both designers and developers to reference.
Education and Maintenance
It's important to scale the documentation to scale with the growing design system.
NEXT STEPS
We still don't have the dev's input
This project introduced me to the importance of cross-functionality. There was no single source of truth for parties which was the primary problem of the project. I learned that it’s important to consider all perspectives (how people work, define, communicate) and address those things in the documentation.
While challenging, it taught me to go beyond my duties like leading the Accessibility and Inclusion best practices to starting my own Trust & Safety initiative at Vagaro. To my wonderful team, this project is truly one that helped me grow, thank you.
.gif)