Domain
Design System
Time
2026
Role
Product Designer
My responsibility
-
Reviewed and evaluated the existing Fabric System.
-
Updated UX guidelines and component specifications where needed.
-
Prepared design handoff documentation and walkthroughs to support developer implementation.
Project Background
The Fabric System was initially designed by my fellow designer, Duy Hân (Harley). Building on his initial work, I focused on reviewing the existing system and updating UX guidelines and component specifications where needed.
Although the design team had already adopted Fabric System, the two development teams (OutSystems and High-Code) had not yet built their component libraries. I worked closely with both teams to hand off the designs, walk them through component specifications, and support implementation.
Another key focus was establishing consistent component behavior and usage guidelines for the QA/QC team, helping standardize testing and reduce repetitive testing efforts for reusable components.
My Process
1. Gather Team Feedback
Conducted an anonymous online survey to collect feedback from team members on their experiences using the existing design system across ongoing products.
2. Review and Improve
Reviewed the Fabric System based on the collected feedback, refined existing components, and updated usage guidelines and behavioral specifications for key reusable components.
3. Design Review Workshop
Organized a design review workshop halfway through the process to present major system-wide updates and my proposed approach to component improvements, gathering feedback and aligning with the team before proceeding.
4. Refine the Remaining Components
Continued reviewing and updating the remaining components based on the feedback and agreements from the design review.
5. Walkthrough and Handoff
Presented the completed Fabric System through a full walkthrough and handed it off to two development teams.
6. Implementation Support
Assisted the development and QA/QC teams throughout component implementation and testing.
Key Updates
1. Design Tokens
I proposed introducing design tokens to establish consistency, streamline future updates, and create a single source of truth across design and development.
During the Midpoint Design Review Workshop, I presented the proposed approach and token naming convention. The team agreed to adopt this approach moving forward.
2. Text Styles
The existing Fabric System had 3 text styles: Heading, Body, and Button. Since Body and Button shared the same font size and line height, differing only in font weight, and Button styles were also used in descriptive text, I consolidated both into a single Body style with two font-weight variations for each size.
This simplified the typography system, reduced redundancy, and preserved visual flexibility.
3. Corner Radius
I proposed removing the Sharp corner style (0px radius) across all components. Since this style was rarely used in existing product interfaces, retaining it added unnecessary complexity to the design system. Removing it helped simplify the available options and keep the system leaner and easier to maintain.
Colors & Text Styles
Colors
Text Styles
Main Components
1. Buttons
-
Expanded the Button component to support three styles (Filled, Outline, and Text Link) across five primary colors. Previously, it only supported Filled buttons in three colors and Outline buttons in the remaining two.
-
Updated Hover and Pressed states to use dedicated solid colors instead of grey overlays, ensuring more consistent and intentional visual feedback across button interactions.
UPDATED Component
2. Inputs
-
Included Text Inputs component and Text Area component.
-
Added usage guidelines and behavioral specifications for Text Input and Text Area components, covering default behaviors (e.g., trimming leading and trailing spaces, enforcing character limits) and input validation.
3. Dropdown
Basic Dropdown
-
Used for single selection.
-
Best suited for a small set of options that users can easily scan and recall.
Dropdown Search
-
Used for single selection.
-
Best suited for a large set of options where users need to search to quickly find and select an item.
Dropdown Tags
-
Used for multiple selections.
-
Best suited for selecting multiple options from a predefined list, with selected items displayed as tags for easy identification and removal.
Guideline
-
Added a guideline to limit the dropdown panel to 5 visible items, enabling vertical scrolling when more options are available.
-
Defined handling for long text and multiple tag selections to ensure the component maintains a consistent layout without breaking the UI.
4. Table
5. Alert / Prompt Message
Alert provides contextual feedback related to a user action and is displayed at the top of the page. Alerts can be dismissed by the user or automatically disappear after 5–8 seconds.
Prompt Message provides persistent notifications or guidance to users and is displayed at a fixed position on the page. They remain visible until they are explicitly removed by the system or are no longer relevant.
6. Tag / Badge / Status
-
Tags are used to label, categorize, or describe attributes of an item.
-
Badges are used to display numerical counts associated with an item.
-
Status Indicators are used to communicate the current state or progress of an item.
7. Screen Templates
Created ready-to-use page templates for common screens, including List, Create, Edit, and Details pages, allowing teams to quickly reuse and adapt layouts to meet each project's requirements.
8. Other components
