UAL Design System

Project summary

The UX team avocated, created and tested UAL's first design system, which has been created with the sole purpose of unifying all of UAL's projects with the aim of bring mobile, accessibility and performance first priniciples to the forefront of every UAL product.

Methods

Co-creation, 1-2-1 interviews, Card sorting, Publication

Tools

Figma, HTML, CSS

Problem statement

UAL has a vast range of digital products operating on different backend systems and design is the key to unify everything. However, all the products follow different principles, patterns and have inconsistent identities.

Discover

Design systems kick off meeting

A kick of meeting with UX Designs, Developers, Content and Brand team members was organised by myself to provide an introduction to what, how and why a design system is needed. To discover the needs, wants and challenges from different points of views. This allow all of us to form a foundations on the atomic design methodologies, as we as, forming 3 key principles that we should follow. Mobile, accessibility and performance first principles.


Affinity map of themes

Theming our ideas based on the outcomes that came from the kick off meeting.

Define

Component Audit with Agency

Creating an audit of exiting and required components for the new UAL website. The audit was documented on Excel to show how much each component is used and where on the website they are located.

Develop

Sketching components

From the audit sketches of each component for three breakpoints, mobile, tablet and desktop.


Components and wireframes

The sketches components were placed into wireframes to get a view of how they would look, feel and work on a variety of templates.


Digitising components

Once the sketch components were approved we digitised each one to be added to our new design system. The digital components were created to be flexible to allow it to be used on a wide range of templates, screen sizes and situations.


Documentation

Documenting components, typography, atoms and more, to keep record on development and to allow for easy sharing

Deliver

Insitu design testing

During the development of the new website templates for the 1st, 2nd, 3rd and 4th level pages were mocked up. This allowed us to stress test the components.


Feedback and agile improvements

During the development of the design system we opened up the process so that stakeholders from different departments were able provide dynamic feedback vie Figma's commenting feature.


Guideline Documentation

To make sure that the design system would be utilised successfully and to continue growing a guideline document has been created. This documentation highlights the Do's and Don't, but also allowing user to have freedom to further develop the system for the organisation.

Publication

Figam x UAL: Publication

Figma worked alongside us to document our journey with creating UAL's first design system and how it was used to bring all 6 colleges closer together.

Read article

Next steps and Personal reflection

Next steps

We aiming to make our designs system public. First starting internally with UAL, allowing students to experiment with the system with design and code means. Then after, a full public release to set a standard for other universities to follow.


Personal Relection

It has been a pleasure to work on a design system that is still at it's beginning, but has a lot of protencial to be used across all of UAL's digital products. The process for creating the system with the agency, UAL stakeholders and the digital team has shown that co-creating is a methodology that should be used beyond this project.