Cancer Research UK
Creating a design system that provides flexibility for content editors
Role
Senior UX/UI Designer
Design team
5 designers
Time
3 months
Company
Cancer Research UK
Problem
Cancer Research UK (CRUK) faced significant challenges with their website design and user experience, primarily driven by inconsistent design, and rigid content components in the existing CMS.
They were looking to implement an updated brand while ensuring compliance with accessibility standards.
The combination of these challenges complicated the delivery of a cohesive and inclusive user experience for their website visitors and content editors.
Solution
Create a comprehensive design system that aligned with CRUK's new brand guidelines. The primary focus was to create a Donate thin slice, which would serve as the foundation for expanding accessibility-compliant design site-wide.
My role
As the senior UX/UI designer, my role in the project was to lead the design system build for CRUK's website based on the new brand guidelines and create an accessible Donate thin slice.
Research & discovery
I started by conducting research to understand CRUK's brand guidelines and target audience's needs. Additionally, I delved into WCAG accessibility standards to identify best practices for an inclusive design.
Donate slice audit
To fully understand the scale of work ahead, I performed a full component audit for the Donate section to pinpoint what components need building for this thin slice.
Atomic design methodology
Working closely with the content modelling team, I prioritised the required components for Donate Thin slice.
I followed atomic design methodology to separate components into atoms, molecules and organisms to streamline design processes.
Defining core theme
Starting with the core theme, I defined colours, grids, spacings and text styles. Unfortunately, the core brand colour (magenta) was not passing the AA contrast ratio, scoring at number.
To ensure the new website is accessible, I created an alternative shade of magenta that scored at 4.53. I used it for the atoms, buttons and links.
Design system development
I continued with atoms and molecules and gradually progressed to organisms. With each atom, molecule and organism created, I ensured it worked for all breakpoints and allowed maximum flexibility.
Prototyping and testing with content editors
After I designed the top-priority components, I started testing and validating them with the content editors.
We worked collaboratively in Figma, creating mockup pages and proof-testing components.
Iteration and refinement
Following these initial stages, I made adjustments to the components and re-tested them. After they got approved by the content editors, I handed them over to the production team.
What's next?
With a design process established, I believe the design system I started in 2023 will evolve and expand beyond the Donate Thin slice.
