01
Introduction
Atelier is a luxury fashion retailer offering curated collections from premium international brands through multiple digital touchpoints. As the business expanded across five platforms, the customer experience became increasingly fragmented, with inconsistencies in navigation, shopping flows, and visual language. These differences made it difficult to deliver the cohesive, high-end experience customers expected while also slowing product scalability for internal teams. The challenge was not simply to redesign individual interfaces, but to unify the entire digital ecosystem under a shared product vision. Through user research, stakeholder collaboration, and strategic UX decisions, this project focused on creating a consistent commerce experience supported by a scalable design system. The result was a connected ecosystem that strengthened the customer journey while establishing a foundation for future growth.
02
Overview
Role
Design Lead
Timeline
10 weeks
Platforms
Responsive web · Mobile app · Admin portal
The business challenge
The premium fashion e-commerce market is highly saturated, with many brands competing through discounts, trend-driven collections and visually similar shopping experiences. As a new direct-to-consumer brand, ATELIER needed to establish trust, communicate premium craftsmanship and create a distinctive digital experience that reflected its brand values while remaining easy to shop.
03 — Product vision
Create a premium digital shopping experience where discovering fashion feels as intentional and refined as visiting a luxury boutique — combining timeless design, effortless browsing, and a seamless purchase journey that builds lasting customer trust.
04
The problem
01
Business problem
Premium brands compete in crowded spaces where visual identity is diluted by promotional content.
02
User problem
Cluttered interfaces and inconsistent layouts make browsing overwhelming and pull focus from the products.
04
Market observation
Retailers prioritise campaigns and content density over clarity — effective short-term, but it compromises premium perception.
The opportunity
Design a shopping experience where the product becomes the hero. Swiss Design principles — structured grids, refined typography, generous whitespace, clear hierarchy — reduce cognitive load and help users decide with confidence.
05
Goals & success metrics
What the product needed to achieve, and how success would be measured.
Create effortless product discovery
Clear navigation, intuitive filtering, consistent hierarchy.
→
Target
Higher product discovery rate
Build trust through simplicity
Reduce visual noise; let products become the primary focus.
→
Target
Higher user trust
Create a scalable design system
Reusable components that keep every touchpoint consistent.
→
Target
Design system adoption
Simplify the purchase journey
Fewer steps, predictable interactions from selection to checkout.
→
Target
Checkout completion rate
06
Research approach
Understanding how premium shoppers evaluate products, build trust and decide.
5
User interviews
3
Competitive reviews
5
Usability tests
2 weeks
Research window
4
Key insights
What surprised me
I expected price to be the strongest trust signal. Instead, every participant judged the brand through its product photography before looking at price, specifications or reviews.
User interviews
5 premium fashion shoppers · Ages 28–45 · Bought premium clothing online in the last 6 months
Competitive review
Fast fashion · Luxury retail · Premium DTC
Design references
Swiss grid systems · International Typographic Style · Editorial photography
Usability testing
Task-based · Browse → checkout · Cross-device consistency
07
Key findings
Four recurring patterns — directional rather than statistically representative, each informing a design decision.
100%
Finding
Quality is judged through product photography before price or details.
Opportunity
Lead with large, authentic product imagery; minimise interface distractions.
60%
Finding
Visual clutter reduced trust and increased abandonment.
Opportunity
Reduce promotional noise, simplify layouts, prioritise products over UI.
80%
Finding
Brand consistency broke down across digital touchpoints.
Opportunity
One design system with shared components across every platform.
100%
Finding
Shoppers preferred curated choices over overwhelming selection.
Opportunity
Curate the catalogue to reduce cognitive load and support confident decisions.
The pattern behind the patterns
The storefronts perceived as most premium embraced clarity over complexity. Premium wasn’t created by adding more — it emerged through restraint, hierarchy and deliberate design.
08
Audience & persona
Three segments shaped the experience; one shopper from the primary segment guided most decisions.
Primary
Intentional buyers
Build a long-lasting wardrobe and carefully evaluate quality before purchasing.
Secondary
Busy professionals
Shop on mobile between meetings; value speed, clarity and convenience.
Occasional
Gift buyers
Purchase for others and rely on guidance, sizing and easy returns.
Creative Director · Beirut · 34
Lina Haddad
Buys few things, chosen well. Balances a demanding career with a busy personal life, preferring timeless pieces over trend-driven purchases.
“I want shopping to be calm, considered and reliable — so I can focus on the things that matter.”
Goals
Find quality pieces and brands she can trust · A calm shopping experience · Confident decisions · Fast, effortless checkout
Frustrations
Too many checkout steps · Confusing labels · No real reviews · Slow on mobile · Unclear delivery and returns
09
Competitive position
Where the category is crowded, and the gap worth taking — the high-editorial / high-luxury quadrant was effectively empty.
The gap
Two rows nobody owned — grayscale-led imagery and true cross-surface consistency. Calm by design, consistent across every surface.
10
Information architecture
A short, flat structure — nothing deeper than two levels — and the early layouts drawn on the grid.
Must
Editorial landing · 12-col shop grid · Grayscale plates · One-red add-to-bag · 3-step checkout
Should
Lookbook · Size guide · Fabric notes · Order tracking · Admin dashboard
Could
Saved fits & wishlist · Back-in-stock · Gift notes
Won’t
Promo banners · Badges · Carousels · Pop-ups · Colour photography in UI
11
Design decisions
Each screen framed as a decision, not a feature — the problem it answered, what I chose, and the evidence behind it.
01
Landing — the editorial split
Problem
60% had abandoned stores that felt loud, and that judgement forms in seconds.
Decision
Half type, half plate: flush-left display type against one grayscale look, red spent on a single call to action.
Evidence
All five described the store as “premium” or “confident” at the landing step.
02
The edit — a grid that frames
Problem
A dense catalogue made garments compete with each other.
Decision
A calm grid with generous whitespace, filters instead of promotions, one garment per cell.
Evidence
Participants scanned the edit without hesitation.
03
Product — plate + buy rail
Problem
Shoppers couldn’t judge fit or fabric; busy pages buried the garment.
Decision
The garment gets the widest column; everything transactional sits in a compact side rail.
Evidence
Moving fabric notes and a colour swatch beside the plate removed size hesitation — all five completed browse→buy.
04
Checkout — short and distraction-free
Problem
Checkouts that ask too much, too soon were a named abandonment trigger.
Decision
Three short steps, no upsells, totals always visible.
Evidence
Median browse→pay of 4:10, two fewer steps than the three stores audited.
05
Admin — back of house, same house
Problem
Back-of-house tools usually fall outside the brand system and rot fastest.
Decision
Sales, orders and stock on the identical grid and type scale as the storefront.
Evidence
The admin shipped from the same kit with zero new components drawn.
06
One accent colour, used sparingly
Problem
A near-monochrome system risked feeling flat; everything wanted to stand out.
Decision
A single accent, reserved for the primary action on each screen.
Evidence
Participants consistently found the primary action without hesitation.
12
Design system
One component kit — type, colour, spacing and states shared across every surface.
Typography & Colors
Display — Inter
Inter
Display / H1 · 64–104 · 700
Section heading H2 · 32–46 · 700
Card heading H3 · 20–26 · 700
Case covers, landing statements, band titles — flush-left, single family.
Body — Inter
Inter
Lead · 18–22 · 400 · 1.55 lh
Body · 14–16 · 400 · 1.6–1.7 lh
Caption · 12–13 · 500
Label / eyebrow · 11–12 · 700
Data · 14–18 · 600 — prices, sizes, order numbers
Copy, fabric notes, kickers and chips — one type family across five surfaces.
Primary
Signal Red · #C2261B
Secondary
Ink · #0E0E0E
Tertiary
Paper · #F5F4F0
Palette
Secondary ink
#4A4843
Muted
#8B897F
Hairline
#E6E4DF
White
#FFFFFF
Cream
#ECE6D9
Red pressed
#9E1E15
Components — on paper, as shipped
Add to bag
Continue
Ghost
you@email.com
XS
S
M
L
Radius 0 on web and admin · one red per screen · hairlines divide, never boxes with shadow.
Grid System
Web & admin — 12 columns
24px gutters · 64px page margin · 1280px max width
Tablet — 6 columns
The same rhythm, collapsed — 12 → 6 → 4 → 2 by surface
App — 4 columns
Spacing in multiples of 4 · 1px hairlines divide — never boxes with shadow
Icons
1.5px stroke · square terminals · 24px grid — bag, search, account, arrow. No filled icons, no decorative sets.
The one-red rule
If two things are red on a screen, one of them is wrong. The accent is reserved for the single most important action in view.
Accessibility
Ink on Paper 17.71:1 (AAA) · Muted on Paper 3.16:1 (AA Lg) · White on Red 5.85:1 (AA) · Red on Paper 5.37:1 (AA). No state depends on colour alone.
13
Interface showreel
The finished screens across all five surfaces.
Web desktop · 1440
Tablet · 834
Responsive web · 430
Mobile app · 390
Store admin · 1440
14
The core path
Landing to completed order, and the small interactions that give feedback without getting in the way.
01
Land
One calm editorial frame — no carousel, no pop-up.
02
The edit
A grid that frames each garment; filters, not promotions.
03
Product
Plates, fabric notes and honest sizing build trust.
04
Bag
Totals and returns up front — no surprises.
05
Checkout
Three quiet steps; the single accent marks the final action.
Plate crossfade
Hover swaps the garment plate to the back view — a slow, even fade.
Bag slide-in
The bag enters as a quiet right-hand rail; the page dims, nothing bounces.
Checkout stepper
Steps advance with a single hairline sweep.
15
Testing & validation
How the design was validated with real users, before development.
100%
Completed the main scenarios (5 of 5)
4.6 / 5
Task completion ease
5 / 5
Would use the platform in future
0
Critical usability issues
Method
Five in-depth interviews and five moderated remote validation sessions. The prototype was evaluated with users to verify the core shopping experience before development.
16
Outcomes & impact
What the project achieved, what I learned, and where the system goes next.
5 / 5
Participants completed checkout without moderator assistance.
3 steps
Checkout reduced from five steps to three.
100%
Of body, button and accent text passes WCAG AA — body clears AAA.
1
Shared component library carried design-to-development handoff.
Read these as validation, not production metrics
As a new product, these come from five moderated usability tests plus a component-system and accessibility audit — directional given the sample size, but enough to show the design holds up. The step reduction came from removing optional account creation and promo-code steps, not from compressing forms.
What worked
Writing the rules down — a single accent colour and a fixed grid — did more than good intentions. Decisions got faster because we stopped re-arguing them on every screen.
What I’d improve
I spent too long on the landing page early on. Next time I’d test the checkout and account flows sooner, before polishing the parts that photograph well.
Where it goes next
Seasonal lookbook — same grid, new plates · Saved fits & wishlist without gamification · French and Arabic storefronts, the flush-left system tested against RTL.
Thank you for scrolling through the transformation.
If this way of working resonates with you, I’d love to talk about your product.
