Art School of SF Bay

Redesigning the mobile website to make it easier for people to find their perfect class

Timeline Summer 2022

Role UI/UX Designer

Tools Figma, InVision

Brief:

I was tasked to redesign the mobile website to simplify the search experience.

Problem

The director of the art school has many people calling her about general art class questions on a daily basis. There are so many customers contacting her every day, making it hard for her to focus on large scale goals for the school.

Research

I conducted user interviews and listened to customer service calls. Since we have website analytics, I was also able to see what pages and classes were most popular.

Goal 1

Allow customers to easily find class information and simplify user flow to increase engagement.

Goal 2

Standardize pages, allowing director and engineer to easily add new classes and locations

Findings about customers

1) Customers find location pages confusing because they don’t think they need it

2) Customers want to quickly find class information for a specific age group + location

3) The most frequently visited pages are the location pages and adult class pages

Even though the website had all the class information, the users weren't able to find it in an efficient way.

Competitive Analysis

I looked at some competitive class pages to find inspiration.

What I took away was that:

1. Using modular blocks to present pieces of information on the homepage can best utilize the space

2. Having a left menu helps with navigating through different information

3. Grouping quick links in one place and using icons to prioritize them

Ideation

Prototype

User Testing

I designed a click-through prototype on Figma to conduct usability tests and understand how users interact with the updated interface. I did 40 tests in total during two weeks with existing users. I created a user testing plan, designed several tasks, observed users completing the tasks, and asked for feedback at the end. I received good and unexpected reactions, and also some areas of improvement. Later, I implemented these changes to the final design. I really enjoyed talking to users and seeing their reactions to the new designs. It motivates me to make thoughtful design decisions that benefit my users.

Next Steps

1. Improve responsiveness on mobile

2. Design typography to be more exciting

3. Increase user testing

Reflection

I'm proud to have such a large role in a project from the very beginning. I challenged myself to think of a lot of iterations, present them to the director, and test with users. If I have more time, I would continue to gather user feedback and make improvements.

Extras

I was able to create small illustrations for the website throughout my internship.