Design system

Our goal was to redesign the website to better communicate what we did as an organization while bringing more engagement with a fresh rebrand.

My role

To work closely with the design lead and create a design system that both reflects the brand while being accessible.

Key objectives

  • Identify what types of components are needed based on research and evidence.

  • Create a sketch file component library.

  • Style the components to reflect the brand and to follow AA guidelines.

  • Share proposition and gather feedback from the team.

What we did

With limited time to redesign the whole website from the ground up, we decided to use the GOV.UK design system. This design system had already been tested with thousands of users and therefore offloaded a lot of work. We no longer needed to test the UI for usability and focused on which components to best present our content. 

 

GOV.UK design system shared the code of all their components. This meant we were able to use them to create quick and fully functional prototypes to test with our users.

Testing

Early phase

When first testing the UI, we did not know what the brand was going to look like. Therefore, we decided to use black and white mock ups to prevent styles distracting the user from content and usability. The font of choice was Helvetica neue as it is a web standard. This meant the typography would be easily adjusted once provided.

Identifying components

We tested components to see which ones best supported the user to navigate and process information. For example, we wanted to find out if users found it helpful to have information filtered within an accordion. When the need was found, the component was selected to be in our component library.

Making it our own

Rebrand delay

Midway through the design phase, we have been told that the rebrand was delayed. This meant that the MVP had to launch with the Action on hearing loss branding. 

 

As opposed to the prototypes being done through code, the styling of our design system was done using Sketch as it was the most efficient tool for that purpose. 

 

The labeling of styles and nested symbols was a crucial part in making this process efficient.

Sketch

The component library was organised into four categories, styles, granular components, components and patterns. Styles included rules around typography, colours, images and spacing. Granular components included the smallest reusable parts that could not be broken any smaller. Components included the dos and don’ts of how to use the reusable parts of the user interface. Patterns were reusable templates that solved a variety of problems.

Applying styles

Using the Action on Hearing Loss styling raised an interesting question. How will we create an accessible website with an inaccessible brand? Most of the colors were lacking contrast. In order to overcome this, the priority wasn’t to choose colors based on hierarchy but to find combinations that had the most contrast. We used a color checker to ensure the contrast was at least AA compliant.

 

Another way to overcome this limitation was to rely on graphical elements. For example, we used underlines that would disappear upon hover in links and navigations.

The focus color from the GOV.UK design system was kept. Even though the color was not in our style guide, research shown that it had the most contrast between every color combination. It was therefore crucial to implement it as it would provide value for screen readers.

Getting feedback 

The component library was shared during a sprint review and was packaged up into Google slides. I presented the rationale behind each components and how our brand was applied to it.

 

Our sprint reviews typically include team members as well as stakeholders across the organization.

 

At the end of the presentation, team members could ask questions and provided their feedback. People could also leave comment at a later time.

 

Further iterations were then presented in our post stand up reviews which was an optional 15 minutes meeting at the end of our daily stand ups.

 

We primarily had positive feedback from using the GOV.UK design system. The main disappointment was that the old brand had to be applied to it due to the delay.

 

As opinion on colors is subjective, we only proposed a single option to showcase how colors can be applied. The feedback we asked was around accessibility and ease of use.

Final Rebrand

A few month later, the rebrand was finally provided by the agency and signed off by our organization. This meant we could finally apply the RNID style to our website.

 

The color combinations were more accessible. This gave us more variety on how we could apply the brand.

 

Primary, secondary and tertiary colors could be applied with logical hierarchy and still be accessible.

 

The process to apply the new brand was the same as the prior. We have used a color contrast checker to select color combinations and applied the brand to our existing component library. We lastly updated the google slides to get feedback from the team based on accessibility. With this process followed, the website rebrand was successful.