Team: The collective WorkWave UX Design team
Duration: About a year for Phase I
My Role: UX/UI Design, Research, Documentation
Tools: Figma, Zeroheight
PROJECT OVERVIEW
WorkWave is a software company that provides end-to-end SaaS solutions for service professionals to run and grow their businesses. Over the years, it acquired numerous companies that serve various industries and use different tech stacks.
A design system is required to create a consistent look for nine companies. Since there were not enough dev resources to build a design system from scratch, WorkWave chose to use MUI (Material) as a base and customize it from there.
The UX design team, myself included, customized the MUI design system to meet WorkWave's business goals and theme, creating the Tidal Design System.
We divided the work into task forces responsible for customizing components, submitting them to engineering, and documenting the implementation in Zeroheight.
THE PROBLEM
MUI is a massive library of generic UI components covering more style variations than any design system requires.
To tailor it to fit our needs, we had to address:
• Many unnecessary variants that clutter the library and lead to inconsistency
• Some design elements look outdated and do not fit our modernizing efforts
• Business-specific needs that the MUI library does not cover
• MUI technical restraints require workarounds and compromises
Many MUI components have too many options that muddle the library and create inconsistency
MY ROLE
I was instrumental in reaching our goal to complete Phase I by the end of Q4 2024 by taking on a large percentage of the components.
• I was involved in 25 task forces and led 12 of them
• I customized eight components more than by theme alone
• I created three components from scratch, including collaborating with the developers and documenting implementation and best practices
• I led the dark mode task force (Phase II)
• I researched UX best practices and guided the team in ways to improve
• I wrote custom documentation and created specific examples relevant to Tidal rather than relying on the MUI guidelines alone
ADAPTING TO FIT OUR NEEDS
Simpler components only needed a color change to match our Tidal color palette. Others I customized more to match the requirements we had for our use cases.
My process for customizing components:
• Conducted design audits across multiple companies to analyze component usage
• Researched industry standards and design principles to ensure adherence to best practices
• Collaborated with designers and facilitated team discussions to align on a cohesive design direction
• Met with engineers to gain a clear understanding of technical constraints and feasibility
• Documented implementation guidelines tailored specifically for Tidal to support seamless execution
Here is an assortment of components I led:
Text Field: MUI had three variations of text field, and the team voted to use the Outlined version for Tidal. I removed the unnecessary variations and adjusted the disabled and error states for better visibility and accessibility.
Popover: MUI does not have a popover, so I created one for Tidal. I wrote the documentation from researching other design system best practices.
Card: I created several templates as variables in the card component to give designers a starting point.
Chip: The filled chips in MUI were too bold and would compete with our buttons, so I created a new variant with a light background and removed the non-semantic filled versions. I added more boolean options based on our business needs and added a required icon to the semantic chips for better accessibility.
Tag: We needed a tag component, and MUI did not have one. I created a custom tag based on the chip but added a second shape and removed the extra boolean options we didn't want to include.
Environment (shadows, scrim): I made significant changes to MUI shadows because we felt MUI shadows were too extreme and outdated. I reduced the number from 24 to the seven most subtle shadows. I also changed the shadow and scrim colors from gray to blue to create visual consistency with the Tidal color palette.
ILLUSTRATIONS
I created a robust set of components designers can use to build custom illustrations for their different use cases. The base of the illustrations is the Humaaans library, and I added elements to make it more varied.
I designed a large set of compositions that can be used as-is or as a starting point. I thoroughly documented the rules for use and instructions for creating new illustrations if needed.
Many components can be combined together to create custom illustrations
I made each person and composition with interchangeable elements, so there is a nearly unlimited possibility of combinations. Any head or body part can be swapped to create a new person. Any person in a composition can be swapped with another.
I also created a specific color palette with hair and skin colors to provide additional variety. It was important to me to include DEI elements into the set.
I documented rules for how the illustrations are to be used and how to create new ones
DARK MODE
For Phase II of Tidal, I led the task force for Dark Mode. This included:
• Researching dark mode accessibility guidelines
• Comparing how other apps transitioned to dark mode
• Creating new background colors and testing different values and variations to find the best fit for our color palette
• Meeting with developers to understand the requirements and limitations
• Testing components with the new dark mode colors on each background to ensure the colors we picked worked in every scenario
• Creating a design file showing every color swap and adding the colors to a new mode in Figma variables
I tested components with different color values to find the best color swaps for dark mode
I created a master file that gives a visual representation of all the color swaps
FINAL THOUGHTS
Before this project, I had never worked on a design system. In this process, I not only learned how to create one, but I also learned design best practices, engineering requirements, working with variables in Figma, and advanced Figma component creation.