DIOR

E-commerce

Aligning two entities on a same vision to develop a global platform.

  • UX/UI Design

Expertise

UX/UI Design

Responsive Design

Design System

Prototyping

Timeline

  • From 2018 to 2020 — Made at DIOR X Mazarine agency

Context & challenge

DIOR is a company historically split into two entities: couture and perfume. Very anchored in image and artistic requirement, this luxury house must adapt to new behaviors and uses of e-commerce.

The design of the first “ONE DIOR” platform revealed the challenge to align these two entities on a same vision, to develop a global platform that would create synergies for both brand and customers.

What follows are snippets of the efforts I've been part of and contributed to during my time working on the project at Mazarine agency. Let this serve as a summary of the highlights.

Designing a MVP

Initial workshops ran by an external UX agency set clear objectives, product roadmap & priorisation and agile methodology.

While these workshops initially focused on broad concepts, UI production began afterward, divided among our design team. I played a key role in the iterative UI design process, aimed at redesigning the e-commerce platform over ten months.

Landing page — Mobile snippets.

Product grid to product detail page — Mobile snippets.

Checkout flow — Mobile snippets.

The first-ever design system at DIOR

Sponsored by a strong in-house engineering team for the first time at DIOR, I have developed the first design system for the "ONE DIOR" project to enhance decision-making and scalability aiming to adapt to various departmental and market needs.

This system was adopted by over 15 team members and was made accessible to external stakeholders when necessary.

The first ever design guidelines created at DIOR — Dedicated to the digital & design team.

Challenge of ONE DIOR design system — Creating agnostic UI components to fit different market needs.

Designing for a roadmap

The main CX pilar on the "ONE DIOR" project is to offer to the customer the same level of product personalization than he can get in physical store: the UX and user flow are done accordingly and with front-end constraints.

Connected cross-sell products were previously missed on various pages due to unclear offerings. The editorial approach and imagery is key to highlight these features subtly on the product detail page.

Adding "charms" (i.e pins) to a pre-existing product (shoes) — The user flow is made directly in the product detail page to avoid unnecessary steps.

Design that scales

I defined and scaled UX interaction patterns accross stategic product pages of the e-commerce platform to increase revenue.

Bag customization made simple — Optimized user journey on product page, linear flow, emphasized editorial content, ensured clear validation.

Importance of prototyping to ease stakeholders validation and move forward.

More fonctionnal pages were designed, covered by a strong design process, from gathering insights from customers, to complete user flow and prototyping.

Store locator revamping — Working on all edge cases to cover all specificities.

Prototyping the final solution — Filter and physical stores list.

Prototyping the final solution — From physical stores list to a store detail page.

Exploring new navigation patterns

Some editorial touchpoints were good opportunities for navigation explorations and nourishing the digital stakeholders team at DIOR.

A picture is worth a thousand words but a UX/UI prototype is worth thousand pictures and enable to convince on a design vision.

A 'stories' module — Browse seamlessly looks intro an interactive mobile that enhance discovery.

Results & impacts

Increase of DIOR's average customer basket value through developed features. Six months after collaboration, DIOR established its own internal product team with specialists in UX and UI design, highlighting their commitment to a comprehensive product approach.