Led Vagaro's First Design System Documentation & Governance Model
Without addressing the inconsistencies in their products, it will lead to customer mistrust and product development stagnation.
Role
Product Design Intern -> Product Designer, Design Systems
Team & Stakeholders
C-Suite Executives, Senior Product Designers, Head of Development
Timeline
Jan 2025 - Mar 2025
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.
Team Organization Initiative
Vagaro is transitioning to a mid-sized company, where their biggest product priority is creating a well established design system
Internal and External Pain Points
Inconsistencies lead to customer mistrust.
Inefficiency leads to stagnant growth in development
Pain Point #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.
Paint Point #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.
Paint Point #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 Designs
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 & Reflections
We still don't have 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, and 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.
I am the NDA guardian for this project.
If you wish to learn more, please contact me
p.s- he's a quick responder :)
Let's Soar Together.
Currently based in San Francisco, CA. I'm always down to grab coffee and talk about Ariana Grande or the latest pop culture news. Come reach out to me through email or LinkedIn 🐻
Fun Fact: As confirmed by Spotify, I'm Ariana Grande's Top 0.0001% fan in the world