Linkdin_Grey.png
DribbleGrey.png
InstagramGrey.png
behanceGrey.png
a.png
Dribble 1.png

A Smart CRM assistant for Hairdressers

Mobile app ux ui case study
Offset pattern handsAsset 37_12x.png
Background Website-10.png

What is Chop Chop?

Chop Chop is a Hairdresser CRM assistant, focused on easily collecting and displaying client information.

It is crafted for every hair pro who wishes to have long lasting & productive relationships with their customers and with the hair on their heads.

Project type

Mobile App | Hairdressers CRM

Arrow 4.png

Motivation

We all know our haircut choices are not only about fashion trends or practical silhouettes. Our haircut actually forms an important part of one’s self-expression and identity. The haircut reflects and communicates our interests, age, experiences, cultural background, religion, beliefs, occupation, or dreams...

For a client, finding a good hairstylist is a major relief, as it is one of the most intimate relationships we have with chosen professionals who provide us service. We want to be feel comfortable and to be understood, while our needs are taken care of by the craftsman who fixes our hairdos. 

Walking around with short hairstyles for years have made me very careful about picking my hairdresser & getting to know my haircut preferences. As each haircut is an opportunity to make changes or sticking tightly to something I'm already into, thoughts about providing a tool which sums up & organises the client-hairdresser relationship came to my mind. 

Keeping up with your hairdo habits would be much easier if there was a tool for Hair professionals that would organize everything there is to know about a client - Hair textures & desirable hair cut shape & nature, visit history list & images.

From the professional point of view, Now-days time can be considered as currency. Maintaining a freelance business can be a serious juggle, tangled up in constant changes of your schedule and trying to remember and identify each client and every haircut. While many professionals move into freelance life, a strong and simple tool to bundle up & organize the business easily is needed.

Arrow2Asset 4_2x.png
Statement sentance_Blue_twoRows.png
kadri-karmo-Y2fUWDDG64M-unsplash.jpg

Independant Hairdressers

Freelance Hair Care professionals

Small Hair Studios & Home Salons

Arrow_3.png

Target Audience

Who are the users?

WhatsApp Image 2021-11-18 at 1.17.35 PM.jpeg
Group 5.png
Group 5.png

Hairdressers!

  • Loving to work & craft with their hands

  • Looking for a flexible schedule & freedom to be spontaneous

  • Are not characterised as particularly technological

  • Looking for practical tools to help develop their business & lifestyle

  • Tend to Travel a lot, maintain an on-the-go lifestyle 

  • Love to work with people and create connections & fullfiling relationships 

 

Pain Points & Challenges

ChopChop Boo Hand_Black&White-03.png

Too many apps needed
to organize the business flow

Schedule | Portfolio | Client Media | Visit History Message Templates | Camera & Notes & More

ChopChop Boo Hand_Black&White-03.png

It’s confusing trying to Gather effectivly your images by groups to show clients work examples

Your images should have a propper place where they could be ordered by your choice & be shipped from to the world!

ChopChop Boo Hand_Black&White-03.png

Messy communication with clients around booking & desired hairstyles

It’s time-consuming and usually missing effectiveness.

Research

Potential Users interviews

I contacted 5 Hairdressers who maintain a freelance business and are meeting clients regularly. 

 

In our session, I focused on the key questions I've prepared and allowed them to express freely through each question about their daily routine, communication with clients, pain points and needs.

jonathan-cooper-mZYg9A0ZPNg-unsplash.jpg

Interview Questions

 How do you

reach new clients 

 What tools & apps are you using to communicate with your clients 

 About how many customers return for a second haircut 

 Are you using photos or reference images to get ready for a haircut 

 Do you tend to contact

the clients after the haircut ? Explain

the interaction. 

 What are your main challenges today

in achieving your

business goals 

 What tools & apps are you using to organize the calendar and daily schedule 

What do you love most

about your

hairstyling business 

Conclusions

Common problems:

- Remembering to Send followup messages.

- Remembering to take before & after pictures. 

- Maintaining a collection of  portfolio haircuts.

- Remembering who is who and getting ready for a haircut from scratch.

  • Most clients reach through recommendations & word of mouth. 

  • The most popular tools are casual messaging apps like WhatsApp & Messenger via Instagram or Facebook.

  • Calendars are very important, and the common Google one is comfortable to use. 

  •  Collecting references is usually made through phone / computer folder default system or at Pinterest. 

Pain Points & Challenges

ChopChop Boo Hand_Black&White-03.png

Too many apps needed
to organize the business flow

