The Problem

Bookings in the beauty industry are largely disorganized. A potential customer generally has to find a salon either online or by word-of-mouth and usually goes through an extremely painful process of forms and archaic scheduling before successfully scheduling a booking. Filling out contact and billing info for each salon can become tedious and frustrating, and most salons have a variety of makeup / hair artists with tight schedules.

For example, this is the mobile booking process for Arté Salon in New York City:

Arté Salon is by all standards one of New York’s top-tier beauty salons, but they are one of countless salons with an archaic scheduling system. A potential customer would have to go through three levels of Arté’s website just to fill out their information. However, the burden of creating a comfortable online booking experience falls on the salons themselves—most of whom are professionals in their own sense, but often unequipped to build out a full-fledged digital product. The problem is further aggravated when the service provider is an individual without the resources of a fancy salon.

Makeup and hair artists shouldn’t have to build out a beautifully designed digital user experience themselves in order to communicate with customers.

The individual website experience raises a second problem: there isn’t a way to reliably compare beauty service providers. If I were to evaluate Arté Salon with a competing shop, I might check out their Yelp reviews for some reassurance and compare Instagram feeds. But independent makeup and hair artists aren’t able to rely on Yelp for qualitative social proof, and most salons have a few in-house artists with varying styles and specializations.

User Research & Insights

In early conversations with the MEI team, we established that we wanted a two-sided marketplace that aimed to streamline the experience of finding a hair or makeup artist. This splits the user base into two distinct categories: the ‘‘beauty client’’, or the customer searching for the service, and the ‘‘beauty freelancer’’, the beauty service provider. While the client and the freelancer work with two different sides of the product, they should still be able to conduct a conversation as they would in real life about style preferences, allergies to certain products, and skin / hair specifications.

The client and freelancer in conversation

Both the beauty client and the beauty freelancer are stakeholders in the platform in their own way. The beauty client wants a straightforward booking experience no matter where they're going to get their needs met and the beauty freelancer wants to be able to easily fit clients into their schedule.

In order to understand the beauty clients better, we sought to identify habits and behaviors that are routine, as opposed to luxury—MEI can’t be a successful solution if it's used once in a blue moon.

We found that hair, nail, and skincare services are often categorized as maintenance activities and are seen as necessities, not luxuries.

From here, the image of MEI’s first iteration starts to become clearer. A two-sided marketplace was necessary to distinguish the roles of client vs. freelancer, and the product would largely focus on routine, maintenance services like hairstyling.

The User Journey

After establishing our design strategies and user needs, we worked with the MEI team to outline what a typical user journey would look like. From here, we started to ask ourselves some important questions not only about what an ideal user flow would be for both parties, but what sort of interaction would allow for an optimal ‘‘conversation’’ between the two in the product’s backend structure.

How should a client discover the ideal freelancer for the job?
What happens before and after the actual appointment?
At what point should the freelancer be able to converse with the client?
How do we make the freelancer experience feel like they are managing their own business?

Style & Fonts

MEI’s style guide is designed around the client’s pre-chosen logo. Rounded corners, thin lines, and gradients provide a cheerful, welcoming feel that appeals to the beauty industry’s clientele.

Booking Appointments

For a client, booking appointments should be simple, intuitive, and exciting. The task of finding and committing to a stylist is already daunting enough—with a simple form and multiple filters, users should be able to find the best option for their needs. I split up my designs into two segments of the user journey: the Discover Flow and the Checkout Flow.

The Discover Flow contains the first half of a user journey, from login to the actual discovery of a freelancer.

Discover Flow

SEARCH
The MEI team wanted users on the client-facing platform to be greeted with a simple, friendly page after login. We knew that there were three parts of the search functionality we wanted in the initial product.

Location: With MEI, the goal was to allow independent service providers to travel to their clients and conduct their business on-site. Clients who need beauty services done for performances or weddings might prefer a traveling artist, and would need to find someone within traveling distance.
Date & Time: It’s important that a client be able to fit their appointment into their own schedule. Clients with specific availability could control date and time features and see which freelancers are available when they are.
Service: After preliminary discussions with freelancers and establishing a business strategy, the MEI team assembled a list of services that they felt comfortable offering on the app. These services could be separated into three categories. Between haircuts and styling, makeup, and nail styling, most mainstream ‘‘maintenance’’ services were covered.

I arranged these three parameters into a sort of modular setup with Location and Date & Time mimicking input fields and Service into binary selection buttons.

Results
The results page is simply a list of different result ‘‘cells’’. At the top of the list, users can explore results by date and adjust their search filters. Each of these cells contain four main pieces of metadata that allow the client to evaluate individual freelancers without committing to opening their profile page.

Checkout Flow

The checkout flow is fairly simple. For users that already filled out their preferred date, time, and service in the discovery process, checking out should just be a review of what their order looks like. Unlike the discovery process, users have the opportunity to add extra people to their booking at checkout.

Post-Booking Flow

MEI was always intended to be driven by user input. After a booking, the client would be prompted to rate their freelancer on a 5-point star system. They could also elaborate on what the freelancer did or didn’t do well if they chose. These metrics would then be communicated to the freelancer and ultimately reflected on their MEI profile for prospective clients to see.

Managing Appointments

It was important to the MEI team that the product’s distinguishing factor amongst competitors be its friendliness to independent makeup artists. ‘‘Beauty freelancers’’ and salons can advertise their services on MEI and promote themselves with social proof on the platform without the hassle of building their own website or booking portal.

Appointment Management

The freelancer app interface revolves around the core appointment management experience. Between interviews with real freelancers and ideation with the MEI team, we found that allowing freelancers to view their appointments in both a calendar and list format. This would give both a high-level glimpse of the month and a more detailed breakdown of the day-by-day schedule.

I landed on an interface that splits the real estate into both views, with the option to pull the list up and take up the whole screen. Upon selecting an appointment in the list view, the user has the option to open a page that lists out the full booking details.

Calendar View
The monthly calendar didn’t need too much space—I used a standard digital calendar format and simply used the rest of the screen as space for the list view. Using Apple's Human Interface Guidelines, I decided that the pull-up functionality provided both a delightful sense of discoverability and a realistic perception of depth.

List View
The list view shows a freelancer's appointments chronologically, starting with the selected date. To account for edge cases where the selected date has little to no appointments, I made the list infinite and added a date tag that acts a separator between dates.

The list view I provided sits logically ‘‘above’’ the calendar and can thus be pulled up above the calendar to show more appointments. Within the list, the metadata can be split into two columns. On the left, I displayed the start and end time with the start time highlighted in pink and the end time washed out in gray to provide a sense of hierarchical importance to the two items. On the right, the client’s name, service category, and address are displayed so that the freelancer knows what to expect from a quick glance.

Booking Details
The booking detail page is where things started to get complicated. The freelancer needs to be able to see an overview of the booking in advance to plan out their schedule and manage payments, but sensitive information like the client’s address shouldn’t be always available. We wanted to make sure that the freelancer got the right information at the right time. The general map should be made available when the booking is made, but the actual address and ability to calculate a route from a location is not available outside of a certain time frame.

MEI App.