UAL Graduate Showcase

University of the Arts London

Improving how students upload and showcase their graduate works online and enhancing the browsing experience for public users

MY ROLE

UX Design

TIMELINE

5 months

Slide 16_9 - 3.png

Problem Statement

Due to pandemic, students can’t set up their physical exhibition to showcase their graduate work. They lost opportunities to connect with potential employers. Therefore, the UAL Graduate Showcase website was designed and launched in summer 2020. After doing user testings with students and target public users, we understood more about the problems of our system and website. 

Before I started brainstorming ideas on how to improve the experience, I worked with UX researcher to do some user testing with students and public users. These are some headline findings from public users regarding the website experience. Although they like the overall look and feel, we still find out there are some navigation problems. And they said the interface is too complicated to follow. 

“You have to do quite a lot of clicking”

“This doesn’t have any fluidity”

“I didn’t see the icon, it just looks like it is a part of the design”

“Inspire me and View all work are the same - to inspire”

“Collections feels unfinished, there’s nothing to differentiate them”

“I don’t know which keyword to use...I need a narrower experience”

Old_Showcasedesign.png
Old_Showcasedesign_mobile.png
Main issue:
Interface is too complicated

 

There were usability problems on multiple parts of the Cover and View work interface, with even more problems on mobile.

Project Goals

After understanding the user needs, I did a problem framing and brainstorming workshop with the project team. 

 

We used the Agile design process, I started with setting about the project scope and dividing them into different sprints. Improving the Upload System and Student Project Page are the most important goal that we would like to achieve. In Sprint 1 - 2, I designed the user flow, wireframes and prototype for the Student-Project Page. We also set up user testing with students to test this new experience. The aim of the user testing is to explore users impressions of the prototype, how they think it compares to the current version, any problems encountered, opportunities for improvement.

Design, Develop, Test

Based on the findings and confirmed MVP. I planned the product design in 3 stages.

 

1. Designing a scrolling experience on Student Project page

 

This is a new experience on our live site. On the Student-Project page, we created a single page scrolling experience to see the student work. We also designed a sticky menu and a student name card on the left-hand side so users can always see the student name and their contact when they are looking at the student works. The menu can help users to navigate easily from "Summary" to "Final work" to their "Research and process". At the end of the page, users can also use the share function to share works easily. And we show the themes and tags to encourage users to explore more.

Student Project page example: https://graduateshowcase.arts.ac.uk/projects/216670/cover

2. Designing a step by step experience to help students upload works

 

How can we build an effective and user-friendly upload system for students and decrease the complaints? We improved the upload experience by using a scrolling page design with a sticky menu on the left-hand side. The aim is to create a more straightforward experience on filling in content and uploading items. They can follow the menu steps to complete their upload and preview their project page easily.

3. Improving the overall experience on the Home page, Event page, Collection page, College page and Course page

 

Starting from Sprint 4, we designed a road map in order to make sure everyone on the same page and know what’s going on. From Sprint 4 - 10. I used the same workflow to redesign the experience. I designed the Home, College, Course, Award, Collection, Event and Search Results. How to encourage users to scroll and explore the content on the Home page? How to make the booking and filtering experience better on the Event page? I designed a scrolling page experience for all these pages, with some usages on the Masonry layout and lightbox experience. Although we didn’t have enough time and resources to develop and launch all the new design, but we still have a significant improvement after launching the new Upload System and Student-Project page.

User Flows

Some examples:

userflow2.png
userflow.png

Wireframes

Some examples:

Frame 570.png
Frame 571.png
Frame 701.png
Desktop - Wireframe - template - option B.png
Desktop - Wireframe - Upload Concept - option B.png
Desktop - Wireframe - Event Listing Page - Live Events.png
Video Lightbox - Future Event.png
Video Lighbox - Event Listing Page - RECORDED.png

UI Design

Some examples:

Event component.png
Add item.png
Header title.png
event details lightbox - upcoming event.png
filter.png

Moving Forward

There is still a lot more we could do to improve the overall experience for students and the public. What if users can bookmark student works? Can they contact the student and do the hiring process here with the integration on ArtsTemp? How could we improve the buying item experience with Notjustashop? What if we use data analysis to provide recommendations to users? etc. There are some questions I would love to explore further. 

Product Achievements

Seamless experience

No complicated interface and experience, students only need to use one scrolling page to complete uploading and showcasing works

Saved resources

QA Man-hour can be saved on checking and approving student works

Reducing complaints

65% decrease of the complaints on uploading student works

Improve public experience

Public users can find student works in an easier way. They can also book events and buy works in a consistent way.

Challenge & Learning

I was glad to work on the Graduate Showcase project for UAL. As a UAL Alumni and a UX Designer, it is always a fabulous experience improving the user experience for our students and collaborating with the great designers, developers, content team and project team. Learning from research and data is the key to do a better UX design. Challenges will happen if we don't set up clear handover and documentation. I also learned to communicate and do better workshops with the team. This is a team effort to make the new Showcase experience happen! I believe there are much more we can do to improve the overall UAL experience.