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.
Co-creation, 1-2-1 interviews, Card sorting, Publication
Figma, HTML, CSS
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.
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.
From the audit sketches of each component for three breakpoints, mobile, tablet and desktop.
The sketches components were placed into wireframes to get a view of how they would look, feel and work on a variety of templates.
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.
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.
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.
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.
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.
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.
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.