Design System
Mixlab's design system started out with just the bare bones, and little documentation. I was adamant about updating our existing design system so that we could optimize the digital experience and improve efficiency in our development process.
Goals
Reduce digital debt
As our company continued to scale, tech debt started to pile up as we were creating one-off components. Creating a design system would reduce these technical and UX debts.
Improve collaboration across teams
Aligning the Mixlab brand across all the digital platforms and working from a common design language will keep cross-functional teams aligned.
Increase design and engineering speed
Reducing engineering time and design time will help speed up the workflow and ship new features faster.
Process
Comparative research
I started by exploring other design systems such as Material design, Carbon, Salesforce etc. reading their documentation and understanding how they organized their component library.
Mixlab audit
By auditing the current design system and reviewing all the main screens across our digital platforms, I was able to call out areas of improvement such as discrepancies and components that we were using but not in the library.
For example, I found that there were 21 colors (48%) that were using but was not part of our library. My goal was to standardize these colors to reduce tech debt and drive consistency across our platforms.
Building out the library
Before working with the engineering team to build out the design system, I had to first set up elements in Figma.
This included foundational building blocks such as typography, colors, and spacing and components like buttons, form elements, and field inputs.
It was really important to set up the Figma component library right, so that we would be able to design quickly and efficiently using reusable elements.
A 12 column and 4x4 grid
A 12 column and 4x4 grid helps standardize each page and helps with responsive design to accommodate web, mobile and tablet.
Type and elements within components align to a 4dp grid, whereas all components align to a 8dp grid.
Typescale
I treated typestyles are component blocks, with built in top and bottom padding so that the baselines aligns to the 4pt grid.
I changed the type scale to 1.125, with a base value of 16 since we are a product site, and not a marketing site.
Color palette
Color accessibility was a huge factor in my decision to update the colors. Many colors we were using were not accessible, so I made sure that with th new palettes, they were at least AA if not AAA WCAG compliant.
I also renamed the colors and added a short description to help other designers understand when to use the color in application.
Components
Once the foundational elements were built, I was able to use them as a building block to build components such as buttons, field inputs, form elements, notifications, modal, tabs, choice card, tooltips, etc.
Results
Sped up design time
The design library dramatically decreased the time it took for me and our team of designers to work in Figma using the components that were already built.
Implemented in the new checkout experience for pet parents
Our first roll-out feature using the new design system was Client Checkout! You can read more about that project here.
