Bleach London

Bleach London

Bleach London

Online platform redesign (UX/UI)

Online platform redesign

Online platform redesign (UX/UI)

Information Architecture — Personas — Sitemaps — Wireframing — Prototyping — UI & Interaction design

– Information Architecture
– Personas
– Sitemaps
– Wireframing
– Prototyping
– UI & Interaction design

– Information Architecture
– Personas
– Sitemaps
– Wireframing
– Prototyping
– UI & Interaction design

– Information Architecture
– Personas
– Sitemaps
– Wireframing
– Prototyping
– UI & Interaction design

– Information Architecture
– Personas
– Sitemaps
– Wireframing
– Prototyping
– UI & Interaction design

Bleach London is the home of experimental hair colour. Starting out as the world’s first salon focused on colour rather than cutting. Now with 4 salons across the UK and the US, the brand has also become the go-to spot for at-home DIY-dyers, with a comprehensive range of bleach, toners, semi-permanent colours and hair care retail products.

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

Bleach London is the home of experimental hair colour. Starting out as the world’s first salon focused on colour rather than cutting. Now with 4 salons across the UK and the US, the brand has also become the go-to spot for at-home DIY-dyers, with a comprehensive range of bleach, toners, semi-permanent colours and hair care retail products.

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

Bleach London Logo

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

Based on the insights gathered, I categorised and documented the current customers' typical behaviours, goals and frustrations associated with DIY hair colouring.

A set of 4 initial proto-personas was developed and later distilled into specific 'archetypes' with the help of the C-level team. These would in turn be used throughout the project and help with the launch of new tailored product sets on the future ecommerce platform.

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

Based on the insights gathered, I categorised and documented the current customers' typical behaviours, goals and frustrations associated with DIY hair colouring.

A set of 4 initial proto-personas was developed and later distilled into specific 'archetypes' with the help of the C-level team. These would in turn be used throughout the project and help with the launch of new tailored product sets on the future ecommerce platform.

Bleach Personas & Archetypes

The COVID-19 pandemic had an unprecedented impact on physical businesses, and Bleach London was not spared – some salons had to be temporarily closed, and stylists had to be furloughed. But the team saw this as an opportunity for stylists to put their expertise to good use, by allowing them to host 1-to-1 consultations with customers using (or interested in using) Bleach London products at home. The idea was to bring the Bleach salon experience into their customers' homes.

As the existing website did not provide the technical capabilities required to enable such consultations, I was tasked with creating a concept for a proprietary and bespoke live consultation solution. While this version wasn't implemented, it would serve as the blueprint for the upcoming Bleach online platform.

The COVID-19 pandemic had an unprecedented impact on physical businesses, and Bleach London was not spared – some salons had to be temporarily closed, and stylists had to be furloughed. But the team saw this as an opportunity for stylists to put their expertise to good use, by allowing them to host 1-to-1 consultations with customers using (or interested in using) Bleach London products at home. The idea was to bring the Bleach salon experience into their customers' homes.

As the existing website did not provide the technical capabilities required to enable such consultations, I was tasked with creating a concept for a proprietary and bespoke live consultation solution. While this version wasn't implemented, it would serve as the blueprint for the upcoming Bleach online platform.

In addition to 1-to-1 consultations, Bleach London 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 would initially be built as a working prototype, with a simple Admin Panel, where the user could create and schedule a Hair Party, which in turn would generate a Zoom Meeting ID used to broadcast the show on a standalone page. Hair Parties could also be manually started and ended from there.

I mapped out a simple user flow for the initial release of the feature.

In addition to 1-to-1 consultations, Bleach London 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 would initially be built as a working prototype, with a simple Admin Panel, where the user could create and schedule a Hair Party, which in turn would generate a Zoom Meeting ID used to broadcast the show on a standalone page. Hair Parties could also be manually started and ended from there.

I mapped out a simple user flow for the initial release of the feature.

E2E-Party-Creation-Flow

Admins and stylists could create a Hair Party days before the event, using their Zoom account to generate a stream link shown on a proprietary page.

