I was brought into the Brand and Creative Services team at University of the Arts London to renovate the design system for their main website. An earlier UI Kit had been created based on agency concepts, however, over time this had strayed from what was live on the site had discrepancies and components had been misappropriated due to a lack of written documentation.

The aim of revisiting the system was to update the components to what was capable in figma today, fixing issues that had been raised with the live site and refine the foundations so that the design system could push the visual logic of the brand, documenting a single source of truth which takes in both the design rationale and accessibility.

The implementation of atomic design principles was key to breaking down the structure of larger components and enabled the system to allow UI designers to design quickly on the atomic level while simultaneously enabling other stakeholder groups to quickly assemble a new layout using existing organisms from the library. 

The atomic system also allows changes to flow up the chain should branding changes be made at a later date.

Updating the entire design system is a gargantuan task, so I prioritised work using analytics to select the page and templates with the most visitors over the last year. This was added into our overall UI/UX Roadmap, to factor in support from other designers and teams, giving flexibility to bring forward elements to align with other stakeholder goals. 

While still working in fortnightly sprints, I chose to work on projects in a Kanban format, assigning each template (and later, component categories) as Epics in Jira, with page designs and components being Stories assigned to the Epic. This allowed us to handle design tasks that were large enough to run across sprints and not bog the team down creating a Jira ticket for granular design tasks on each component. 

In kickoff workshops with other designers, we identified the components that needed updating for each template, reviewing the different implementations on the site. The selected components were set up as stories within the epic for each page template in Jira. These went in the project backlog until they were selected in sprint planning.

The discovery process began with a review of the existing site and the previous design files to work out where the two differed. The research process also involved seeing how assets were being used by the design team - almost all components were being detached and manually altered, making component design a key priority to centrally manage the design system in practice.

Academics have a predisposition to choose longer words than your typical designer might. This was something that hadn’t been fully factored when the original oversized headings were designed, resulting in broken words or disjointed titles. There were some cases that had been identified of this, so stress testing was conducted to ensure the new typography styles fixed the majority of issues, without diluting the brand style too much..
Research gathered from the user survey identified that the spacing on the website was an issue, so I implemented a new scale for spacing, eliminating the XL size to reduce blank screen space, reducing scroll time and making content more cohesive.

A stronger logic for colour uses allowed me to reduce the page themes from three to two, reducing the variants each component required. Colours were organised based on their function on the site, with a dark theme for university wide pages which was reversed for colleges. I also identified the shades in the palette that were used globally for the same function to avoid duplication in the themes.

I was the main UI designer working on this project, but I certainly couldn’t have done this alone!
I worked with another UI designer whose main role was working on another UAL product, but his experience of working within the ecosystem was invaluable. I worked alongside the Head of Creative to QA component designs and refine the project roadmap to make sure it ran on track. As the system matured I also onboarded new designers when they started working with it.
The project also involved close work with the developers to ensure the work was handed over in the most efficient way for them and with content design to bring their expertise into stakeholder requirements for content across the site.