Schedule | Portfolio | Client Media | Visit History Message Templates | Camera & Notes & More

ChopChop Boo Hand_Black&White-03.png

It’s confusing trying to Gather effectivly your images by groups to show clients work examples

Your images should have a propper place where they could be ordered by your choice & be shipped from to the world!

ChopChop Boo Hand_Black&White-03.png

It’s Hard keeping Up with clients by Texting & messaging

It’s time-consuming and usually missing effectiveness.

A built-in portfolio collected by self created & customised tagging system.

Templates make it easy to communicate effectively & set your brand tone.

Feature List

Scissors (1).png

Client History through an image & info of every single haircut.

Scissors (1).png
Scissors (1).png
Scissors (1).png

Embeded Schedule synced with client pages makes it easy to get ready & set.

Solution

App Map

App Map_1.png

*

*

*

I focused on 2 task flows :

1. Adding new image - Main 

2. Viewing Client info - Secondary

 

Customer photos are inserted in an easy
Name & Tag Wizard

Phone only_New Image Landed.png

In this wizard, the user can:

  • Connect image with client name

  • Add tags to define & describe the image

  • Add related notes

  • Adjust the image: crop, doodle on & save to favourites

The tags and images are integrated into the
Daily Schedule

Chop chop Mockup_phone only.png

All the client visit history is located in the
Client Page

Chop chop_Client page_visit.png

Client page consist of:

  • Visits represented by tagged images

  • Quick action buttons based on templates

  • Tags describing the client preferences

  • Activity log (booking actions, visit history)

  • Contact details

Low Fidelity Wireframes

Task Flow 1:

Getting ready for a haircut

Task Flow 2:

Adding & tagging a new client image

View your daily schedule & get a quick look on client info for extra preparation

Schedule is synced with any calendar

Every Booking slot will include all the info you need- Images from previous visits- Tags highlighting types of hair & haircut preferences.

 

 

Need to know more?

Click on the client Card to navigate to the Client page.

Mask Group.png
Chop chop Mockup_Calander.png

That’s your booking month view, for a zoom-out glimpse on your business activity

Check any date & use the indicator marks to Easily locate free dates for booking / vacation!

Every Booking slot will include all the info you need
- Images from previous visits
- Tags highlighting types of hair & haircut p
references

Arrow 6_edited.png
Client Page_Client Info.png
Client Page_Visit History.png
Client Slot.png
Arrow 7.png

Ui Design

Considering Chop Chop a very visual, image based product, I chose to go for a clean, clear interface language. Keeping the user's profile in mind, I followed the need for the app to be a tool on the go, to be easy to read & react while the user is occupied with other activities. 

The logo of the Scissor hand was the first graphic element in the branding puzzle, and it suited well, in my perspective, to the playful product name.

I was looking for something witty yet approachable & fresh. 

Ui Design / Typography

Roboto Family was chosen to create a vibe of clear & responsible multi-purpose typeface all over the product fields.

A smell of americana, western feel yet adds discipline & good manners to the cartoonish style of the branding language.

Roboto.png
Roboto Slab Text Levels.png
Roboto Slab.png
Roboto Text Levels.png

Loader Concept

Branding / Typography & Graphic Choices

Fraunces was picked for a kick of goofy-cartoony-happiness, balancing the clean & flat approach with bits of thick italic groove.

Chop Chop Logotype is made out of this stylish weirdo, accompanied by the scissors hand element Created by Cristiano Zoucas from the Noun Project (motion lines added by me!)

Chop Chop Logotype.png
Scissors.png
Vector 76.png
Vector 77.png
Frame.png
Roboto Slab copy.png

Ui design & Branding / Color Choices

Primary colors - a simple contrast with two strong & bold main leaders + bright yellow, paired with 3 shades of grey to create hierarchy of quick actions & clean interface.

Color Palette.png

Ui design / Iconography

Icon family (regular & tiny)

Scissors.png
Vector-1.png
Vector.png
Boo Icon.png
+ ICON micro.png
ICONS_Tab System.png

Line & Solid Icons - The icons designed with line based eastethic and the clicked / chosen option combines blue pop of color to mark the selection.

Share ICON.png
Person ICON.png
Copy Link ICON.png
Note ICON micro.png
Brush ICON.png
Icon Grid.png
Message ICON-1.png
Call ICON.png
Note ICON.png
+ ICON.png
Templates Icon.png
Schedule ICON-1.png
Person ICON-1.png
Camera ICON.png
Message ICON.png
Search ICON.png
Schedule ICON.png
Portfolio ICON.png

Logo based Icon language