top of page
CPF design system (WIP)
Who I work with
PM, content strategist , product owner, developer, vendors
Project length
4 / 2020 - 10 / 2020 (6 months)
Impact
About
Initiate to build a design library for a government website.
It will help control the product consistency and predictability. Save design and engineering time to work.
My role
Content planner, UX and UI designer
Goal
Design CPF internal system with consistent styles, themes, components and patterns. Help the designer and developer work efficiently for the product using the system.
Problem
1
We created the design system after the first version of the prototype. Now the component is messy with many variations.
2
The system should apply to different users: designers, developers, and content strategists and it should fit their needs.
3
The way to use components is described in difficult to understand texts.
Solution
Clean up the component by defining the basic wireframe
We cleaned up the component by redefining their grandfather wireframe of the component. Make sure the components all follow this definition to design. For example, create the definition of the card component and then design the component.
A page has clear sections for different users satisfying their needs.
Introduction: for general users to understand this system
Options: introduce each component
Code: Developers get the code here
Categorise the index for different topics, letting users easily check according to their needs.
Infographic to show examples helps users engage.
Outcome
We created the design system in a structure that can easily be used by designers, developers, and content strategists. The component structure uses atomic design, and this structure got positive feedback from the usability tests with over dozens of each user type.
For
Developer
Molecules
For UX
writer
About
Design priciple
For
Designer
Guides
Component
Foundation
Atons
Organism
Downloads
Contribute
About
Introduce who uses this system and how to use.
Guide
Introduce our design principle and the guidance for each role.
Component
Elements divided by atomic design.
Downloads
Open source content for designer and developer to download, like logo, typography library, color library.
Contribute
When someone submit the new component, upload their design file and form here.
Typography
Take typography and color for example. We tried to use infographics and do / don't examples to introduce our definition.
The CPF Design System uses Montserrat as its main typeface. Montserrat is an open-source font provided by Google.
Accessibility for typography: We adopt WCAG 2.0 Level AA requirements, we define the typography in line spacing, paragraph space, and width. Line height is font size * 1.5 and use at least 16 px and 45-75 characters per line is acceptable for web. Also, choose a typography that emphasises clarity and legibility.
Color
Grid
Results and next step
Color
For the usage, the color is defined by primary, secondary tertiary color. For the color scale, it is defined by the light and dark color. We use the example to show how to use the color.
Accessibility for color: Apply WCAG 2.0. Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text. Don’t use color alone to convey meaning. Use icons, written content, and other visual elements to reinforce clear communication of the content to be used by all roles.
For accessibility, do and don't examples can clearly show how to use the component with color.
Challenge
Design systems need to be satisfied for different perspectives of users. It is important to create a sense of alignment, understanding and shared ownership for designers, developers, product managers, and stakeholders.
Next step for accessibility test
-
Check color contrast: Check the difference in light between the font and its background.
-
Voice over tests the web accessibility for visually impaired people or normal people who like to 'listen' to the article.
-
Use accessibility online tools such as axe, lighthouse to help check the site.
Lessons learned
This project let me acquire lots of basic knowledge to create a digital product while we are designing the content of the design system. Not only did I know more about how to use each component but also I learned to understand more about foundational knowledge like color, typography, and grid. Moat importantly, I learned more about the accessibility for each element and component and this will help our product be more accessible to everyone.
bottom of page