Luxury E-commerce Website

AAZEA

A luxury abaya e-commerce experience for AAZEA House — editorial storefront, refined product discovery and a calm two-step checkout.

Project Overview

AAZEA House is a Dubai-based modern abaya and wardrobe-essentials label. I designed the full storefront — home, shop, product detail, account and checkout — around an editorial, quietly luxurious identity: serif display type, sand and deep-taupe neutrals, and full-bleed campaign imagery.

Role: UI/UX Designer
Timeline: 3 Weeks
Platform: Responsive Website
Industry: Fashion / Modest Wear
Tools: Figma, Wireframing, Design Systems

The Problem

Premium modest-wear shoppers need fabric, fit and sizing confidence before buying, but catalogue layouts bury that detail and stretch checkout across too many steps.

Sizing and fit answers hidden below the fold
Fabric and care detail missing at the decision moment
Checkout spread across five separate steps
Generic catalogue styling undercut the brand's price band

Project Goals

Make elegance feel effortless: let each piece breathe visually while surfacing fabric, size and delivery facts early, and close the sale in one uninterrupted checkout screen.

01
Let each piece breathe visually as an editorial brand would
02
Surface fabric, size and delivery facts before add-to-cart
03
Close the sale on one uninterrupted checkout screen
04
Build a reusable editorial component set across all pages

Research & Discovery

Sizing (52–62) and model-height reference were the top questions before adding to cart
Fabric and care detail drove confidence more than discounts for this price band
AED currency, UAE address fields and Apple/Google Pay were expected as defaults

User Flow

Home
Collections
Shop / Filters
Product detail
Size guide
Account or guest
Checkout
Order confirmation
My Account

From Wireframes to Final UI

Wireframes tested a left filter rail against a top filter bar, sticky add-to-cart on product detail, and a single-page checkout with a persistent order summary on the right.

Low Fidelity

Structure first

Grey-box layouts to settle hierarchy, navigation and the order of information before any styling.

High Fidelity

Final UI

Typography, colour, components and states applied on top of the approved structure.

UI Design

Website

An editorial system: Aazéa serif logotype, deep-taupe navigation band, off-white surfaces, warm sand product backgrounds and a single near-black accent reserved for primary actions. Size chart, fabric and care live in quiet accordions so imagery stays the hero.

AAZEA — 01 — Home — Entry point: full-bleed 'Elegance, Made Effortless' hero, new arrivals grid with colour swatches, collection split and brand values.

AAZEA — 03 — Collections — Signature and Privé capsules presented as alternating editorial blocks with piece counts and entry price.

AAZEA — 04 — Shop & Filters — Signature / Privé filtering with size, colour, fabric and price rails plus fabric-and-fit notes.

AAZEA — 05 — Product Detail — Colour and size selection, size chart, fabric & care accordions, styling suggestions and recently viewed.

AAZEA — 06 — Size Guide — Centimetre measurement table across XS–XL with guidance on relaxed versus tailored fit.

AAZEA — 07 — Login — Centered account entry set under the campaign hero for brand continuity.

AAZEA — 08 — Create Account — Short sign-up with UAE dial-code phone field and inline validation.

AAZEA — 09 — Checkout — Single-screen contact, delivery, shipping method and payment with a live AED order summary pinned alongside.

AAZEA — 10 — Order Confirmation — Order summary, delivery details and payment recap with a clear continue-shopping path.

AAZEA — 11 — Account: Wishlist — My Account shell with sidebar navigation and saved pieces shown with colour swatch and AED price.

AAZEA — 12 — Account: Addresses — Saved home and office addresses with default marker and inline add/edit actions.

AAZEA — 13 — About: Our Story — Brand story page: campaign hero, philosophy split, house stats band and collection entry points.

AAZEA — 14 — Journal — 'Creative Talk' index with category, search and recent-post rails alongside image-led article cards.

AAZEA — 15 — Journal Article — Long-form reading layout with pull quotes, share rail, comment form and related-reading tiles.

AAZEA — 16 — FAQs — Help centre accordion covering delivery times, alterations, fabrics, cancellations and care.

AAZEA — 17 — Exchange & Refund Policy — Policy page structured into eligibility, how to initiate and refund timelines.

AAZEA — 18 — Customization Policy — Made-to-measure service, lead time, final-sale terms and consultation booking details.

Building a Scalable Design System

An editorial system where imagery leads and interface elements stay quiet.

Colour

Deep taupe navigation
Off-white surfaces
Warm sand product backgrounds
Near-black primary action

Typography

Serif display logotype and headings
Clean sans body
Wide-tracked labels

Components

Product card with swatches
Size chart accordion
Sticky add-to-cart
Order summary
Journal card
FAQ accordion

Layout

Full-bleed campaign blocks
Filter rail
Single-page checkout
Generous whitespace

Key Design Decisions

01Single-screen Checkout
Contact, delivery, shipping and payment collapse into one screen with a live order summary.
02Quiet Accordions
Fabric, care and sizing live in accordions so imagery stays the hero without hiding facts.
03One Accent Colour
A single near-black accent reserved for primary actions keeps the palette editorial.

Outcome

Checkout collapsed from five steps to one screen, product pages answer fabric and sizing questions without leaving the page, and the storefront reads as a fashion house rather than a generic catalogue.

What I Learned

This project sharpened my sense of restraint. Removing interface noise and reserving a single accent made the storefront read as a fashion house rather than a catalogue.

Interactive Prototype

Prototyped the full purchase journey in order — discovery, collection entry, filtered browsing, size selection, guest and account checkout, confirmation and account management — across desktop and mobile breakpoints.

Explore the final experienceView Prototype

Next ProjectSVC — Special Variety Company