SIA GIT Design System Revamp
Note: For best experience, please view using a desktop device.
Design System Revamp
User Research
Usability Testing
UI Patterns
The project was initiated to address the low adoption and limited buy-in of the SIA's GIT design system.
As the system was intended to serve as an overarching, organisation-wide design framework, achieving strong buy-in is essential for consistency, scalability, and efficiency across teams.
Discovery
User Interviews
Initially, I was tasked with cleaning up the GIT Design System.
However, through a series of design system catch-ups and user interviews aimed at understanding user behaviour, pain points, and adoption barriers, it became clear that the issue extended beyond maintenance.
After analysing the findings, I realised that the design system faced fundamental adoption challenges such as relevance and structural issues that prevented designers from using it as their primary system of choice.
PAIN POINTS from frequent users:
Components & Coverage
Missing or incomplete components (e.g., icons like “pin/unpin”, charts, tables).
Some components lack guidelines for when/how to use them (e.g., three style of text field with no clear guidelines on their usage.)
Missing dark mode components.
Documentation & Usability
Documentation/descriptions are lacking or unclear.
Need for “How-to” articles and contextual examples.
Confusing or outdated terminology within the system.
Consistency & Design Quality
Minor inconsistencies across design outputs.
System perceived as “boring or outdated” visually.
Typographic hierarchy needs refinement (too many headers, limited body styles).
Collaboration & Version Control
Cross-team alignment issues (rated lower “outside the team”).
Designers unaware or unconcerned with Design System updates.
No clear structure for maintaining synchronisation with evolving design files.
Developer Handover
Developers sometimes lack access to Figma or clear component mapping.
Some teams rely on external documentation (e.g., Storybook, ZeroHeight) but find it disconnected.
Conversion BarrierS from New users:
Relevance & Fit
Non-users feel their teams’ design systems suffice (custom or domain-specific DS).
Some teams operate under separate entities (IFE, Parcel) with unique design needs.
Accessibility & Awareness
Lack of clarity on how to integrate GIT Design System into their existing workflow.
Motivation & Value Perception
Don’t see compelling benefits or differentiation from legend design system (SAA Design System).
Might adopt if GIT Design System offers better documentation, drag-and-drop convenience, or cross-platform support.
DEFINING PROBLEM
During the catch-up interviews, it was identified that low adoption of the design system primarily stems from its limited relevance to users’ products.
The GIT Design System, originally envisioned as an overarching framework, remains young and less mature compared to its older, more established sibling — the SAA Design System, which continues to receive regular updates and expansions.
Despite this, GIT Design System remains highly relevant for SaaS and enterprise products which are not well supported by the older system.
To avoid duplicating efforts and to address a more pressing and impactful gap, I chose to focus on improving the experience for existing users and underserved product types, rather than trying to convert new users who are already well supported by the SAA Design System.
Design
Button Component
Chip Component
Improvements made to component library
Introduced Dark Mode — enabling flexible use across different environments and user preferences.
Added Missing States — ensuring comprehensive coverage for all interactive components.
Improved Component Organisation — clearer structure with labeled variants and states for easier navigation and reference.
Expanded Component Library — inclusion of previously missing components to support broader design needs.
Standardised State Layers and Behaviours — unified state colour tokens and interaction patterns for consistency and scalability of the system.
Variant Overview
Component Anatomy
Component Anatomy
Usage Reference
Improvements made to DOcumentation
Designer-Oriented Guidelines — focusing on the information that are more relevant to the designers such as padding, margin sizes, and component placement.
Added Component Usage References — allowing designers to copy and paste the widely used component layout and increasing their efficiency.
Impact and opportunities
A usability test was conducted to validate the effectiveness of the design system improvements and to identify remaining usability gaps.
Usability Test design
Ten designers participated in the study and were divided into two groups:
Group A: Used the existing design system first, followed by the revamped version.
Group B: Used the revamped design system first, then the existing one.
This counterbalanced setup was implemented to compensate for the small sample size and to minimise the effects of task familiarity. Usability and efficiency were assessed using the NASA-TLX, SUS (System Usability Scale), and time-on-task measurements.
The resulting data were then analysed using a two-way ANOVA, allowing the study to account for the potential effects of exposure order and isolate the true impact of the design improvements.
Impacts
31% reduction in mental demand — participants experienced 10% less cognitive load with the revamped design system.
80% reduction in emotional frustration — at second exposure, participants feel 40% less frustration when using the revamped design system.
15.5% increment in perceived usability — participants perceived the revamped design system as 10% more usable than the existing system.
27.2% increment in perceived usability of documentation — participants perceived the documentation in revamped design system as 16.3% more usable than the documentation in existing system.
17.3% increased efficiency — at first exposure, participants completed their task 2.6 minutes faster with the revamped design system.
68.8% error reduction — at first exposure, participants made 2.2 fewer errors with the revamped design system.
80% designer preference — 80% of the participants reported their preference for the revamped design system.
Opportunities
Streamline State Usage — participants tend to rely on default variants, suggesting an opportunity to simplify state management or enhance guidance on when to use specific states for greater design flexibility.
Improve Asset Panel Discoverability — participants noted that icons with similar names often make it difficult to locate core components such as buttons, toggles, and text fields. This presents an opportunity to organise and label assets more clearly, helping users find essential components quickly and efficiently.
Refine Naming For Colour And Text Tokens – participants highlighted that current token names are too generic and don’t convey intended usage. This presents an opportunity to adopt clearer, context-based naming conventions (e.g., “Primary Text,” “Error Background,” “Disabled State”) to help designers quickly identify and apply the correct styles with confidence.
