YSL Beauty Is Now Online
UX & UI Design
YSL Beauty’s first Middle East based direct-to-consumer (DTC) website hosted on Salesforce
COMPANY & DEPARTMENT
Company: Chalhoub Group. The Group is based in Dubai, UAE with retail networks across the GCC and Egypt.
Department: Digital Team, Beauty Vertical
DURATION
February 2019 - September 2019
PROJECT TYPE
Product Design
THE CHALLENGE
Creating a new website for YSL Beauty’s Middle East based direct-to-consumer website. The website had added functionalities such as engraving and online bookings.
All designs were approved by the brand manager of YSL at L’Oreal, as well as the global team based in France.
TOOLS USED
Adobe XD: for designing and mapping interactions
Zeplin: for sharing files and design specs with developers
Jira: for product management, logging issues, and testing
MY ROLE, SCOPE & METHODOLOGY
Role: UX & UI Lead working cross functionally with IT (developers), a product manager (external), and the YSL (L’Oreal) local and global teams. Additionally, I also made frequent contributions to the product roadmap.
Scope: Front-end design, design validation, UAT prior to launch
Methodology: Lean UX (think, make, check); agile with 2 week sprints
Problem Setting
THE FOCUS
The focus for this project was YSL Beauty and the website was a result of close coordination between the Chalhoub and L’Oreal teams. YSL Beauty’s DTC e-com website is based on Salesforce (similar to L’Occitane). Since L’Occitane designs were done at a RefApp level, elements from L’Occitane could be used on YSL Beauty with minimal customization.
THE REASON
YSL Beauty has two retail stores and has a presence at Sephora stores. There was a business need for YSL Beauty to be present online as customer journeys in luxury beauty tend to start online and end offline. Additionally, having an online presence would help the brand grow at a quicker rate.
The Website
We used an agile methodology when developing the website and the website was designed and developed in phases in both English and Arabic.
Phase 1 of the website included the core of the product and designs were provided for mobile, tablet, and desktop — mobile & desktop were the most prioritized.
Phase 2 of the product included additional features. The additional features were picked and prioritized after user research and interviews as well as understanding business needs and tech feasibility.
Visit the website here.
Additional Features
ENHANCED PDP
The idea behind an enhanced Product Display Page (PDP) is to increase engagement on the website. The enhanced PDPs contain:
Banners with more product information
Video tutorials
Complete the Regimen sections (where Salesforce’s AI module Einstein comes into play) where complementary products are bundled together so users can purchase a complete set
KIT BUILDER
Users can choose items from separate categories (as defined by business, in this case L’Oreal) to put into one kit and they would receive their products in a YSL pouch.
SHADE FINDER TOOLS
This is split into 2 parts:
Foundation Finder: this includes Match My Shade, which is a third party tool that helps match foundation colors across multiple brands, and Find My Shade, where users can select their undertone, and select a model whose skin tone resembles theirs, and the engine returns range of foundation matches.
Lip Finder: users can select their favorite color, underdone, and preferred finish, and the engine returns a range of lip color matches
CUSTOM CAPS & ENGRAVING FLOWS
This is where the user can choose a custom cap for their lipstick and have it engraved with custom messaging. Users can also choose to engrave other engravable products such as fragrances.