Creating a proof of concept to build trust and collaboration.
Full case study available on request
Conception
Prototyping
UI Design
In early 2022, Chanel began developing digital editorial experiences and revamping BtoC tools to strengthen its brand culture, including redesigning a virtual make-up try-on.
This proof of concept allowed Chanel stakeholders to engage in design explorations that shaped future business opportunities.
After testing the existing tool, I developed wireframes and user flows to address identified issues.
User interviews provided insights into motivations and preferences, informing valuable business strategies. Synthesizing feedback guided ideation, resulting in actionable feature proposals.
Wireframes & user flows — Enable to see the bigger picture.
In ideation, I moved back and forth between sketches & prototypes.
Prototyping was central to this project emphasizing clear visualization for stakeholders and influencing the design outcome. My approach prioritized dynamic renderings over detailing every user flow edge case.
My design process breakdown for this specific project — Constant back and forth between sketching and UI design. Prototyping has nourished a lot of my UI design principle.
A new way to explore: XY navigation, between inspiration & application.
This concept introduces a first level of horizontal navigation between main sections, presenting one application zone at a time. This method emphasizes an editorial approach over traditional button-based navigation, utilizing the reels UX pattern. This approach conciliates both user experience and uniqueness (brand DNA).
First level of navigation — Address at the right time the makeup category to the user with and editorial approach.
Looks are the primary way users discover and try new makeup, motivating Chanel to promote seasonal products through the reels UX pattern and featuring trusted influencers. This approach not only appeals to users but also helps measure retention rates.
Focusing on looks while navigating — It is the main pattern to shop new make-up and make discoveries.
Potentials modules of the look section hub — From hero products to look tutorials.
Potentials modules of the look section hub — From hero products to look tutorials.
Potentials modules of the look section hub — From hero products to look tutorials.
Animation is an important part of my design approach. It can significantly alter the perception we have of a user interface. By using it, we can convey the efficiency of a product to the end user.
Animation also strengthens navigation, architectural information, consistency between screens, and the general comprehension of user flow, while also reducing cognitive load.
Creating a seamless navigation despite screen types — Thanks to a strong prototyping expertise and mental visualisation.
Prototyping — Exploring a look.
Navigation — Top part for the 1st level of navigation and transverse features.
Navigation — Bottom part for contextual navigation.
This virtual tool, while helpful, may not fully replicate the physical application of makeup. User insights suggest features like viewing the product on various skin tones for a realistic effect, providing product composition details, application advice, and timely information delivery.
Product detail page — See details with carnation view & quick add to cart action.
Others application hubs follow the same navigation pattern and are only dedicated to this specific application zone.
Users can explore and navigate through these zones with an editorial approach, utilizing live camera support for visual content. Specific shades, such as best-sellers or new arrivals, are displayed for each application zone, and filtering occurs while the live view is active.
Prototyping — Lips section.
A one scroll page — Giving rhythm with editorail break.
Explorations includes additional features such as, favorite products, product scanner to access tutorials, a user product library and a browsing experience based on user routines and preferences.
These features could enhance retention, but they require evaluative research to assess their impact versus effort.
Prototype — Wishlist with quick actions.
Prototype — Product library to access dedicated content.
Transverse features and application preferences — Creating a seamless experience across the Chanel ecosystem.
Product scanning — Access exclusive content like tutorials on products user owns.
Navigation customization — From onboarding to settings.
Creating a cart products linked to Chanel customer’s account for a seemless navigation between different touchpoints.
After a positive response, this proof of concept would be use to craft a more detailed, strategic design brief for a future production.
Almost a year after this PoC, I was pleased to find that the core features and main UX patterns were retained in the final client-side implementation.