Design system created and maintained for SaaS Web Products for high consistency and best practices
01 - Resources & Guidelines
There are critical elements in the process of building the design system for the organization: Material UI and the Organization Branding.
· Material UI have an exhaust list of elements, including their variants, combinations, behaviors and the best part: the ready-to-use codes.
· Organization Branding is how you can turn the elements in Material UI into the one with your organization’s own voice, whether is soft or strong, cool or passionate, professional or personal. You can create your own tone and deliver a unique message through style, font and color.
02 - System Structure
There is a pyramid structure in SaaS Product Design System:
Foundation - Establishing the brand image & Making products accessible.
SaaS Functional Requirement - As a design system for SaaS product, it is complicated with overlay of multiple layers.
UI Elements - As the final elements for product UI , they should be responsive, with build-in interactions and having all the variants for different states.
Layout Templates - It serves as a guideline about how UI elements come together to form a larger component, a modal or a page.
04 - Application in Design
It is important to follow a procedure to apply design system, otherwise the design work might get lost or overwritten. It is also important to collect feedbacks from designers to improve or fix any compatible or responsive issues. Most importantly, design system is a living system which needs to interact with the real application cases and evolve constantly to fit the organization’s needs.
05 - Implementation
Design system is not only serving the designers, but also could be developed into SDK for easier engineer implementation in the long run. How to deliver a living design system to engineer, review and approve the implementation is important. Chromatic and Storybook are tools used to review the style, behavior of Design System. Versioning control in design system is important to track the changes.
06 - Design System Preview
Reflections
- The real work starts when the Design System is in use: You might think building the design system is already the heavy lifting. However, maintaining the improving the design system is even more challenging.
First of all, design system will not function without specific use cases. It is difficult to imagine how many variance you need to create for a component, how to define various sizes, which components needs to be compatible with each other in style and size. All the requests come from the specific use cases.
Secondly, you will not identify problems until your system is in use. Will my component work well in the responsive design? Is my system flexible enough that users can easily overwrite properties without breaking the component? How is the interaction behavior? All the answers can be found from users' feedbacks. - Find the right workflow for your team will set the foundation for success. Designers are eager to edit the design system to increase the work efficiency. However it is important to have a dedicated team/personnel on the design system and be the gate keeper. For me the workflow has been constantly evolving: from individual requests sent through chat to dedicated work sessions. Now with the evolving of design tools, Figma branch is a fine solution. Designers will be given the edit access to the branch file, so they can do the changes at the very moment when the issues are discovered. As the gate keeper, I will set up a schedule to review the edits, merge the changes, and publish the system.
- There is no universal best practices, but you can have the best workflow for your team: The discussion about best practices in Design system never stops. Some people advocate for a minimum system while others feels an exhaust one works better. Some people loves grayscale design system while others insist the color theme should be embedded in component level. The key is to know the different approaches and options out there, evaluate and explore the best ones work for you and your team, set up the best Design System for your needs.
- Always test the changes if you are not sure: Even the design system already changes designer's life tremendously, it is not a perfect ecosystem yet. I believe some designers encounter the moment that all the overwrites in their local file have been wiped out due to system updates. I have been exploring the logic behind, but still not sure if I understand it 100%. So it is always worth the time to create a separate testing file to test the changes and how it will impact the local application.
