43rd APP | Tina Marie Zeng

43RD STREET STUDIOS APP DESIGN

Role: UX Researcher, UX/UI Designer

Project Type: Reservation E-Commerce App

Date: Apr 2024 - Jul 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: All reservations are done through the booking website which has limited features available for the user to effectively browse and book classes.

Opportunity: The studio currently doesn't have an app, so we'll be crafting a completely new design. We want to honor the studio's brand identity, while introducing new features and simpler navigations for users to book their desired classes.

RESEARCH

I interviewed 5 customers who have made reservations with the studio before to better understand the processes and emotions that they experience.

Some questions included:

How would you describe your experience with reserving classes with 43rd street studios?
What do you like about the current processes?
What are some things you think could be improved/What are some challenges you experience?
What are some things you wish to see in art focused reservation app?

Most of the feedback I received from users were about the booking process. However, a few noted wanting more class variety as well. The option to take intermediate or advanced classes would help creatives grow their skillsets. Process efficiency would still be my main priority, but I also made note of this additional feedback.

KEY INSIGHTS

PRIVATE CLASSES

All private class requests require multiple back and forth email communications which makes the process fairly time consuming. Users want a streamlined process.

SHARING FUNCTIONS

Users love taking pottery classes with their friends and family. A feature allowing users to share booking details and classes with others would be beneficial.

TRANSPARENCY

Users are left in the dark about the status of their pieces once the class is completed. This causes growing impatience. A feature that provides this transparence will help ease their frustrations.

BROWSING

Users spend additional time trying to find important class details. Clear overview of information should be prioritized

Once I had a general foundation of our users pain points and needs, I created user personas and stories to inspire more empathetic designs. At the end of this process I had a clear goal statement:

Our e-commerce reservation app will allow users to book and request pottery classes, share details with friends, grow their skills, and stay informed on the status of their pieces from start to end.

This will affect people who have busy lives and full time schedules. Effectiveness will be measured by:

Customer Satisfaction
Time Spent on Task
System Usability Scale

DESIGN PROCESS

From my user research, I knew I needed to include the following features:

Private Request

Form

Sharing

Class Detail Overview

Manage Booking Options

I also made note of features that would be nice to have:

Class Difficulty

Favorites

USER FLOWS

I built three user flows that satisfied the main features of my product.

Booking a class will have proper class detail overviews during browsing and have sharing functions available.
There will be a request form for booking private classes that also has sharing capabilities
The manage booking function will provide transparency on pieces and allow for cancellations

BOOKING A CLASS

REQUESTING A PRIVATE CLASS

CANCELLING A CLASS

WIREFRAMING

With key features and user flows identified, I could start designing the wireframes. I questioned the obvious and drew out as many ideas as I could, taking notes of which ones stood out the most. Standout ideas were then evaluated for feasibility, desirability and viability.

DIGITAL WIREFRAMES

LOW FI PROTOTYPES

I went ahead and added interactions to create a prototype for testing. I conducted 2 rounds of moderated usability tests where I met with 5 individuals and asked them to complete a series of prompts. There was a week between the each test to allow room for iterations They were tasked with booking a beginner friendly hand building class for two people. Once booked, they would need to cancel the booking and request a private class instead. I made notes of their click path, general observations, and how easy task completion was.

USABILITY FINDINGS ROUND 1

1

Users enjoy having a share booking option but it is difficult to tell that the booking has been shared.

2

Users find it difficult to cancel existing bookings. Most try to access through the profile bar on the bottom navigation

3

Quick Access Bar filters are confusing for the users. There is uncertainty on what the function of the buttons are. Users don’t know which are public group classes and which are private

USABILITY FINDINGS ROUND 2

1

User finds that adding an item to the bag was confusing versus just buying now.

2

There is some confusion on the how to book group classes and request private classes. The UI needs to be updated in order to ensure clear directions.

3

Users had difficulty figuring out what the class type was.

MOCKUPS

Based on insights from the usability study, I applied design changes to create simpler navigation and affordances to better direct the user to achieve their goal.

BOOKING A CLASS (MOCKUP v1)

HIGH FIDELITY PROTOTYPES

Once the high fidelity prototypes were made, I conducted multiple sessions of moderated usability tests with the same parameters from previous studies. Prompts were tweaked a bit to dissect different issues. There was about a week to two weeks between each for drawing insights and making iterations. I ended up building out a lot of different possible routes during some iterations to really understand the desirable click path users chose. I also added interactions between component variables to simulate a real product.

I received a lot of great feedback throughout my studies. This allowed me to turn them into actionable insights and really refine my product and optimize the experience for my users.

ITERATIONS

There were a lot of iterations and fine tuning made in this design. We can observe the evolution of the home screen below:

VERSION 1

VERSION 2

FINAL

It's clear how much the design cleaned up during the iteration process. Aside from using the same typeface and implementing text hierarchy throughout my design, I wanted to take it a step further adjusted the colors slightly so it was WCAG AA compliant.

FINAL PRODUCT

BOOKING A CLASS

CANCEL BOOKING

REQUEST PRIVATE CLASS

“It was appealing how easy it was to find classes and how quick booking can be. UI is very pleasing to the eye, color scheme and buttons are nice"

KEY TAKEAWAYS

Phew! This was my first ever UX design from start to finish. There were definitely a lot of growing pains during this process, but I learned an array of useful skills to catapult my future designs in the right direction.

Lessons learned:

Simple is better.
Using components and variables make the design process much easier. It stimulates a more organic flow when prototyping and adds consistency throughout your entire design.
Usability testing is crucial. There were many moments where I believed my design was fool proof, but then a usability test would introduce a new thought process. It's easy to think your design is great when you already know the solution. Having fresh eyes makes a world of difference.

**not a real product