Skip to main content
Explore the Interactive Prototype
Celine is a renowned luxury fashion house, yet its website feels more like a functional catalogue than a high-end boutique experience. Unlike competitors such as Gucci, Dior, and Yves Saint Laurent, (YSL) Celine’s site prioritizes efficiency over immersive storytelling, missing the subtle refinements that define luxury UX. This case study explores how to transform Celine’s digital presence by enhancing brand perception, improving navigation, and aligning product presentation with the elevated standards of luxury e-commerce.
Celine is a renowned luxury fashion house, yet its website design aligns more closely with multi-brand catalogues like SSENSE rather than the immersive, high-end boutique experiences seen in competitors such as Gucci, Dior, and YSL.
The objective of this project was to shift Celine’s digital shopping experience from a functional catalogue to a luxury boutique, emphasizing brand storytelling, refined UI, and high-end interactions.
A comparison of Celine.com with both luxury boutiques (Gucci, Dior, YSL) and multi-brand catalogues (SSENSE) highlighted key UX differences:
Celine (Before)
SSENSE (Catalogue)
Luxury Boutiques (Gucci, Dior, YSL)
Navigation
Static sidebar menu
Functional top nav
Progressive disclosure, minimal menu
Product Listing Page (PLP)
4-7 Items per row
Dense product listing
3-4 items per row, editorial-style
Product Detail Page (PDP)
Simple hover effects
Functional layout
Immersive storytelling, motion effects
Brand Presence
Minimal storytelling
Focused on usability
Strong brand visuals & narrative
Scroll horizontally to view the whole table
For example, observe how Celine’s Product Listing Page displays 4-7 items per row, similar to the dense product listing of a catalogue like SSENSE; whereas luxury boutiques only display 3-4 items per row.
Celine
SSENSE (Catalogue)
Dior
Gucci
Yves Saint Laurent
Celine
Large hero image
SSENSE
Large hero image
Boutiques
Large hero image
UX Heuristic
Aesthetic and Minimalist Design
Explanation
A single large hero image aligns with luxury branding by emphasizing high-quality photography. However, multiple images (like SSENSE) may allow for more dynamic storytelling.
Online luxury boutiques often integrate concierge-style chat features, offering clients an individualized boutique-like shopping service and reinforcing exclusivity. These are implemented with buttons and branded icons on the bottom-right corner of their pages.
Other boutiques' chat features
Gucci
Dior
YSL
This lead me to create for Celine's site:
My newly designed Celine chat button, featuring the ‘C’ from the ‘CELINE’ logo, for consistent branding
As a reflection of the savoir faire that crafts luxury fashion, luxury UX is a culmination of small, almost imperceptible details. For example, micro-interactions when a user hovers over a menu item reinforce the attention to detail that is present across the entire luxury experience. In addition, a soft background (present throughout redesigned site) subtly enhances the premium feel—elevating the overall experience without calling attention to itself.
The old hover effect, featuring a subtle bolding
My newly designed hover micro-interaction, featuring a dynamic underline effect
Another gap in the current Celine site involves an inconsistency of using both ampersands (“&”) and the word “and” in the menu. To maintain the consistency seen in other luxury UX sites, I standardized the menu to use an ampersand instead of “and” across all categories.
Celine’s current sidebar navigation menu, featuring both ampersands and the word “and”.
During the mid-project refinement, I identified an opportunity to enhance the individual product pages by elevating their descriptions. Drawing inspiration from luxury leaders like Dior, I transitioned from functional descriptions to evocative storytelling that aligns with Celine’s brand ethos.
By incorporating rich material details, historical references, and aspirational language, the product pages now better reflect the exclusivity and refinement expected in luxury e-commerce.
This change further supports the overarching goal of the redesign—transforming Celine’s website from a functional catalogue to a high-end boutique experience.
A series of quick hand-drawn sketches mapping out the homepage, product listing page, and product detail page. These focused on layout, navigation patterns, and supporting user goals with a clear hierarchy.
Clean digital grayscale wireframes were created to refine spacing, alignment, and visual flow. The goal was to balance luxury aesthetics with clarity and functionality.
Homepage
Product Listing Page
Product Detail Page
To align the visual direction with the refined elegance of luxury fashion, I developed a minimalist style guide that emphasized restraint and clarity. The typography was chosen to feel timeless yet contemporary, while the neutral color palette created a sense of quiet sophistication that allowed product imagery to shine. Grids and spacing were carefully considered to maintain balance and structure, creating a clean, editorial feel across all screens.
After
My redesigned Homepage, featuring the top navbar and centred title
After
My redesigned Product Listing Page, demonstrating the updated hover effect on the first product
After
My redesigned Product Detail Page, with an updated gallery and product description.
Completing this case study in just three days reinforced my ability to rapidly assess UX challenges, design effective solutions, and document them efficiently. In fast-paced environments, execution speed is just as crucial as strong design thinking—balancing both ensures impactful, well-structured UX outcomes.