Admins & stylists could create a Hair Party days before the event with their Zoom account to generate a stream link (tap to zoom)

The Hair Parties were a hit with at-home DIY-dyers, and so what started as a quick experiment would now turn into one of the core services Bleach would offer.

Building upon this initial success, I was tasked by the CTO to imagine what a bespoke "Bleach back office" would look like. This product would later be used as a combined customer relationship and content management system for the new Bleach London web platform.

I drew a comprehensive map of the back office, based on these requirements, the current website, and upcoming features the team wanted to introduce in new iterations of the platform (more on that later).

The Hair Parties were a hit with at-home DIY-dyers, and so what started as a quick experiment would now turn into one of the core services Bleach would offer.

Building upon this initial success, I was tasked by the CTO to imagine what a bespoke "Bleach back office" would look like. This product would later be used as a combined customer relationship and content management system for the new Bleach London web platform.

I drew a comprehensive map of the back office, based on these requirements, the current website, and upcoming features the team wanted to introduce in new iterations of the platform (more on that later).

Bleach Back Office

The back office allows admins to manage Hair Parties, live chats, customers details, website content and products (tap to zoom)

After multiple iterations on the back office features and information architecture, it was time to start designing its interface. The requirements were clear: we were not to use a bootstrapped, pre-built backend solution, as the C-level team wanted Bleach to own the entire end-to-end journey and toolset.

Working closely with the tech teams, we set out to build the back office mostly from scratch but using the 'CoreUI' UI Component library for Vue.js as a base for rapid styling.

After multiple iterations on the back office features and information architecture, it was time to start designing its interface. The requirements were clear: we were not to use a bootstrapped, pre-built backend solution, as the C-level team wanted Bleach to own the entire end-to-end journey and toolset.

Working closely with the tech teams, we set out to build the back office mostly from scratch but using the 'CoreUI' UI Component library for Vue.js as a base for rapid styling.

In parallel, I was tasked with exploring what a conversation-led Bleach platform could look like. The brief was to imagine an experience where customers would land on a live chat and interact with stylists right away. They could also use this conversational UI (aka 'CUI') to view their past orders, sign up to upcoming Hair Parties & Tutorials, or change their Bleach user settings.

I designed some concepts and clickable prototypes, which would be used as a starting point for upcoming versions of the Bleach platform.

In parallel, I was tasked with exploring what a conversation-led Bleach platform could look like. The brief was to imagine an experience where customers would land on a live chat and interact with stylists right away. They could also use this conversational UI (aka 'CUI') to view their past orders, sign up to upcoming Hair Parties & Tutorials, or change their Bleach user settings.

I designed some concepts and clickable prototypes, which would be used as a starting point for upcoming versions of the Bleach platform.

Using the CUI to check past orders and book upcoming Hair Tutorials

A user changing their account settings
through the CUI

Customers could update their hair details within the CUI, for better product recommendations

Upon refining the initial concepts and getting feedback from stakeholders within the business, I designed the user account section as a mix of conversational UI and a more traditional UI.

We would rely on conversations with a Bleach bot or hair stylist whenever the customer would want to ask for specific advice, or get product recommendations based on their specific hair details and goals.

Upon refining the initial concepts and getting feedback from stakeholders within the business, I designed the user account section as a mix of conversational UI and a more traditional UI.

We would rely on conversations with a Bleach bot or hair stylist whenever the customer would want to ask for specific advice, or get product recommendations based on their specific hair details and goals.

Bleach Platform - Hair Info Details

The traditional interface would be used for other user account features, such as seeing past orders, signing up for Hair Parties and Tutorials, or updating user info.

The traditional interface would be used for other user account features, such as seeing past orders, signing up for Hair Parties and Tutorials, or updating user info.

Bleach Platform - User Account

My last couple of weeks working with 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.

My last couple of weeks working with 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.

Bleach Mobile UI Designs

Please drop me a line for any further information on this project or any of the deliverables.

Please drop me a line for any further information on this contract or any of the deliverables.

Please drop me a line for any further information on this project or any of the deliverables.