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.
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.
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.
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.
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.
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.
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.
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.
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!
