Establish a design system to ensure consistency in design across the team
B2C • Responsive Web
Overview
The GLOCAL is aiming to create a new dashboard to engage youth with local initiative and learn more public civic knowledge. I take the responsible to build the design system to maintain the consistency and improve the design productivity across the team.
Role — UX/UI Designer
Deliverables — Design Guidelines, Design System, Figma Tokens, Components, Documentation
Tool — Figma
The Challenge
One significant challenge in the current project is the lack of a solid design system, no consistency and coherence in user interface elements across the whole project.
• Onboarding new designers is challenging without a solid design system in place.
• Maintaining consistency becomes difficult in the absence of guidelines and component sets.
• Implementing changes across the entire project is challenging due to the lack of defined local variables.
The Why
A design system can not only ensure consistency across the platform but also streamline the development process, enhance efficiency when making changes to entire projects, and facilitate collaboration among team members.
• Ensure design consistency across all the team
• Apply changes to reusable components to streamline the design process
• Enable scalability across platforms and devices
• Enhance communication with the development team
Design System
This project lacks a clear overview, so I’ve initiated the process of gathering essential information to establish a comprehensive overview and definitive design direction. This initiative aims to provide clarity and guidance for the design team, ensuring a cohesive and informed approach to the project.
Find out the Objectives and Value
Meeting with the team to define the objectives and values to help the design team understand why and what we are designing.
Design Guidelines
Provide clear instructions, standards, and examples for each component to establish clear guidelines, streamlining communication among teams.
Define the Colour
GLOCAL logo associates with purple and It exhibits authority and credibility, while its blend of blue and red symbolizes balance and unity, appealing to a non-partisan ethos. Therefore we choose purple as the primary colour.
Use the low saturation colour scheme to provide a youth and professional feel.
Adding colour guidelines could also help designer understand when and how to use those colours.
Examples
Lorem ipsum dolor sit amet consectetur. Turpis gravida non sit nisi vitae aliquet facilisis sed cursus. Auctor pulvinar orci sed.
◯ Do
WCAG AAA: Pass
Check the contrast ratio and ensure that it meets a minimum of 4.5:1.
Lorem ipsum dolor sit amet consectetur. Turpis gravida non sit nisi vitae aliquet facilisis sed cursus.
Ratio 2.22:1
× Don’t
WCAG AA: Fail
When using a font size less than 19px, ensure that the contrast ratio is at least 4.5:1.
Typography
Choose Poppins as our primary fonts because our target users are youth so we want to choose a font that fun and playful. It also easy to read and has a large font family to ensure the flexibility in design and enhance the visual hierarchy.
Added more body variations to help create information hierarchy. Also, added a clear guideline to explain how to use them.
Examples
Lorem ipsum dolor sit amet consectetur. Turpis gravida non sit nisi vitae aliquet facilisis sed cursus. Auctor pulvinar orci sed.
◯ Do
For bodies of text, the line length should fall between 40–60 characters.
Lorem ipsum dolor sit amet consectetur.
× Don’t
For shorter lines of text, aim for a length between 20–40 characters.
Spacing and Layout
Use the 8px rule define the spacing to ensure the consistency and coherence in the layout. Ultimately, the 8px rule promotes better readability, usability, and overall user experience within the interface.
Radius and Elevation
Defining the radius and elevation parameters for creating a consistent visual hierarchy and depth within the interface elements, particularly for the numerous cards present in the current project. By establishing these specifications, designers can ensure that cards maintain a cohesive appearance while providing users with clear cues for interaction and hierarchy within the content.
Design Token
Design tokens in the system simplify design management by organizing key elements like colours and spacing into reusable components, ensuring consistency across different parts of the interface. Therefore, I used design token to implement elements in the Figma to ensure the consistency among the whole project.
Components
Utilized the Atomic Design methodology to construct components and develop the design system, breaking down interface elements into reusable building blocks like atoms, molecules, and organisms to ensure consistency and scalability across the project.
Conclusion
The design system make a significant improve the consistency and efficiency in our design process. With the clear guideline and reusable components, empowers the team to deliver cohesive designs.