43rd WEBSITE | Tina Marie Zeng

Pink Maroon Minimalist Aesthetic Simple Presentation (4).png

43RD STREET STUDIOS WEB DESIGN

Role: UX Researcher, UX/UI Designer

Project Type: Responsive Web Design

Date: Jul 2024 - Aug 2024

Background: 43rd Street Studios is a community based ceramics studio offering pottery classes and focusing on collaboration. Their goal is to provide a creative space for everyone to share and learn in.

Challenge: The site has an inefficient browsing and booking process.

Opportunity: By creating simple navigation flows, we can help save users time while browsing, booking, and sharing classes.

RESEARCH

Overview:

Five customers were interviewed: 4 people between the ages of 18 and 35, and 1 senior citizen. All interviews were conducted in person.

I used affinity diagrams after the interviews to identify pain points.

PAIN POINTS

1

Organization

Users want to be able to identify important details quickly and easily.

3

Browsing

The filtering system is inefficient. Users want more visibility for class date, times, and spot availability.

2

Sharing Options

People typically attend pottery classes with friends and want options to streamline communications

4

Class Variety

There are a lot of the same repeating classes. Users would like the option to engage in different types of classes to grow their skills

To further empathize with users. I created a couple personas to help with journey mapping and storyboarding. This allowed me to understand the user's feeling while going through product and find improvement opportunities.

Finn

Age: 20

Status: Single

Occupation: Student

It’s either your social life, good grades, or sleep, and since I can only pick two, social life and good grades it is.

Goals

Hang out with friends
Have enough time for studying
Balance his social life and studying, spending as little time on miscellaneous tasks outside of that

Frustrations

Managing communications
Spending too long on tasks that should be quick
Has a hard time figuring out how many spots are still available in classes

Bio

Finn is university student that's very social and loves spending time with his friends. He is in charge of booking a pottery class for them every month. This task can be quite time consuming because he has to coordinate the studio's schedule with everyone else's. He often finds himself going through a lot of portals just to figure out the studio's class availability and time. These simple tasks take additional time away from his studying. Even though he loves doing pottery with his friends, it becomes a stressor each month for him to organize.

We are all artists in this world and our compositions are evershifting.

Goals

Opportunities to connect with other like-minded individuals
Be able to dedicate time to classes that can advance her skillset
Gain the knowledge to have her own gallery

Frustrations

“It’s difficult to advance my skills when there are no specific levels to the classes”
“A lot of times I’m in courses with beginners where instructors need to dedicate more time explaining the basics”

Bio

Ophelia has always been a creative at heart. Her parents discouraged her from becoming a potter since it was not a lucrative career. Now as an adult, she wants to commit more time to doing what she has always loved. She’s wants to do a soft launch of her ceramics at a farmers market. She’s been trying to advance her skills with like-minded individuals however, a lot of the classes are open to all levels. She often finds herself in classes with beginners and wants to explore more advanced options in a group setting.

Ophelia

Age: 33

Status: Married, one child

Occupation: Ad Manager

KEY INSIGHTS

Time

Time is of huge value to users. Many people have busy lives and want to engage with a product that makes their lives easier.

Friends

Pottery is a social activity for many people. In order to create a more collaborative space, sharing options are needed.

Growth

Users enjoy being in an environment where there are opportunities to grow and be surrounded with like-minded creatives.

DESIGN

INFORMATION ARCHITECTURE & USER FLOWS

I created a sitemap to better visualize potential user flows and understand what actions users might take to achieve their goals.

The main flow tracked the journey the user takes to book a class for 2+ people. I had to figure out a way to design the navigation so that there wouldn't be too many action steps to achieve the user goal. The most efficient process was identified by requiring the user to select the number of students first. This would then automatically filter out the dates and times that were available, allowing for a simple linear path to book a class. In addition, users could also apply filters at the beginning to determine which classes satisfy their needs, making the process even easier. Through this flow we can create the basic concept for our wireframes.

An additional flow I would have liked to explore would be requesting a private class. However, most customers book public group glasses so I kept this as my focus.

WIREFRAMING

I focused on core features outlined by my user research and drew them out as wireframes. I started on paper, starring parts of each design that I found most effective.

Since this is a responsive web design I needed to create wireframes for different screen sizes. Once final paper wireframes were completed, I transferred them to digital to prepare for prototyping.

PROTOTYPING

I created a low fidelity prototype from the wireframes to test functionality before incorporating it into the final design

MOCKUPS

Most of the insights gathered from the initial usability study were positive. Users were able to navigate through the flow easily, but found that some information was difficult to spot. I kept this in mind when transitioning to my mockups because color plays a huge role in the way our eyes move across a screen.

I wanted to keep accessibility in mind while I was creating my design system. I ensured my color palette was WCAG AA compliant before building out the UI for each screen. I also opted for one sans serif typeface- Inter, to create consistency throughout my design.

HIGH FIDELITY PROTOTYPES

Once the mockups were completed, I added interactions between them to create a high fidelity prototype for additional usability testing.

USABILITY TESTING

During the second round of usability testing I received some constructive feedback on the filtering system. Earlier usability tests found that users were content going the route without applying filters since the navigation became more efficient. However, since ineffective filters was identified as a pain point in our user research, I did additional tests for the filtering function alone. It was found that:

1

Comprehensive Overview

Users want more specific filtering options instead of the general ascending and descending ones.

2

Calendar Option

Many users are visual and like to see a calendar of available dates to select from.

3

Spot availability

For users booking for groups, it would be effective to be able to filter by how many spots are available before browsing.

ITERATIONS

After a few iterations we were able to create a more distinct filtering function for users. The sort function now includes:

Option to enter how many students the user is booking for
A calendar which displays all available classes and distinguishes which ones are running low
Time slot availabilities that update depending on the number of students and dates selected

Iteration 1:

Can only select one date
Calendar UI a little difficult to read

Iteration 2:

Can select multiple dates
Increased availability visibility

Now that the filtering process is refined, this introduces an even smoother flow for users booking for just themselves or groups.

FINAL PRODUCT

KEY TAKEAWAYS

This was the first website I ever designed, and although it was challenging I had a lot of fun and learned so much along the way.

Lessons Learned:

It's important to conduct multiple usability tests in order to cast a wider net on iteration opportunities.
It's easy to get attached to ideas. Incorporating feedback will help create more effective designs because it broadens your perspective.
Consistency is key and will help create more refined and cohesive products.