The UX and Development teams avocated, created and published UAL's first design system, which has been created with the sole purpose of unifying all of UAL's digital products with one design language with the aim of bring mobile, accessibility and performance first priniciples to the forefront of every UAL product.
Facilitation, card sorting, publication, documentation, UX research, A/B testing, Google Design Sprint, Double Diamond and Service Design
Figma, HTML, CSS, JavaScript, React, Storybook, Google Optimise, Google Analytics, Visual Code, Hotjar
UAL has a vast range of digital products operating on different backend systems and using different design languages. It is important to unify everything. HMW unify all of UAL's digital products to bring consistancy with Brand, Code, Design and Accessibility?
A kick of meeting with UX Design, Developer, 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 allowed all of us to form the foundations on atomic design principles, as well as, forming 3 unique key principles for UAL to follow. Mobile, accessibility and performance.
This map shows the product and services that will be affected by the design system. Moreover, the stakeholders who are involved directly or indirectly with the project.
During this event the Development manager and I came up with a plan of how our teams could work together to create the platform that I spoke about during the Figma event.
Design systems are great for connecting Designers and Developers together. However, for a design system to continue existing beyond it's deployment everyone needs to be involved, meaning Content designs, general staff members contributing to it's development. Therefore, a service blueprint workshop was organised to discover how different team members get involved during the development of the design system.
Since the website has been developed from the ground up it provided a great opportunity to evaluate our users through user personas. This gave us some insights on who our main user types were for the website and who should attend the focus groups.
Competitor analysis on other Universities and popular websites gathered from user insights helped to discover trends and new website standards that could be used for the design system. GOV.UK provided a lot of resources and advice for producing AA accessible pattern library for digital services.
Creating an audit of existing and required components for the new UAL website. The audit was documented on Excel. During this process all 4 teams (Brand, Content, Development and UX) deciding on a unified naming for each component.
It was important to have an understanding of each components usage metrics to provide the team direction of what components should be kept, improved or discontinued to streamline the pattern library. This also provided insights on what components should be priorities for MVP 1.
Workshops and focus group sessions with stakeholders and users provide insights on their experiences with a product such as arts.ac.uk. How they interact with it from the frontend and backend, but also how the product reflects UAL. All feedback was gathered to be used later in the projects development.
Influenced by Brad Frost's atomic design the Development Manager and I (UX Designer) decided on adopting a design system structure, but making it more straight forward. This will help to expand across other UAL product and services.
Looking beyond the core product (arts.ac.uk) and envisioning how to expand the design system to other UAL products and services such as, Portfolio, Canvas, Not Just a Shop and more. A structure of dependencies was created to show what components will be shared globally or unique to a product or service.
The team implemented an agile development cycle which focused on 5 points of contact, Accessibility, Brand, Content, User Experience (UX) and Web development. Each team will develop and analyse each component to pass or fail with provided comments on how it can pass. This approach allowed the team to keep a high standard, but also allowing space to adjust focus.
From the audit sketches of each component for three breakpoints, mobile, tablet and desktop.
The sketched 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.
It is important to keep everyone up-to-date with development and to create a open environment to freely share ideas and concerns. Furthermore, helping to ease the sense of unknown during any project.
The first set of guerrilla testing on some of the new components within a basic template took place to gain easier feedback from users on performance. Some components put on test were card, navigation, banner and masonry gallery.
Feedback from the guerrilla testing was recorded to analyse the pros amd cons for each component. Furthermore, highlighting areas for futher development.
The co-creation aspect of the project is highly important and Figma's dynamic commenting feature provided a space for all stakeholders to discuss among themselves and provide next steps.
All comments were documented in a shared document to show what will be implemented in phase 1 and phase 2 of development.
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.
Storybook is the coded version of the pattern library which has been created with React. The library reflects the Figma pattern library, but included interactions documentated from Figma, which includes hover states, animations, transtitions, keyboard highlights and accessibility.
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.
The new website was released on July 5th and has received positive reviews from students, academics and staff members. The new website is a platform to inform, educate, entertain and celebrate UAL as a leader in the Art and Design industry.
By using Hotjar and Google Analytics we were able to see users' interactions with the components and how it affected their journey throughout the website. Observation periods are continuously done in a 2 or 4 week period depending on the type of data to gather.
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.
I did a talk at a Figma event about 'scaling design' and how UAL planned to do it was a platform that allows everyone to collaborate
This talk revolved around my theory of including culture in a design system to create a 'Design Ecosystem', to allow for design to scale beyond designers and developers.
To gain more adoption of the platform we thought it would be a good opportunity to included the design system platform as a lesson to provide guidance on how to utilise the platform the projects other teams. This decision helped to give the platform a place to be shown and also allowed UAL staff to collaborate on the future develops of the platform.
The UAL design system has been launched on Figma's community platform.
The design system has continued to grow and improve since it's first release in 2018. This has allowed for the design, UX, brand, identity, code and accessibility of the design system to evolve alongside new and old UAL products and services
Due to the Coronavirus the University's graduate show was transformed into a digital showcase. The development of the design system allowed for the University and IBM to develop a product on a new platform within a 2 month time frame. The outcome has shown the power of a centralised design system that can expand across a whole organisation.
The design system is continuously been developed to keep up with accessibility, design/identity, UX practices and code development. Therefore, expanding to other products and services to test out the new design system.
We continue to advocate our designs system thoughout the University and to the public. Allowing students to experiment with the system with design and code for open source methods
It has been a pleasure to work on a design system that is still being developed, which has a lot of protencial to be used across all of UAL's digital products and services. The process for creating the design language with an agency, UAL stakeholders and the digital team has shown that co-creating is a methodology that should be used beyond this project.
The design system continues to be expanded on and even pushing the term 'Design Ecosystem', which includes the usage of education to embed the design system throughout the University for everyone to use and adapt at will.