CPF design system (WIP)
Who I work with
PM, content strategist , product owner, developer, vendors
4 / 2020 - 10 / 2020 (6 months)
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.
Content planner, UX and UI designer
Design CPF internal system with consistent styles, themes, components and patterns. Help the designer and developer work efficiently for the product using the system.
We created the design system after the first version of the prototype. Now the component is messy with many variations.
The system should apply to different users: designers, developers, and content strategists and it should fit their needs.
The way to use components is described in difficult to understand texts.
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.
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.
Introduce who uses this system and how to use.
Introduce our design principle and the guidance for each role.
Elements divided by atomic design.
Open source content for designer and developer to download, like logo, typography library, color library.
When someone submit the new component, upload their design file and form here.
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.
Results and next step
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.
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.