Product Designer | User Experience Designer
banner_header.png

Belle: Salon Appointments Online | Pedram Vahabi

Belle is a design-driven, web-app booking system for managing bookings and payments in the salons. With an AI system to predict customers' behavior and automated marketing of products and services.

 

DESCRIPTION —

A complete and innovative solution for customers' management, bookings and payments in salons.

ROLE —
Product designer

DATE —
Nov 2016 - Apr 2017


Belle ( previously known as Bangs) is a design-driven, web-app booking system for managing bookings and payments in salons. It incorporatesan AI system to predict customers' behavior and automated marketing.

 

Introduction

Currently the project just spin out of the Founders Factory's Incubator, however, it has grown to an independent company with a CEO, CTO, and a Product Owner. The team (of just Belle project) is growing fast, and soon it will be a team of over 10 people.


The project has gained a great deal of consensus from all involved stakeholders, attracting L'Oréal to invest millions of dollars (figures not yet revealed) directly into the company as well as planning a worldwide Roll Out in 2018.


Who was the client?

The project was created as part of the Founders Factory's Incubator, under the Beauty sector, in partnership with L'Oréal (How does Founders Factory work?)


What did I do?

  • Creative Direction
  • Usability Testing
  • UX Research
  • Brand identity
  • Development
 
 

The challenge

The beauty sector is growing fast, especially the hairstyle and fashion market.
The new millennials' generation uses technology at every decision-making stage and the influence of social networks has a great impact in all areas.
 

The challenge was to find a billion-dollar opportunity that contributed to solving a big problem and helped bring innovation in the beauty industry.

 

 

Project Process

While the project wasn't a linear process, for the sake of presenting this case study in logical parts, I've broken down our product cycle into five main phases:

  1. Problem discovery
  2. Solution discovery
  3. UI
  4. Development
  5. Iterations
 

1. Problem discovery

We decided to research the wide range of problems in the beauty industry, and we started using a human centred design and lean start-up approach from the early stages of product development. We were clear about our constraints:

  • We did not have a lot of time
  • We needed to measure the impact of anything we built
  • We wanted to be able to produce something that could scale quickly

As a Product designer, I began my research with three major activities:

  • User interviews
  • Personas
  • Opportunity Workshops
 
 
IMG_0307 (1).JPG

In the first phase of the process, given our unique type of collaboration with L’Oréal, we started to conduct a series of interviews and opportunity workshops with the various internal departments.

Our purpose:

  • Finding growing markets
  • Identifying potential growing products
  • Discovering pain points
 
 

Below, a list of the stakeholders' problems we found.

Beauty sector's problems:

  • No access to consumers’ data in the salons (trendy hairstyles, color, product preferences etc ...) due to the software currently used and the fragmented market
  • No possibility to predict sales in the saloons and to identify new market trends based on customer activities
  • Product Warehouse management

 

We've identified many other issues in the Beauty industry, however, I created a list of those related to the product Belle.

 

After conducting the research with L'Oréal we identified other stakeholders related such as the salons and the salons' customers, so we started to conduct interviews with various salons' managers, receptionists, hairdressers and customers.

By conducting over 10 interviews with several salons and employees we identified the following issues:

Salons' problems:

  • There are no products covering all phases of salons management: from booking to inventory management and payment
  • Personnel Management
  • Very old softwares used (not accessible from smartphones or from home)
  • Expensive softwares used
  • Few marketing tools

Consumers problems:

  • Consumers are unable to get the latest style trends and do not know where the best hair stylists are
  • Many salons are not on Treatwell and other platforms (very fragmented market)
  • Many people never change salon and style for fear of an unfit hairstyle

After identifying some issues in the industry, we conducted a competitor and benchmarking analysis with the Business Development and Data Scientist's team, in order to map the list of competitors and their features.

  • Bad UX
  • Bad Information Architecture
  • Not multi-device supported
  • Bad customer support
  • Lack of important features
  • Bad business model

 

Two potential solutions:

 

B2C
A growing, very competitive market due to the use of smartphones

B2B
A very old and fragmented market, with no data analysis and non-cloud based applications

We ended up choosing the B2B because we found it a fascinating challenge to design technology for someone who is tired of it. Also, given our limited time, getting testing data for this user type was going to be much easier to get into the market.

 

2. Solution Discovery

To collect our initial research findings in one place and to provide the team with a central point of information regarding the project, I wrote a detailed brief.

Problem

In the brief, we defined the problem that we wanted to solve as follows:
60% of the salons still use paper and pen to handle bookings and do not collect customer data because the software is too expensive and very difficult to use.
There are no softwares able to handle all the bookings' stages:

  • Booking
  • Payment
  • Inventory management
  • Marketing and promotions

Solution hypothesis

We defined our proposed solution as:
Create a free design-driven platform to help reinvent the salon appointments' applications.
The goal is to collect data and help salons to better understand their customer's needs.

Approach

We defined our approach as:
Create an MVP that would allow us to distribute the product quickly in just 4 months and then continuously and iteratively improve it.

