Barbz - A barber booking app concept by Plexable
“
Your barber’s details, free times and booking in one app.
Barbz
Brand and iOS app concept, 2015
About the project
Barbz is an app concept we created in 2015 for anyone who keeps losing their barber’s business card. It keeps the barber’s contact details, free times and shop location on the phone, and lets clients book a service. We wrote the user stories, ran card sorting, wireframed the app, designed the iOS screens and built the brand around a pair of scissors over a mustache.
Project
Barbz Brand and App
Industry
Grooming
Location
Amman, Jordan
Date
2015
“
Client Request
We set ourselves a brief: one app where clients find a barber, see their free times and book, and where barbers run their own profile and shop page.
Plexable
Internal concept, 2015
Design Pillars
Core UX Principles
Clients and barbers share one structure, each with the sections their role needs.
The first question is men or women, so the menu only shows the services that apply.
Pick a service, choose a barber by years of experience, then book a time and date.
From the Research
What Card Sorting Settled
Two Kinds of Users
Clients and hairdressers needed different features, so we sorted out each user type’s rights and sections first.
Nine Epics
The user stories grew into nine epics, from sign up and search to payment, messages, booking and a page for each shop.
Next Phases
We also used the sessions to list the features that would come in later phases.
The Challenge
Problem Statement
The Main Goal: One App for Clients and Barbers
The navigation had to serve both types of users equally and stay simple on a small screen. Our first attempts did not find one structure that worked for both, so it took a few rounds of revisions to reach the final navigation.
“
The hardest things to find in life: an honest mechanic, and a good barber.
Barbz Tagline
Plexable, 2015
Our Approach
Solution
A Brand and an App in One
User stories, card sorting, wireframes, the iOS screens, a logo, a script wordmark, a color palette and a set of service icons. It is an example of our Mobile App Design work.
01 - Stories and Card Sorting
Nine epics of user stories, and a card sort that split the app between clients and barbers.
02 - Wireframes
Seven wireframes in March 2015, from the splash screen to the booking and the chat.
03 - Brand and Interface
A scissors and mustache mark in yellow on near black, carried into the final screens.
Before & After
The Blueprint & Evolution
Wireframe to Final Screen
The men’s menu, from the March 2015 wireframe to the final design.
Before: a gray wireframe with filled icons and a dark side panel.
After: Barbz yellow, line icons and the mustache badge for men.
Design
Key Features
Six Services, Six Icons
Haircut, hot lather shave, haircut and beard trim, beard trim, coloring and facials, each with its own line icon.
Drawn by Hand
The mark started as pencil sketches of scissors, razors, beards and mustaches before it was drawn in vector.
Design System
Visual Identity
Typography
A script Barbz wordmark set in Pacifico at three sizes, with Helvetica Neue in thin and regular weights.
Color Palette
Barbz yellow #F7C800 with near black #1E1F23, black #050505 and gray #58595B.
One Mark for Both
A mustache and long hair combine into one mark for men and women, drawn on the iOS app icon grid.
Impact
A Concept in Our Portfolio
Results for Barbz
Barbz stayed a concept. We showed it on our website from 2015 and in our 2020 company profile, from the card sorting to the final screens.
Barbz
Result
By the Numbers
9 Epics
User stories from sign up to a page for each barber shop.
7 Wireframes
Drawn in March 2015, from the splash screen to the chat.
6 Services
Each with its own line icon in the men’s menu.
Process
Stories and Sticky Notes
Written in March 2015
We wrote a sheet of user stories, grouped into nine epics such as sign up, search, payment, messages and booking, and sorted them on sticky notes to give clients and barbers their own sections. The stories and the first wireframes both date from March 2015. You can see some of the results below.
