top of page
laptop.png

CPF design library

My role 

Content planner, UX and UI designer

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. 

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.

OVERVIEW

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

SOLUTION

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.

Card.jpg
Default.png

Infographic to show examples helps users engage.

3.png

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. 

OUTCOME

About

Guides

Design principle

For Designer

For Developer

For UX writer

Component

Foundation

Atons

Molecules

Organism

Downloads

Contribute

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.

DLS_Typography_Intro.jpg

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.

DLS_color_option.jpg

For accessibility, do and don't examples can clearly show how to use the component with color.

DLS_color_introduction.jpg

Accessibility

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.

CHALLENGE

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