Design system
Project Name:
Argon design system and theming
Problem Statement:
The existing design system required improvements to ensure consistency, scalability, and adaptability for different brands through a white-label approach. The goal was to create a system that streamlined UI components, maintained brand identity across multiple products, and improved design-to-development efficiency.
Client/Company:
Navico Group
Research Process:
Usability Issues Identified:
Incorrect naming conventions.
Duplicate and missing colors.
Components breaking when themed across day, dusk, and night modes.
Missing elements such as pagination dots, scroll wheel pickers, icons, and typography sizes.
Challenges in White-Label Adaptation:
Base design was used as a foundation, with differences in corner radiuses and brand colors.
Time-consuming maintenance and theming across brands.
Primary Pain Points for Designers & Developers:
Inconsistencies in naming conventions between Figma and code.
Unclear color usage guidelines.
Lack of generic components.
Audit Insights:
Previous design system had duplicate colors, missing elements, and inconsistent documentation.
The new system addressed these gaps, making it more complete and usable.
Placeholder: UX Audit & Research Findings
Screenshots or summaries highlighting inconsistencies and problem areas.
Core problem statement:
The design system lacked consistency, scalability, and efficiency, leading to redundant design efforts, inconsistencies across products, and difficulties in development integration
Prioritization approach:
Tasks were assigned across multiple designers, each responsible for theming a specific brand’s day, dusk, and night modes.
Branching workflows were used for systematic updates, reviewed by the UI Director and design system specialists.
Component Library & System Updates:
Defining Core Components:
Developed a comprehensive set of buttons, form fields, typography styles, and color palettes.
Ensured color variations worked seamlessly across day, dusk, and night modes.
Guiding Principles:
Scalability and readability were prioritized.
Ideation and solution exploration:
Number of Versions: Many iterations across different designers, with ongoing refinements.
Developer Collaboration:
Addressed developer unfamiliarity with components through individual meetings with scrum teams.
Provided ongoing support and clarifications.
Documentation & Consistency:
Centralized Figma project area with files accessible by designers and developers.
Updates communicated through Teams channels.
Placeholder: Component Iterations & UI Guidelines
Export Recommendation: Side-by-side comparisons of old vs. new components, Figma documentation screenshots, and UI token breakdowns.
Testing and validation:Feedback Integration:
Developers and designers provided ongoing feedback directly within Figma files.
New components were assessed for system-wide applicability before being added.
Accessibility Considerations:
Ensured compliance with contrast regulations.
Placeholder: Design System Documentation Screenshots
Screenshots of documentation, UI kit overview, and example brand themes.
Final system overview:
Improvements Over Previous Version:
More consistent, complete, and user-friendly.
Designers found it easier to use.
Key Impactful Changes:
Comprehensive component library.
Streamlined naming conventions.
Enhanced usability and scalability.
Placeholder: Final Design System Showcase
Export Recommendation: High-quality images of UI components, theme variations for different brands, and sample implementation in real products.
Performance and efficiency gains:
Designers:
Reduced duplication of effort across time zones.
Streamlined workflow, preventing inconsistencies across apps.
Developers:
SDK updates now automatically integrate Figma library changes.
Measurable Improvements:
General team satisfaction and increased efficiency.
Stakeholder & Team Response:
Some developers are still adapting to the value of using SDK components.
Overall consensus: the design system is useful and impactful.
Learnings & Reflections - Successes:
Improved documentation.
Smoother developer handoff.
Enhanced scalability and consistency.
What I Would Do Differently:
Stronger accessibility focus.
Earlier involvement of all designers before finalizing components.
Growth as a Designer:
Gained expertise in optimizing design systems for usability and efficiency.
Developed skills in Figma variables, toggles, dropdowns, and dynamic theming.
Found personal enjoyment in maintaining design systems alongside complex projects.
Interested in working together? Get in touch!
Aska Lai
-
UX/UI Product designer
aska.j.lai@hotmail.com
Proficiencies
-
Figma
Figjam
Miro
Jira
Confluence
Photoshop
[Currently learning] Blender
Selected Works
