One of my first tasks upon getting hired at Canto was to revisit the design system.
Background
Prior to my arrival at Canto, the decision had been made that the MUI would be the framework used to redesign the experience of the core product line.
When I arrived, the UX team had already put together a Figma library to represent the MUI components to be used in the redesign. While this definitely got the team off to a good start for initial project ideation, it needed some additional work to allow both UX and Engineering to consider it the single source of truth for components.
In collaboration with the rest of the UX team, as well as Engineering, we set out to audit the design system, and then modify it to better work for all of us. Though I was the owner of this project, it was through everyone’s hard work that we were able to not only make these changes but also make sure we are thoughtful in how we expand the library going forward to continue to make it scalable, useful system for our organization.
Requirements
In order for this library to be scalable for design use and provide the right specs for engineering, it needed:
- A unified, consistent color palette and use of that color palette in all library components
- Proper use of frames and auto layout to produce more accurate designs and resulting specs
- Improved usage of components and variants to make it easier to quickly produce consistent designs and prototypes
- Standardized naming conventions to make it easier for UX and Engineering to find what they are looking for and ensure we are using language consistent with the MUI framework
Color Palette
Since our products allow for some branding customization for our customers, the primary and secondary colors could be changed by the user. In addition to the primary and secondary colors, we had to ensure the palette contained enough neutral and state colors to prevent the use of non-palette colors in the component library unless absolutely necessary. Finally, the naming of the colors had to make it easier for UX and Engineering to determine which theme colors they should map to, but also leave our teams the option to expand the palette in the future if necessary.
Icons
As part of the overall design system refresh, the icon library needed to be revisited as well. At the time, the icons used were a combination of icons from the legacy application, one-off custom icons, and various MUI Icons. There were also some components that, while previously classified as icons, were actually a better fit for other parts of the component library, such as the loading indicators and rating systems.
As part of the transition to MUI, the icons used in the software would need to be standardized and converted to Material Symbols. This would enable UX to produce more artifacts that were more visually consistent and Engineering to avoid the need to constantly add custom icons to the library unless it was determined to be absolutely necessary.
Inputs and Other Components
Once the color palette was standardized and approved by all necessary stakeholders, and the icon library was brought up to speed, it was time to revisit the structure and organization of individual library components.
First, the team performed an audit to find and fix any components that used colors that were not part of the approved palette and/or deviated from the approved icon library.
Next, the components themselves needed to be updated to properly take advantage of auto-layout to prevent having to manually spec out spacing and scaling behavior. Rectangles that were used solely as backgrounds were removed in favor of frames that properly used fills and strokes, as well as padding, to more accurately reflect how these components would exist in the code.
Finally, the components needed to be split up into variants and content slots that accommodate different possible states and structures for each. The variants had to be named and organized consistently, and content slots were to be used in places such as modals, to prevent the need to detach components in order to insert various content.
