Locked In Mobile Salon Booking

Overview

Locked In is a mobile booking application that offers the seamless ability for clients to schedule appointments, view stylist profiles, and for stylists to block time off for what matters, offer promotions and keep their chair free of confusion.

The Problem

Busy women of all ages have so much to do when it comes to pampering themselves and upkeep. Booking can be confusing, stressful and even other third party booking apps can be cluttered and expensive.

The Goal

Design an aesthetically pleasing, clean salon booking app for women, and their stylists. This will allow women to remember their appointments, cancel easy, make payments and deposits, and view stylist’s promotions.

My Responsibilities

Conducting Interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Research found that...

I conducted interviews & surveys and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research, was busy women who don’t have the capacity to deal with a cluttered, confusing and frustrating booking app or process. The research also revealed that it includes payment issues that often cause stylists to underbook due to a lack of trustworthy clients.

User Pain Points

Process: Most clients are frustrated with confusing, multistep processes when it comes to booking.

Time: Busy women might struggle with managing their time, and remembering their appointments.

Reliability: Stylists at any given salon use different booking products for their set group of clients. This product will work on any salon site as an embed, or hyperlink to create a seamless booking experience on both ends.

Product: Users have issues with the product such as cluttered apps, pesky ads, and having to use 2-3 products to finish booking (payment app, scheduling, services, etc)

Accessibility

When designing this product, I:

  • Labeled Icons to help make navigation easier

  • Used detailed Images, including stylist photos (if provided) to visually show users (clients) who they will be seeing.

  • Used consistent components and kept color in mind. I wanted to make sure I was conveying the right message.


User Friendly

I wanted this app to be simple to navigate. Because this app is mainly targeted towards busy women, the simple colors, easy to read fonts and clearly labeled buttons can help the user get what they need done in a short amount of time. These functional buttons can direct a user to a call or email in a matter of time. I stayed away from the hyperlinks such as "click here to" making sure to ensure trust and let the user know exactly what they're getting.

Colors

Why these colors? In the app, I chose this English Red (#A84653) to grab attention or to alert the users. It is important that when choosing colors, I follow the 60-30-10 rule, resulting in a slightly lighter color choice when it comes to the disabled buttons. When buttons aren't hovered over or clicked, they remain a lighter tint.

Because this app is mainly targeted towards busy women, this shade of red gives off a feminine, yet powerful feeling.


The Outcome

One thing I noticed about the Booking page was the confusion that the Add services module caused when the user attempted to add more services to the service booked. My initial intent with this was to make it easy for clients to add on services with one click- but in the end it opens a can of worms, It also caused unintentional appointment overlapping. Lastly, it leaves multiple questions unanswered.

Such as:

  • How much are the services?

  • How long will they take in addition to the service that is being booked?

  • Will I get a separate confirmation in case I want to cancel the other appointment but want to keep this one? Will it cancel and erase my spot entirely?

  • So in the end, I left this feature out of the next cycle and the client will now be directed to book additional services, separately.


The Design Critique

Still eager to grow and take in other's opinions when designing, I went public to gather feedback on the design, and while most users felt the product was easy to navigate and the contrast was apparent, I did hear a few criticisms, such as:

"The hierarchy makes the prices hard to see, and in my opinion needs to be easier to see".

"The type a note to the stylist option (when booking) needs a box around it to show that this is a place to type. It was hard to see for me"

"The menu in the corner is unnecessary as the dashboard at the bottom serves it's purpose"

"This booking app is always available at my discretion and my clients can book at anytime and from anywhere. It can meet my customers' demands as it is online, easy to use, and easy to access on any device. "

-Sonya Prijai

  • The average time spent booking decreased by 20%.

  • Clients felt 5x more inclined to use this app to book again.


Figma Prototype

Best if viewed on Desktop.