Sylvia Baba
Multiple-Isometric-iPhone-MockUps-min (1).png

HairGuru MVP Responsive Web Design

 
 

HairGuru MVP Design

Responsive services marketplace web app for hairstylists and their clients

 
 

Overview

Design provider and client side onboarding, match results, booking, feedback forms, static pages, and admin panel.

 

TEam and timeline

As a solo designer, I conducted research and created a high fidelity interactive prototype over a period lasting 5 months.

 

Tools and methods

Design strategy and concept design, user research, interviews, and surveys, affinity mapping, empathy mapping, rapid ideation and sketching, wireframing and prototyping, usability testing, Sketch, Invision


 
 

The Challenge

HairGuru*, a services marketplace that matches clients with hairstylists via a proprietary algorithm based on a variety of lifestyle, hair, and personality data points, came to me with the task of designing their MVP so that clients could find a hairstylist and book an appointment and providers could build their clientele with quality clients.

*fake name

 

Client Problem

Users are unable to find a high end hairstylist that works well with their unique hair type and meshes with their personality

 

Provider Problem

Users are unable to find clients in their preferred demographic who are seeking hair services that align with their skills.

 

Solution

  • Design client and provider onboarding flow

  • Design match results page

  • Design client and provider booking flow

 

Impact

When implemented, these designs will enable clients to find a hairstylist that they’ll feel a rapport and want to book with over and over again, and enable providers to build their clientele with the type of clients they prefer. Both clients and providers will be able to book and manage appointments within the site.

 

First Steps

When I came on board, some market research had already been conducted, and a rough framework of the MVP had been mapped out. It was my job to design the responsive web app on a very short timeline in order to launch the product as quickly as possible.

 

Onboarding

The onboarding process is crucial for both clients and providers. It gathers information that can be used to match clients with providers, and in the case of providers, it also serves as an application to become part of the stylist network, ensuring that providers on the platform are highly qualified. I designed a series of UI templates that could be used for a variety of question types, including single-select, multi-select, fill-in forms, and dropdown menus.

ezgif.com-video-to-gifV2.gif
 
onboarding templates.png
 

Booking Flow

Since one of the technical constraints of the MVP was not having a full automated scheduling platform, users needed a way to book an appointment with a provider to keep users in the HairGuru ecosystem. Therefore, I designed a flow in which clients would set their appointment specifications and date/time preferences and send a request to their preferred provider. The provider would receive this request and offer a series of potential appointment times based on their schedule. The client would then pick one of those times (if applicable), and proceed to checkout.

I began by sketching out the mobile screens in this flow and tested them with users. My original sketch included a weekly calendar where users could customize their availability on different days, but due to technical constraints, this section was simplified, only allowing clients to choose a general time frame (ASAP, in 2 weeks, etc) and a general time of day that works well for them, but testing confirmed that users wanted to be able to choose specific dates and customize their available window(s) for each, due to their varying personal schedules. Additionally, the way the calendar was displayed was confusing, so I replaced it with a traditional calendar display that followed familiar visual patterns. This helped clear up confusion when choosing dates.

Booking request iterations

Booking request iterations

Testing the flow with providers also revealed that providers needed a way to more accurately quote prices and schedule enough time, since the price and duration of the appointment depend on the client’s hair thickness and natural color, among other things. Our solution was to include verbiage to communicate that the quoted duration and price were subject to change.

Additionally, providers agreed that we needed more comprehensive client photos to get an accurate sense of their hair type and condition, in order to make providers more comfortable about allowing clients to schedule an appointment without a consultation first. However, this feature, along with the functionality to schedule a video consultation was backlogged due to time and tech constraints.

 

If you’re interested in hearing more about this project, get in touch!