VAGARO
Design System Documentation
Establishing a source of truth to enable continued growth and product consistency.
ROLE
Product Design Intern
TEAM
Cody Mak
TIMELINE
Jun 2024 - Jul 2024
OVERVIEW
Vagaro's current design process is inefficient and allows for inconsistencies within the product.
Allowing these problems to continue will breed consumer mistrust and prevent Vagaro from continuing to grow as a company.
Within the span of three months, we established a design system documentation to handle these issues of inefficiency and inconsistency within the Product team.
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.
OPTION 1: ADD A NEW PRODUCT DROPDOWN
Add a product dropdown under product type filter
Keeps the same flow that businesses are used to
Search might not be as noticeable - looks like another way to filter.
OPTION 2: ADVANCED FILTERS
Encourages businesses to search for specific products.
Open Advanced Filters to filter by brand, product type, and quantity.
If businesses are looking to filter, it might be confusing for them to have to click advanced filters.
OPTION 3: SEARCH AND FILTER SELECTION
Separates the flows of search and selection
Businesses can either choose to search or to filter
Clear and concise descriptions for either flow
Might be confusing to businesses used to the old purchase order flow
04 | INFORMATION ARCHITECTURE
We took what we thought worked for other companies and used that to structure our own documentation.
I created a more substantial user flow of the entire process to present to C-suite executives.
Although the stakeholders recognized the need to add a specific search, they still wanted to emphasize the use of the filters over the search. Additionally, they wanted to simplify the flow of adding products to the purchase order. Instead of having to filter again, users would just be able to search for specific products to add.
I took this feedback to iterate on my final prototype.
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.
"Most businesses aren't creating purchase orders by searching for specific products. They usually make it by purchasing low quantity products or by brand." — User A
ADDING "ANY QUANTITY OPTION"
Allows businesses to sort for any product regardless of the product’s quantity. Solves the having to select Quantity Less Than a Large Number problem.
ADD A PRODUCT
Allows businesses to combine purchase orders by adding additional items to one purchase order.
06 | IDEAL PROCESS
How will this documentation be used?
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.