Introduction
Clipbook is a web-based booking platform designed to effortlessly connect clients with their preferred hairstylists and barbers. By designing a user-friendly and comprehensive app for both clients and businesses, we effectively minimized the hassle and exasperation typically associated with scheduling and booking appointments.
My Role
UX/UI Design, User Research
Client
Hair Salons, Barbershops, Stylists
Tools
Figma, FigJam, Framer, Google Sheets, Dovetail, Maze
Problem
Booking a haircut appointment can often be a time-consuming of process of coordinating schedules, leading to delays and miscommunication.
While conducting early interviews with our potential users, many expressed the inconvenience in managing and booking haircut appointments due to a scarcity of specialized scheduling tools for customer-business relations, leading to issues like excessive phone calls, last-minute cancellations, and a lack of trustworthy customer feedback. This sparked the question -
How might we…
Improve the process of choosing and booking hair appointments with preferred stylists/barbers?
Jump to solution
Analyzing Market and Competitions
Competitive benchmarking revealed an oversaturated market competing on scheduling and booking services, yet few dedicated to the beauty and care industry.
Looking at the popular players within the space, we discovered multiple apps that allow users to conveniently book services online. We theorized that an opportunity exists for us to distinguish ourselves by developing a dedicated app that enables customers to effortlessly arrange appointments with hair stylists and barbers.
Vagaro
Airbnb
OpenTable
Booksy
theCut
Vagaro - Booking App for Salons, Spas, & Gyms
Business Overview
Observation: Access to subsections of the business's information. Button to book services found at bottom of page.
Booking a Service
Observation: Finding available appointments is simplified through preselected options.
Progression of steps are made clear with visual hierarchy but two page set up makes the process seem bulky.
Confirm Booking
Observation: Additional requests & Cancellation Policy found before the final book button.
Airbnb - Booking App for Stays
Filtered Search
Observation: Primarily focused on fast booking, without a feature for finding future appointments.
Booking a Service
Observation: Simple interface that emphasizes prompt booking. No clear CTA or button to book.
Appointment Details
Observation: All appointment information neatly organized on a single page – includes service, date & time, and payment details.
OpenTable - Booking App for Restaurants
Find a Business
Observation: Search page provides filtering capability to define your search criteria.
Business Overview
Observation: Open reservation slots are shown on the main page.
Reservation Details
Observation: Scrolling functionality for Date & Time is intuitive but no calendar view.
Confirm Reservation
Observation: After applying filters users must return to main page to select time slots in order to reserve.
Identifying our Users
Interviews with 20+ participants and survey takers revealed the apprehension they experience when scheduling their next haircut.
We conducted semi-structured interviews with target users to validate our initial findings and further understand how people currently schedule their haircuts, their motivations and challenges.
"I want to know how much my treatment will cost me before making an appointment."
"I work weekdays, so my only option is to book a haircut on the weekends. But it's difficult because my barber is always booked."
"The back and forth phone calls are such a hassle."
Some key insights that we found were that…
01
People thoroughly research.
By conducting this research, customers aim to ensure that their chosen service aligns with their specific needs and preferences and to minimize any surprises.
02
Appointments need to match their schedule, not someone else's.
People want to make the most of their time and ensure that appointments do not disrupt their daily routines.
03
Phone calls have become outdated.
Users prefer scheduling appointments online to avoid phone tag, get instant confirmation, and keep a digital record of the arrangement.
Defining Personas and Goals
Framing problem statements for our different levels of end-users and their journeys.
Based on our initial user inquiries, the Clipbook app would likely be a scheduling tool between the customers and businesses. We therefore had to consider not only our direct users (customers), but also the businesses (hair salons, stylists, and barbers) as our end-users, with separate problem statements and challenges.
Keira Border
(Customer)
"I love trying different styles with my hair, but I find it hard to trust new hair salons without knowing their process first."
GOALS
Assess the costs and processes of hair treatments at different hairdressing salons.
PAIN POINT
Spends too much time determining the optimal salon specializing in textured hair treatments.
Humble Cuts
(Business)
"Our clients deserve the best, but managing appointments can be a beauty in itself."
GOALS
Improve customer convenience, reduce no-shows, and enable efficient resource management
PAIN POINT
Managing bookings manually and accommodating last-minute changes.
Feature Prioritization
Utilising user needs across our personas to aid in brainstorming a solution scope for an MVP.
Given a more limited timeframe, we opted to prioritize features demanding minimal effort yet promising high impact, a decision facilitated by extensive participant discussions and continuous reference to our user personas' attributes and pain points.
Must Have
Business appointment availabilities
Navigation bar
Scheduling and booking system
Customer reviews and customer images
Business profile, service menu, and details
Search and filter functions
Appointment overview
Help/contact center
User profile
Should Have
Explore/main page
Location search
Appointment notifications
Saved businesses
Additional notes before reserve
Service prices
Calendar view
Edit option for upcoming appointment
Could Have
Suggested businesses
In app messaging
Integrated pay system
Stylist details and specialization
Guest log in
Share business
Onboarding process
Won't Have
Unavailable appointment dates
Blog
Encouraged appointment dates
Breadcrumb navigation
Third party app integration (calendars)
System Architecture
Consideration for our persona's context directed a user flow focusing on minimum steps and time.
We mapped out key path scenarios that gets our users to their most prominent use cases within the least amount of steps. Given our users' inclination towards booking appointments tailored to their preferences, we developed an intuitive yet robust system, streamlining the booking process significantly.
Task: I want to book an appointment for a specific date & time.
Minimum path to desired result
Register/ log in
Explore
Scroll through recommended businesses.
Search by Location
Filter search by locations.
Search by Dates
Filter search by specific dates or timeframe.
Filtered Search
Search results show available appointment slots.
Business Page
Includes service menu, staff, and business details.
Book Appointment
Select time, date, service, and staff for booking.
Confirm Booking
Confirm or edit bookings conveniently on one page.
Crafting the Visual Design
Simplifying the intricate process of scheduling a hair appointment through intuitive design.
Leveraging our findings and persona attributes, we understood users must be able to easily find their ideal appointment dates and access desired information from the business.
Key features include clear call-to-action buttons for booking appointments, straightforward menus, and intuitive search functionality.
Font
Aa
FONT FAMILY
Poppins - Regular
Poppins - Medium
Poppins - Bold
Typography
Header 2 - 20px Bold
HEADER 1 - 24px Bold
Body Text - Poppins 12px Regular
Secondary Text - Poppins 10px Regular
Header 3 - 16px Medium
Buttons
Book Appointment
Book Appointment
Book Appointment
Button
Button
Button
Button
Icons
Color Palette
334AC3
EAEDFC
FF5C5C
252525
E3E5E9
FFFFFF
The Final MVP
Discover Businesses
With Clipbook's Explore Page, effortlessly discover salons and barbershops near you and with open availabilities.
Find the Perfect Time
Schedule your appointments in just a few taps. No more back-and-forth trying to get the time that fits your busy schedule.
Get the Details
From reviews to services offered, Clipbook helps you make informed decisions about your next appointment.
Introducing
Testing Impacts
Participant feedback revealed promising results in reducing the time needed to find and schedule a haircut appointment.
01
100% of users were able to complete the flow with an average misclick rate of 11.6%.
02
Significantly reduced the time needed to book a hair appointment by 2m 38s.
03
Empowers users with business reviews, ratings, photos, and search capabilities for informed decisions and exploration of local businesses.
"This is something I could definitely see myself using the next time I need a haircut."
"I like how you get to see all of the information in one place. It reminds me of Yelp."
Project Takeaways
Clipbook was the first project I worked on that involved conceptualizing an app from scratch. I was a bit nervous to start since I wouldn't have a detailed design brief or an existing design to reference, but I realized that I had a strong understanding of the user context and user goals, since I was designing an app to solve a problem that I was personally facing.
I was able to gain my bearings with that in mind, and bolstered my understanding and vision through task flow diagramming. I ended up having a lot of fun working on Clipbook and relished in the creative freedom I had in designing something completely new.
more works
