UAL Website Redesign

Project summary

A digital transformation project to migrate and update the 3 year old website from scratch by using, mobile, accessibility and performance first methodologies.

Methods

Focus groups, Facilitation,Card sorting, Guerrilla testing, Lab testing, Data analyse, Documentation

Tools

Figma, Google analytics, Hotjar


Problem statement

With a strong increase in mobile user activity and the large amount of contact published on UAL's website the old platform wasn't able to cope with the increasing amount of activity.

HMW create a mobile, accessibility and performance first product, that puts our core users first and provide ease for content creation for our content creators?

Discovery

User Personas Evaluation

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.


Kick-off meeting: UAL Digital and Agency

A kick off meeting with UAL's Digital team and the hired agency (Squiz) to ideate and formulise a road map on developing the back-end and front-end of the website. The session consisted of competitor analysis, Information Architecture, Component requirements and taxonomy.


Focus sessions: Students

From the user persona evaluation we organised a focus session with a group of students from a variety of backgrounds to give us a diverse perspective on the wants, needs, likes and dislikes from the current website and for the new website.


Focus sessions: Academics and UAL Staff

After the focus session with the student two more focuses with academics and UAL staff members provided a different point of view on how the website could serve the needs for these two different user types.


User Requirements and Component audit

Once all of the focus group sessions were completed we gather, analysed the insights to be used for forming the information architecture and to communicate with higher level stakeholders to gain their support.


Design system: Kick off meeting

This workshop was organised and facilitated by myself to bring together UX Designs, Developers and Brand togther to establish UAL first design system, which can be utilised to other digital products beyond the new UAL website design. Since Brand has guidelines for print and identity for UAL it was fairly easy to bring everyone onboard for developing the digital aspect of the system.

Define

Information Architecture

This workshop was organised and facilitated by myself to bring together UX Designs, Developers and Brand togther to establish UAL first design system, which can be utilised to other digital products beyond the new UAL website design. Since Brand has guidelines for print and identity for UAL it was fairly easy to bring everyone onboard for developing the digital aspect of the system.


Wireframes

Wireframe matching the information architecture helps to create a visual representation of each page type and also similate how a user could travel through multiple journeys.


Stakeholder Meeting

With the wireframes and information architecture the UX team decided on organise a mid-phase meeting with various stakeholders to share the progress and collect fresh insights. Some stakeholders had concerns over the new course focus IA and wanted some clarification that the change would be positive. Therefore, we promised to conduct gurrilla testing to validate the change.


Guerrilla Testing 1

The first guerrilla testing took place to test the new IA sructure, navigation, page structures and component types.


Feedback Documentation and Next Steps

Feedback from the stakeholder meeting was documented and shared with the wide team to provide insights from one of our user types. From the feedback we could plan our next steps, one being guerrilla testing to validate our new IA.

Develop

Component Development Audit

Based on the feedback from the first stakeholder meeting and guerrilla testing the UX team and Developer team could proceed with further development for the components. This stage allowed the developers to start coding the components and creating the base foundations such as, grids, typography and brand within one GIT repository.


Design system creation

It was important to establish a design system that can set a standard for all UAL digital products. Emphasising the importance of mobile, accessibility and performance first values. Therefore, we built the UAL design system from the ground up with atomic design methodologies.

Design system project


Website Template Designs

Creating high-fi templates for level 1, 2, 3 ,4, landing pages, as well as specialty pages such as, profiles, courses pages and more. These templates were connected together to create an interactive prototype.


Guerrilla Testing 2: Beta Release

Guerrilla testing was held to gain feedback from various user types such as, prospective students, current students and staff members. The tests were done to validate the change in the AI made sense, the new navigation component was useful, responsive design and components.

Deliver

Lab testing: Released website

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.


"Wow this is amazing!"

- Current student


Figma Talk: Scaling Design

I had an opportunity to share my experiences about scaling design through co-creation at a Figma event in London 2018. My thoughts on the importance of transparency and collaboration is important for pushing eduction and the industry forward. It has become common place for people and companies to be secretive about their practices, but openess within and outside of a company will provide positivity in the long term.


Figma publication

Due to the Digital team's usage of Figma, we were able to document our experiences with the tools and how it helped us develop our wireframes, prototypes, communicate with stakeholders and specifications for developers.

Read Article

Analysis

Lab testing - Post release

On the day of release the UX team facilited a lab testing session with students and staff members. The feedback was positively received and feedback on further improvements was documented for the BAU phase of the project.


Google Analytics and Hotjar

With Google Analytics and Hotjar the traffic has remained stable, which is very good when a new CMS and IA has been introduced to an existing product.

Next steps and Personal reflection

Next steps

The UX team plans to continue improving the experience by intrating the last two systems (Elements and Akari) to fully complete the transfer to the new CMS platform. BAU tasks will start to fine tune certain parts of the websites. Furthermore, we aim to continue encouraging stakeholders from different departments to be involved with each stages of the future development for this product and other products that are part of the Digital team's portfolio.


Personal Relection

It has been a great pleasure to work on a project that will be used my many types of users. The learnings for with making the new website has helped on how to pursue other projects and to get other stakeholders involved during the process. The Vice Chancellor and University board members has praised how well the website works on mobile and has solved the problems that existed with the previous website. I will continue to work closely with my team to fine tune the experience for existing and future users.