YSL Beauty — Rouge sur Mesure App Design

Designing usages never thought of before for an IOT companion app

This article shows both the strategic UX design and UI design phases as it is the first project I’ve covered and led all design phases. The product is not released yet so this is a confidential case study.

➔ Read L’Oréal’s Press Release

Context

YSL Beauty, continuing to assert itself as a bold, young, and avant-garde brand, has decided to disrupt the makeup industry again by launching the apex of lipstick personalization: Rouge sur Mesure or lipstick by you.

Goal

Starting from scratch we had to design an IOT companion app for the world’s first personalised lipstick printer to create, dispense, and manage one’s favourite shades while ensuring the adoption of a groundbreaking innovation.

Role

In a remote agile team of seven people both coming from Publicis Luxe and the client, I leading the whole design process from research to handoff. It was the first project on which I also lead the AD and UI Design.

Keywords : Consumer Research, Workshop Leading, Product Vision, Experience Mapping, Information architecture, Wireframing, UI Design / Prototyping, Design Handoff

1. Work Methodology

Rip the brief, start from scratch

Taking one step back from the client’s brief, a collaborative design thinking framework was set to make sure to design the most user centered experience possible while involvolving the client as much as the agency in all the upcoming phases, from start to finish.

Challenging the innitial brief implied to go back to consumer research but eventually would enhance the relevance of the end-product about to be designed, align all stakeholders during the whole time of the project and accelerate all the validation milestones.

The design workflow proposed to the client was based of the Design Council’s Double Diamond

1. Discovery

We have a lot to learn from consummers

User research

In order to identify consumers motivation to buy lipstick, and discovering purchase behaviours we could later translate into the end-experience, I wrote an interview guide. It was based on the stakes we identified with YSL Beauty and our assumptions about the lipstick consumer journey. We recruited 10 people to find the answers to our questions.

The interviews, conducted by both the agency and our client, gave us the first insights that would help us define the macro-experience, identify opportunities to innovate on the initial brief and draw the project’s main clusters of work.

User Interview guide & a notable quote we gathered from our interviewees

Workshop sessions

Rounding up all the newly acquired intel, I capitalised on our new findings to organise a week of four workshops that would make us synthesise them into actionable insights. Those insights would drive the whole experience as we designed it.

Working hand-in-hand with stakeholders, we defined two personas, the product’s vision & value proposition, draw the experience map, and brainstormed features ideas. This has heavily impacted the validation process as I would design starting from ideas we co-created with the client.

Eventually, we gathered to prioritise the areas of work and align on the lean workflow I conceived with the director of operations and the number of sprints to go through.

2. Development

Making sense of all this mess

Project framing

Aligned on the product’s vision and methodology of work, I granually defined the areas of work while setting up the app’s architecture. With a clear vision of the different user paths to design and their related screens needed, we bundled the work into 4 design sprints.

App’s architecture to work in Agile

Wireframes & user paths

Guided by an agile workflow with shifted UX/UI sprints, daily and weekly touchdowns, we were able to land the app’s architecture, wireframes and creative direction in record time, and in full remote.

Example of user flows to test

During this whole phase, 3 user testing sessions have been conducted to validate the user flows and identify new opportunities to improve the app and solve problems for the following iterations of work.

User testing session

The tight collaboration between creatives with the strength of a human-sized yet incredibly responsive team — from Publicis Luxe and YSL Beauty — was the key factor of success to this challenging design phase.

That’s a lot of wireframes…

2. Design

Gotta make this visual

With the first user flows an a clear view of the app’s architecture and key screens, we were ready to start working on the branding and crafting the final UI of the app, with an atomic design approach, anticipating the design system to build.

Artistic Direction

YSL Beauty already has a strong identity, so we were not starting from scratch. The real challenge was translating this identity to digital use and app standards. For Rouge sur Mesure, I crafted a set of bold icons and designed a home screen logo that recalled the top lid of the physical device, with a skeuomorphic approach.

UI Design

4. Delivery

That’s a wrap!

Handoff

With a clear take on the app’s architecture, ergonomics and creative direction, the last UI sprints focused on producing the last screens needed after user testing. I also worked on animating the micro-interactions on Principle and Framer, while simultaneously creating a rigorous design system to share for future rework, releases and client needs.

Animated screens to be added later

The final assets ready for handoff were shared with the dev team through Zeplin which was our main tool to assure quality insurance during design handoff and implementation.

5. Result

Here’s what it looks like in action

Thanks for reading!