Happy Medium

Designing a mobile booking experience for a viral art studio

An art studio in

Chinatown, NYC

Happy Medium is an art studio that provides two types of services.

  1. Art Cafe: self-guided collaging and clay work

  2. Classes: figure drawing and woodworking

I was a customer - and I loved their classes (especially figure drawing)

but the booking experience was difficult that I almost didn’t try it.

Existing Experience

A fragmented booking experience across channels (Instagram, Linktree, etc), and their primary channel did not meet my needs as a customer because:

1. Lack of information or content to make a purchase decision

2. Hard to compare classes and differentiate between each class

3. Difficult to pick dates and times when booking a class

I wasn’t the only one who felt this way

  • “Signing up for art cafe was confusing because it's not on the website”

    Kate from Art Cafe

  • “It was annoying to go through so many links just to sign up for a class”

    Jai from Figure Drawing

  • “What I really want is to see how the activities are like before purchasing”

    Seonah from Build-A-Chair Workshop

Happy Medium has 2 main kinds of first-time customers.

Word of Mouth

Because Happy Medium is so special in its classes and experience, a lot of its customers learn about the studio through word of mouth.

50% went on the website

50% went on Instagram

When booking their first class:

Social Media

The other kinds of customers come from viral posts on TikTok and Instagram, curiosity about the classes because of its popularity in media.

60% stayed on Instagram

40% went from Instagram to the website

When booking their first class:

Create an amazing booking experience in Happy Medium’s primary channel for first-time customers.

The goal was clear:

I jumped into wireframes

Wireframes were a way for myself to understand which path would help guide the first-time customer experience without building prototypes just yet.

There were 2 main paths:

  1. Calendar-Focused

  2. Class-Focused

Mid-Fidelity Prototypes

Now that I saw these two paths, I built the mid-fidelity prototypes to socialize with key stakeholders

Calendar Focused

Date Specific: Focuses on date from a monthly view standpoint along with specific filters

Headline Central: Focuses on big picture overall offerings on a macro scale

Daily Focus: Focuses on classes based on a specific day

Class Focused

Homepage: Focuses on daily classes and offerings

Big Picture: Focuses on overview and light on the graphics

Genre Based: Focuses on the two main sectors of Happy Medium

Class Focused was the better option.

The mid-fidelity prototypes used to socialize ideas with stakeholders showed the more user-friendly choice.

1. Uses content to help influence purchase decision

2. Creates ease in deciphering information to help understand the difference between classes

3. Simplifies the cross-channel booking experience, making it easier to book the date

Reimagined booking experience for the first-time customer

I began my process of actualizing the flow and got to work on designing. I started to talk to the free-lance engineer and worked on a simple design system.

To make deciphering difference in information easier.

My biggest takeaway for creating contrast in Art Cafe was to focus on thoughtful UX writing for consistency while utilizing visuals to establish intentional differences between the two offered classes.

Date Picking. Simple yet informative.

While the app is class-focused, the calendar feature is pivotal when simplifying the cross-channel booking experience, making it easier to book the date.

For both the word of mouth and social media customers.

The search bar is an easy way for first-time and returning users to navigate through specific key words.

My biggest takeaway was allowing users to have a space to input choices freely.

If I could measure…

Happy Medium is expanding with its services and opening a second location in Brooklyn. Unfortunately, the app development is currently on hold so success metrics can’t be properly measured. Here are two metrics I’d use to determine how the app is performing.

The % of people booking through Happy Medium channel vs 3rd party channels

The increase conversion for first-time customers booking on Happy Medium channel.

From interviews to wireframes to prototypes,

Reflection

I learned how to work as a designer and product manager. In a fast-paced environment, I’ve valued the collaboration with clients and cross-function team members when workshopping solutions.

The most challenging aspect to tackle was creating information flow that was flexible while capturing the livelihood of the brand.

The three main points: simplifying the booking experience, helping compare the difference in classes, and influencing decision making through social proof served as the guiding principle when developing end-to-end design.

Design Tokens

Using a Global Design Language and iOS Variables Library to establish a scalable and consistent visual system.

Global Design Language

Using the Global Design Language File, I was able to author color palettes for Brand, Neutral and Status that removed any hardcoded asset injection from the engineering side.

iOS Variables

Next, I was able to define alias tokens and assign global token values to them. This helped remove any ambiguity between design and code for the handoff.

Specifications

Finally, with token architecture in place, I assigned assets to designs that would help reduced any inconsistencies between design and development.