Sovos - Enterprise Design System
Mosaic Design System
Untangling an existing design system and giving a functional revamp to provide an accessible, dynamic, and easy to access repository of components and foundations.
The design system at Sovos is used across multiple lines of businesses and products that solve different compliance challenges. The component library is used by developers across the world to solve challenges unique to their projects and users.
Project Goals
Design System Usage and Implementation
The existing design system was built on Material-UI and solved the initial needs of the small design team. However as our team and challenges grew, designers and developers began to misuse components and the underlining Material-UI theme.
This misuse created a divide in between the Triple D’s (not diners, drive-ins, and dives) design, development, and documentation. The result: a theme that restricted designers and developers from accomplishing their goals easily. We needed to untangle our code and theming and realign back to Material-UI to unrestrict our designers and developers.
Documentation
The documentation for the existing design system was spread across multiple sites and tools making it difficult for stakeholders to find the single source of truth.
As we did the redesign, we also assessed how we could better encapsulate the entirety of the design system in one easy to locate repository so that designers, developers and anyone else could easily find what they were looking for.
Styling and Accessibility Concerns
At the start of the project, the existing design system was 3 years old, a century in design time. It was time for a modern face lift for our design system, although we work in tax compliance, that doesn’t mean our users shouldn’t be treated to gorgeous interfaces.
When our design system was first created, the design system team was flying by the seat of their pants. Unfortunately, this meant that accessibility fell to the wayside. Alongside the visual redesign was the opportunity to address and mediate accessibility concerns that have been identified over time.
The Process
Inspiration and Vision Concepts
I started with looking for design inspiration. Picking and plucking pieces of artboards that looked directionally correct and then dissecting them. I asked myself questions like: What about the color palette works her, what about the typography, does it all convey a unified brand?
From there I began concept work. Each week I focused on a new area of exploration. One week I focused on typography, one week around spacing, another on color, etc. I iterated based on feedback from on design reviews and continued pushing the concepts forward.
Realigning to Material-UI
Working closely with the design system development team, we went through the Material-UI theme line by line, dissecting what each usage tokens was. This included color tokens, typography tokens, opacity tokens, etc. Some of the misused tokens we had already understood, some I researched alongside the developers to understand their proper usage.
Once we had a clear understanding of what tokens existed, I worked with the design system developers to go through every component and implement the correct usage of the tokens. We then released a version of S1UI that included the right tokens so that when the redesign release happens, the tokens would align correctly, making the update as seamless as possible.
Laying the Groundwork
Using the iterative concept work I had done, I could start to identify the “large brush strokes” that we could use as foundations that we wanted to adopt into Mosaic. By laying out the groundwork in terms of typography, color and spacing, we would remove a lot of the decision making in the next step.
But that meant we had to get it right. This included researching design system best practices when it came to foundations such as grids, typography, accessibility, etc.
Redesigning the Component Library
A watch out on this project was the potential for scope creep. Like any designer, I let my imagination run wide with potential new features and styles. Our development teams were going to have enough work already to get their code up to date to adopt the new Mosaic design system. Breaking components and adding new components in this release would only cause more headache and issues.
With that in mind, it was time to actually begin rehauling our components one by one from a design standpoint. Using the foundations and principles we already decided upon, we could quickly update the styling and create Mosaic components. I also made sure to address the components that we had flagged for accessibility concerns we had identified earlier.
Each component required rethemeing, speccing and then writing stories for the design system developers to work on. Over the quarter I sat in on their groomings helping to identify which stories should be pulled in first as there is an “order of operations” that made sense to follow.
Final Deliverables
01
Design System Usage and Implementation
The Mosaic Design System was now successfully realigned with Material-UI which unblocked and detangled the use of theming. Along the way, we also developed a deep understanding of the theme and each of the tokens and their usages that we can leverage for future components and themes.
02
Documentation
This is currently a work in progress where we are transferring our documentation and live code examples to ZeroHeight as a single source of truth for the design system.
03
Styling and Accessibility Concerns
When the Mosaic Design System is released for our product teams, components will have improved accessibility with the knowledge that there is still work to be done in this space.
For our designers, I created a brand new Figma design system library from scratch that they could easily consume in their design process. As an added feature, components were also built with interaction built in meaning that micro interactions such as hover states, active states, etc. don’t require whole new pages for usability testing.