Design System for SaaS product
Product Design | Trend Micro
Overview
While redesigning the product, we created a design system and revamped the entire UI.
My role
🎨 UI designer collaborating with 2 front-end developers.
Product Users
IT or Infosec professionals in corporations with over 500 employees globally.
Problem
The previous UI was incoherent and appeared informal, which was unsuitable for business-class clients.
Design Process
1. Define the Branding
We held a design sprint, but changes in business scope made the outcome outdated. We gathered stakeholders to understand these changes and conducted research to create a new proposal.
2. Propose the style
We proposed two styles, ensuring color contrast for accessibility:
- The energy high contrast one
- A calmer extension of the previous style
Stakeholders voted for the second option, preserving the legacy while providing direction for brand guidelines, fonts, colors, and media.
3. Select UI framework
Worked with front-end developers to pick the most suitable solution. We have to evaluate the style of components and overall feels.
Considering the culture and flexibility, Material UI which based on google material design is our best choice. Most of our client located in western culture country. They might get more easily to get used to Material UI's visual style and feels.
Considering the culture and flexibility, Material UI which based on google material design is our best choice. Most of our client located in western culture country. They might get more easily to get used to Material UI's visual style and feels.
4. Design components
- Research the framework and find the common rules for components and try to apply the brand style on it.
- Disassemble these component into different status and noted on the sheets.
- Write the instruction and description for the components
5. Deliver to Developers
Classifying the components into different pages. Then updated the sheets to Zeplin, created a tag to distinguish from other mockups. And also shared links to the developers to represent our results.
Outcome
1. A style sheet for common components
We created a basic style sheet accessible to all dev team members, enhancing efficiency by allowing developers to build concepts with existing components.
2. A library in Figma
Developers can access a Figma library for the product, improving efficiency and consistency.
Leanrings
The design system should be maintained and updated. Based on the new trending, as a product designer, we also need to create and experiment the new way of component.
