Phish Insight
Design System for SaaS product
Product Design | Trend Micro
Background & Goal
The previous UI was incoherent and appeared informal, which was unsuitable for business-class clients.
The goal was to build a unified design system that not only standardized components but also established a shared language for designers and developers, enabling scalability and efficiency.
The goal was to build a unified design system that not only standardized components but also established a shared language for designers and developers, enabling scalability and efficiency.
- 🖥️ Product type: Corporate cybersecurity LMS
- 🎨 Role: UI designer collaborating with 2 front-end developers.
- 🏢 Market: B2B security awareness & phishing training
Design Process
1. Define the Branding
To address fragmented perspectives, we organized a one-day design sprint workshop with key stakeholders. Prior communication was essential to set expectations, and during the session we leveraged research insights to frame discussions. The outcome was not only a concrete proposal, but also a shift in focus—stakeholders aligned on business vision and future priorities.
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.
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.
A library in Figma
Developers can access a Figma library for the product, improving efficiency and consistency.
Leanrings
A design system is not only a set of UI components, but also a catalyst for collaboration and trust. Running design sprints helped us align stakeholders and establish a clear product vision. I discovered that incremental adoption was key—showcasing small, tangible wins built confidence in the system, which then evolved into a reliable foundation for continuous product improvement.