Generating rough concepts

To get both conceptual and usability feedback, we performed tests using a mix of paper, InVision and Principle prototypes. In two rounds of tests, we tried over a dozen concepts, with the most interesting ones presented below:

Assumption: Build an Application for iPad and Android
Goal: Create a tablet application so that each salon can handle appointments very easily.
User feedback: Negative, many salons have more than 20 stylists to manage daily. The tablet is too small to visualize the entire calendar and manage more than 5 stylists easily.

 
 
 

Intro - Paper prototype

Calendar - Paper prototype

wireframe_tablet.png
 

 

Assumption: A Voice Assistant could help salons speed up the booking management.
Goal: Create a voice assistant that helps you make reservations quickly.
User feedback: Negative, there is often a lot of confusion in the salons/parlours, so the system would have had trouble when it came to properly recognising words.
During rush hours there may be even more than 3 receptionists working simultaneously on different telephone lines.

 
 
 
 

Assumption: The calendar is the main feature of the product.
Goal: Identify the core feature in order to optimize the user flow.
User feedback: Positive! The structure of the calendar and its information architecture got a positive response in the initial stages of the product.


Participant observation

By observing the receptionists and the salons’ managers interact with the existing platforms, we identified the most important features and many issues.

This also allowed us to better define the information architecture and assess some of the future UI choices.


User story mapping

By organising a User Story Mapping workshop, we identified primary and secondary functionalities for a short and long term vision.
We printed out the various flows of our competitors and tried to find the best flow for users.
Below you will find the outcome of the user story mapping workshop that our team completed.
This allowed us to identify the MVP of the product in order to access the market and be competitive.
 

 
 


List of features for our MVP:

  • Login
  • Forgot Password
  • Multi Salon Chooser
  • Information Architecture
  • Dependencies
  • Error prevention
  • Notifications
  • Booking
  • Calendar Interface
  • Client
  • Service
  • Stylist
  • Navigation



With this list of features, I began drawing various user flows and defining the platform’s information architecture.
 

 
 


3. UI

Translating concepts into UI

Based on our wireframes, we designed UI concepts that reflected everything we learned thus far, and created a consistent design across devices.

I based my visual explorations mostly on the following principles:

 

Principle 1:
Keep UX and Interactions consistent across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes.

To maintain the platform’s stability across multiple devices I started to design mobile-first with a fluid layout that followed the same principles of interaction of  mobile native applications. The idea was to prioritise information (due to the reduced space available), and to speed up user flows.

 

Two main layers were defined:

Layer 0: Calendar
Layer 1: Side Navbar

 

Layout

 


Principle 2:
Optimize the flow for the most frequently used functionalities in the platform.
 

Principle 3:
Reduce the cognitive load and perception of transactions between sections and pages, by creating transactional and animation effects to enhance the perception of velocity and linearity.
 

 
 

After this stage, I’ve started discovering Brand solutions. Below is the outcome:

 
 
 

After creating guidelines for the UI and defining its principles, I started creating some high-fidelity prototypes with Principle to show the micro-actions and user flows.

Based on some of our assumptions, I’ve created a multi-functional sidebar nav, to allow the user to manage everything in it.

 

The idea was to keep a consistent design across devices for an intuitive and straightforward experience.

 

 

Having created the sidebar with the same mobile dimensions, I was able to conduct many user testings and to quickly test different user flows.
 

 
 
 


4. Development

Once we tested the platform and quickly assessed many solutions, we did the setup of an agile board for the development side and began creating all user stories.
Since the features were so many and the platform was very complicated, I tried to involve the users at all stages of the process and conducted frequent usability tests, initially with lo-fi and hi-prototypes before I introduced it into every sprint.

All the front-end part was developed by me using HTML5 and SCSS.
See a piece of the code on Github →

The more complicated the platform began, the more I had to define clear metrics to evaluate the design on it.
I've conducted usability tests using the same metrics throughout all tests to compare the same tasks with every release of the product. This has allowed me to see long-term improvements.

Please find below an example of the usability testing I've conducted.

UX KPI's Belle

Usability Testing Results

Usability Testing Results

 

Reflection & Projection

We took an infrastructure approach to a large problem and decided to create something that could potentially have a bigger more long-term impact than something that focused on immediate needs.

We wanted to do something that only design and technology could do—to revolutionize the beauty sector. Redesigning the experience of products that have been out there for 20 years was a challenging and complex process.

Looking back, there were many things I could have done to bridge the gap. For example, I could have leveraged the on-boarding process to not only introduce features, but also the mental model. In the same vein, I could have used progressive reduction principles to gradually fade away the device while simultaneously bringing forward its functions. The list goes on.

On a broader level, I've become more adept at testing concepts earlier using the right prototyping tool and at the right fidelity. For example, I've learned to use scrappy wireframes to isolate UX from UI testing to show more complex interactions.

 


Other

Booking widget

 
 

iOS App for customers