Bleach London Conversational Website

The home of experimental hair colour, online.

Reimagining Bleach London's online presence around educational content, stylist-led consultations and a bespoke back office built from the ground up.

Scroll

Bringing the salon experience home.

Bleach London is the home of experimental hair colour. It started out as the world's first salon focused on colour rather than cutting, and now has four salons across the UK and US, along with a comprehensive retail range of bleach, toners, semi-permanent colours and hair care.

In 2020, Bleach set out to improve their online presence by doubling down on educational content, leveraging the knowledge of their expert stylists, and providing bespoke bleaching & colour recommendations to both new and existing customers.

Scope of work

  • Information architecture
  • Personas & archetypes
  • Sitemaps
  • User flows
  • Wireframing
  • Prototyping
  • UI & interaction design
  • Cross-functional delivery

Brand

Bleach London logo
01

Research & Personas

As with any major redesign, my involvement started with learning as much as I could about Bleach's customers and users. I organised interviews with Bleach employees and hair stylists, and ran field studies in two of their physical salons.

Based on the insights gathered, I categorised and documented the typical behaviours, goals and frustrations associated with DIY hair colouring. A set of four proto-personas was developed and later distilled into specific archetypes with the C-level team, used throughout the project to help launch tailored product sets on the future ecommerce platform.

Bleach personas and archetypes

Bleach personas & archetypes, distilled from stylist interviews and in-salon field studies.

02

Live Consultations Concept

The COVID-19 pandemic had an unprecedented impact on physical businesses. Some salons had to close temporarily, and stylists were furloughed. The team saw this as an opportunity for stylists to host 1-to-1 consultations with customers using, or interested in, Bleach products at home.

As the existing website didn't have the technical capabilities required, I was tasked with creating a concept for a proprietary live consultation solution. While this version wasn't implemented, it served as the blueprint for the upcoming Bleach online platform.

Customer consultation wires
Customer flow

Customers share looks that inspire them, discuss them with a stylist, and receive specific product recommendations as a result.

Stylist agent UX 1
Stylist view, inspiration

Stylists review the customer's reference looks side by side with their current hair details and history.

Stylist agent UX 2
Stylist view, recommend

A guided tool for stylists to assemble and send tailored product bundles during or after the call.

03

Hair Parties & Live Streams

In addition to 1-to-1 consultations, Bleach decided to host 1-to-many live streams called "Hair Parties", where stylists and celebrities could showcase Bleach products and how to use them at home.

Technically this started as a working prototype, with a simple Admin Panel where admins could create and schedule a Hair Party. Each event generated a Zoom Meeting ID used to broadcast the show on a standalone page, and could be manually started and ended from there.

End-to-end Hair Party creation flow

End-to-end Hair Party creation flow, from scheduling to broadcasting live.

04

The Bleach Back Office

The Hair Parties were a hit with at-home DIY-dyers, and what started as a quick experiment turned into one of the core services Bleach would offer. Building on this success, I was tasked by the CTO to imagine what a bespoke "Bleach back office" would look like. It would later be used as a combined CRM and CMS for the new Bleach platform.

I drew a comprehensive map of the back office based on the brief, the current website, and upcoming features the team wanted to introduce. We built it mostly from scratch using CoreUI for Vue.js as a base for rapid styling, so Bleach could own the entire end-to-end toolset.

Bleach back office feature map

Comprehensive map of the back office: Hair Parties, live chats, customers, content and products.

Stylist dashboard Hair Parties list (admin) Hair Party detail view Consultations list (stylist) Ecommerce product list Customer profile and orders
01 / 06

Stylist Dashboard

At-a-glance overview of planned Hair Parties, 1-to-1 consultations, and currently-selling looks and bundles on the website.

02 / 06

Hair Parties (Admin)

Admins schedule, edit and manage all upcoming and past Hair Parties from a single list view.

03 / 06

Hair Party detail

Each event has its own detail page for generating the Zoom link, attaching products and manually starting or ending the broadcast.

04 / 06

Consultations (Stylist)

Stylists manage their upcoming 1-to-1 consultations, review customer briefs and track the status of each booking.

05 / 06

Ecommerce catalogue

Content and product management for the full Bleach catalogue: bleach, toners, semi-permanent colours and hair care.

06 / 06

Customer profiles

A combined CRM view of each customer, with past orders, consultation history, hair details and preferences.

05

A Conversation-led Platform

In parallel, I was tasked with exploring what a conversation-led Bleach platform could look like. The brief: imagine an experience where customers land on a live chat and interact with stylists right away.

They could also use this conversational UI (or "CUI") to view past orders, sign up to upcoming Hair Parties & Tutorials, or change their Bleach account settings. I designed concepts and clickable prototypes used as a starting point for upcoming versions of the platform.

01 / 03

Orders & Tutorials

Customers use the CUI to check past orders and book upcoming Hair Parties & Tutorials, all through natural conversation.

02 / 03

Account settings

Users can change their account settings through the same conversational UI, with no separate forms and no context switching.

03 / 03

Hair details

Customers update their hair details within the CUI so the Bleach bot, or a live stylist, can provide better product recommendations.

06

Hybrid User Account

After refining the initial concepts and gathering feedback from stakeholders, I designed the user account as a mix of conversational UI and a more traditional UI.

The conversation with a Bleach bot or hair stylist would handle specific advice and product recommendations based on the customer's hair details and goals. The traditional interface handled everything else: past orders, signing up for Hair Parties & Tutorials, and updating user info.

07

Launch & Handover

My last couple of weeks at Bleach were spent collaborating on UI design with the in-house creative team, leading up to the release of an initial beta version of the platform focused on delivering a new and improved ecommerce experience.

The conversational UI and journeys would be worked on in parallel and released at a later stage, building on the foundations laid during this project.

Bleach mobile UI designs

Bleach mobile UI designs, handed over to the in-house creative team.

Want to know more?