Designing and engineering a sales app for L'Oréal

The Sales & Marketing teams at Kérastase Spain approaches me with a singular question: could we build a software application that helps increase not so much the products sold to our professional channel partner (hair salons), but how much our hair salons sell through to their customers?

This is a problem that is not typically covered by traditional enterprise CRM systems, who are typically more preoccupied by how much is directly sold to customers, nor by any other ready-made enterprise solutions.

As a problem lies at the intersection of business, design and software development, and I gladly pick up the hat (beating some much larger agencies for the pitch!)

Analysis and ideation: defining the problem before jumping to the solution

The first step is to accept that we do not know much about the professional haircare products and services business, or about L’Oréal’s sales and marketing process.

So we set out to find out by relentlessly asking questions and using true-and-tested techniques in requirements gathering and Human-Centered Design:

• We work closely with management to understand L’Oréal’s business strategy, objectives, and processes. This is the raison d’être for the project in the first place.
• We interview sales reps and hairdressers, placing the potential users at the heart of our creative process, and listening to their pain points. For this project, we accompanied several sales reps in their sales routes across Spain, visiting hairdressers and getting to know the entire sales process.
• We further complemented this process by interviewing other sales reps by phone, thus covering a large proportion of the potential user base.
• We brought together sales and marketing management in a Design Thinking workshop, cementing all the ideas

This entire process was carried out very efficiently - it only took a couple of weeks (and could have been further compressed to days) and yet laid the groundwork for the rest of the project.

Iterative design: working from low to high fidelity to efficiently shape solution

In parallel with our business and user exploration stage, we start iterating over design ideas. First, we use simple hand sketches to explore as many ideas as possible. We then move to our low-fidelity wireframing tool (Balsamiq), and Excel (yes, that Excel!) as a makeshift back-end that allows us to model some of the most complex and numerical aspects of the app - but still at a breakneck speed and without writing any code. The idea in early design is to favor breadth over depth in order to explore a great number of ideas as fast as possible.

We settle on the concept of “action plans” developed between the sales rep and the customer, and following this core loop:

1. Customer diagnostics

The sales rep diagnoses previous sales period with the hairdresser (the customer).

2. Marketing & Sales Support

The sales rep shows what marketing & sales support Kérastase can offer for that period

3. Customer objectives

Sales rep and customer agree on a set of objectives for the next period.

4. Shareable summary

Everything discussed in the plan is shared with the customer

As the design ideas become clearer, we code a first interactive prototype in a few days and show it to the customer, who gives the go-ahead for the implementation stage.

Engineering: building with the right tools to meet the business and user goals

As it becomes clear what to build, we start pondering how to build it. Aside from the requirements uncovered in the analysis and design stages, we know that we want a fast and responsive UI - as we believe that business users too deserve beautiful and fast UIs.

To choose the tech, I make sure that it conforms to these guidelines:

• Talent and availability (including my own skill!)
• Conformance to requirements and user stories
• Future scalability

I therefore settle on React, the open-source technology used to build the Facebook and Instagram front-ends, with Google Firebase and Node.js as our back-end technologies.

Over the following weeks we develop V1 of the solution, and as we are getting close to launch we pass all of L’Oréal’s compliance and cybersecurity tests with flying colors. This includes integrating the application with L’Oréal’s SSO service, which we miraculously do in a day of development.

Launch and beyond: iterating and growing the product

The solution is launched to great success, with outstanding usage metrics. A few users report their surprise at “finding a business software that feels great”. The formula for this success is simple, and yet is often forgotten:

• Understand the business objectives and requirements to a tee
• Elevate the user, listen to their needs
• Pick technologies that are aligned with all of the above

The technology has been expanded from Kérastase to all of L’Oréal’s professional products division. It is currently in use by all of their sales reps, who have developed well over a thousand business plans for their customers in a short time.

As the app enters an iterative improvement cycle, I bring in more specialized talent and implement new product management and software development methods and practices.

This business case illustrates how to use agile methods for software development in very large enterprise settings. Hope you enjoyed it!