Redesigning the Fashion Shopping Experience | Deep UX-UI Design & Research

Project Type

Fashion Eommerce

Contribution

UX Research

User Experience (UX)

Prototyping

Accessability Testing

My role

UX-UI Lead

Outcome

Rolled out USA

Target Analyst

+ 35-40K Active Analyst

Duration

14 weeks

Impact Overview

Checkout completion

37% Checkout completion rate increase after redesign ↑ from 48% baseline

SUS Score

79.1 SUS Score — rated "Good" usability (up from 54.8) ↑ 24.3 point gain

AI-Powered Workforce

1.9S Average task completion time reduced on product discovery ↓ from 6.2s baseline

UX Research Process for Fashion Shopping Experience

Total Research Methods

A full-spectrum UX research study for a D2C fashion e-commerce platform — spanning behavioral analytics, usability engineering, accessibility auditing, and generative architecture research to increase conversion and reduce checkout drop-off.

01 Key Research Outcomes Quantified impact across conversion, retention, and usability

37^%

Checkout completion rate increase after redesign

↑ from 48% baseline

79.1

SUS Score — rated "Good" usability (up from 54.8)

↑ 24.3 point gain

1.9^s

Average task completion time reduced on product discovery

↓ from 6.2s baseline

52^%

Drop in rage clicks on the size & colour filter sidebar

↓ friction reduced

93^%

WCAG 2.1 AA compliance rate post-audit remediation

↑ from 61% at audit start

A/B tests run; 12 reached statistical significance

↑ 63% significance rate

02 User Personas Synthesised from 48 in-depth interviews and diary studies

Zoe, The Trend Seeker

28 · Fashion enthusiast · High purchase intent

Browses new arrivals daily. Frustrated by poor size filter taxonomy — can't narrow by fit type or body shape. Abandons cart when outfit styling inspiration is buried below the fold.

David, The Considered Buyer

38 · Professional wardrobe builder · Low impulse, high standards

Cross-references fabric composition and care instructions before committing. Needs returns policy and size guide visible on product pages. Drops off at checkout when he cannot confirm delivery timing before payment.

Nina, The Casual Shopper

24 · Style explorer · Price-sensitive, mobile-first

Discovers items via Instagram and TikTok. Mobile checkout is her biggest hurdle — form fields too small, address auto-fill broken, Apple Pay not surfaced. Buys once, rarely returns without a discount incentive.

03 Advanced Behavioral Analytics Clickstream, heatmapping, and session replay synthesis

Checkout Funnel — Drop-off Analysis (n = 9,140 sessions)

Product Page

9,140 users

100%

Add to Cart

6,215

68%

View Cart

5,027

55%

Checkout Init

3,747

41%

Size & Delivery ⚠

2,285 — major drop-off

25%

Payment

1,828

20%

Confirmed Order

1,554

17%

F01

Size selection is the single biggest drop-off point — losing 16% of users at the size & delivery step Session replays show users abandoning when the size guide opens in a modal that obscures the Add to Cart button, and when out-of-stock size variants are still selectable without a clear visual indicator.

Critical

F02

Heatmaps reveal 76% of mobile clicks cluster around the product image gallery in the top third of product detail pages Users swipe through images but rarely scroll to fabric details — indicating material information and returns policy should be repositioned above the fold. Eye-tracking confirmed the composition panel receives under 2 seconds of attention in its current position.

High

F03

Rage-click spikes on the "Filter" button suggest users expect instant visual results The 1.4-second loading delay following colour or size filter selection caused 52% of users to click the filter again, compounding confusion. Expectation mismatch around live product grid refresh — not UI layout — is the root cause.

High

04 Research Methods Applied Six research pillars with participant breakdown

Behavioral Analytics

Quantitative · 9,140 sessions

Clickstream & funnel analysis — mapped exact checkout drop-off points across 6-stage purchase pipeline
Heatmapping & simulated eye tracking — measured visual attention on 14 product detail page variants
Session replays — reviewed 260 friction-rich, high-intent fashion browsing sessions for pattern coding

Evaluative Usability

Mixed methods · 68 participants

Moderated usability testing — 18 in-lab sessions tasking users to find and purchase specific fashion items
Unmoderated remote testing — 50 participants via UserTesting; 8 standardised task scenarios
Cognitive walkthroughs — evaluated full checkout flow from first-time shopper perspective across 3 flows

Quantitative & Statistical

A/B testing · 19 experiments

High-throughput A/B testing — 19 simultaneous experiments across CTA copy, layout variants, and imagery
SUS (System Usability Scale) — standardised survey administered at baseline and post-redesign
MaxDiff analysis — identified top-valued product filter attributes across 180 survey respondents

Generative & Architecture

IA research · 94 participants

Hybrid card sorting — 44 participants; combined open & closed methods to rebuild clothing category menus
Tree testing — validated new taxonomy with 50 participants across 8 deep-category navigation paths
Diary studies — 12 participants tracked over 3 weeks for post-purchase and returns behaviour patterns

Automated & Expert Audit

Accessibility · WCAG 2.1 AA

WCAG 2.1 AA compliance audit — mapped all 34 primary pages against latest international guidelines
ARIA auditing — validated screen reader announcements for filters, cart flyouts, and modal dialogs
Axe, Lighthouse, and manual screen-reader walkthroughs (NVDA + VoiceOver) across all key flows

Cognitive & Motor Research

Inclusive design · 22 participants

Switch control testing — 4 participants with motor impairments navigated full purchase flows via switch/head tracker
Cognitive load audit — checkout tested under simulated time-stress conditions; error message clarity scored
Colour blindness simulation — product colour swatches and size-availability badges tested via Protanopia & Deuteranopia filters

05 A/B Testing Results Selected experiments reaching statistical significance (p < 0.05)

Experiment	Control	Variant	Metric	Uplift	Confidence
CTA Button CopyWinner	"Add to Cart"	"Add to My Wardrobe"	Add-to-cart rate	+21.3%	98%
Trust & Returns BadgeWinner	Footer placement	Below price, above fold	Checkout initiation	+14.6%	96%
Checkout Progress BarWinner	No progress indicator	3-step visual tracker	Completion rate	+11.2%	95%
Product Image Layout	Single main image	Multi-angle gallery + on-model zoom	Avg session time	+28.7%	93%
Guest Checkout OptionWinner	Account creation required	Guest checkout upfront	New user conversion	+33.8%	99%

06 SUS Score Analysis System Usability Scale — before, during, and after redesign

54.8

Poor

Baseline — pre-research

69.5

Mid-point — post iteration 1

79.1

Good

Final — post full redesign

"I finally felt like the website understood what I was shopping for — the size filters were intuitive and I could actually see how the piece would fit before I bought it."

P09 — Moderated usability session, post-redesign · Task: "Find a midi dress in size 12 suitable for a summer wedding"

07 Accessibility Audit Findings WCAG 2.1 AA · Cognitive & motor usability · ARIA

WCAG 2.1 AA · ARIA Issues

34 pages audited · 58 issues found · 54 remediated

Shopping cart flyout lacked an accessible name — screen readers announced "dialog" with no context, disorienting VoiceOver users mid-session.

Interactive size and colour filter tags had no ARIA roles — keyboard users could not activate or deselect active filters without a mouse.

22 product images on category pages had missing or non-descriptive alt text (e.g. alt="look_0391.jpg"), failing WCAG 1.1.1.

Colour contrast ratio of 3.2:1 on "Sold Out" badge failed minimum 4.5:1 requirement for normal text.

Skip navigation link present but visually hidden — not visible on keyboard focus, reducing utility for sighted keyboard users.

Cognitive & Motor Usability

Switch control · Colour blindness · Cognitive load

Switch control users could not reach the promo code field at checkout — focus order skipped the input entirely, requiring 16+ switch activations to reach via workaround.

Under cognitive load testing, the checkout error for an invalid card number provided no specific correction instruction — users re-entered the same incorrect data twice on average.

Protanopia simulation revealed that green "In Stock" and red "Low Stock" colour swatches were indistinguishable. Colour-blind users relied solely on text, which was truncated on mobile.

Deuteranopia testing of outfit colour-coding (e.g. availability tiers shown as green/amber/red dot indicators) showed all three states appearing as near-identical brown tones.

Head-tracker navigation revealed the wishlist toggle on product cards required sub-10px precision — replaced with a 44×44px minimum touch target per WCAG 2.5.5.

08 Information Architecture Card sorting & tree testing outcomes

IA01

Hybrid card sorting exposed a critical taxonomy mismatch — users categorised "Denim Jackets" under "Outerwear", not "Jackets & Blazers" 44 participants sorted 64 cards. The existing menu had denim jackets buried 3 levels deep under Tops → Layering → Denim. Post-sorting, the new taxonomy placed them at Outerwear → Casual Coats → Denim, reducing discovery time by 58%.

Architecture

IA02

Tree testing first-click success rate improved from 41% to 76% after new navigation was implemented 50 participants navigated 8 task scenarios. The most improved path: "Find a formal trouser in a slim fit for women" — previously 19% success, now 83% after the creation of a "Workwear & Occasion" top-level category.

Navigation

IA03

Diary studies revealed outfit re-ordering was a primary use case — yet no "Buy Again" shortcut existed in the main flow Across 12 participants tracked over 3 weeks, 8 repurchased the same or similar item. All 8 followed the same inefficient path: My Account → Order History → Find Order → View Items → Add Each to Cart. A one-click reorder feature was subsequently prioritised for the roadmap.

Re-order

09 Recommendations Prioritised by impact and implementation effort

P1 — Critical

Rebuild Checkout Address & Delivery Form

Implement Google Places auto-complete, surface estimated delivery date before payment, and add inline error recovery with specific field guidance. Addresses the 16% drop-off at the size & delivery entry step.

Est. impact: +16% checkout completion

P1 — Critical

Guest Checkout by Default

Move account creation to post-purchase confirmation. A/B test confirmed 33.8% uplift in new user conversion. Offer account creation as a value exchange: "Save your style preferences for next time."

Est. impact: +34% new user conversion

P1 — Critical

Fix ARIA on Cart & Size Filters

Add accessible names to the cart flyout dialog, implement proper ARIA roles on size and colour filter tags, and restore correct focus order through the checkout promo code field. Resolves top-severity accessibility blockers.

Est. impact: 100% keyboard accessibility

P2 — High

Reposition Returns Policy & Size Guide

Move free returns badge and interactive size guide above the fold on product pages. A/B results show trust badge repositioning alone drives +14.6% checkout initiation for considered-purchase segments.

Est. impact: +15% initiation rate

P2 — High

Icon + Text for Stock Status Badges

Replace colour-only stock and availability indicators with icon + label combinations. Resolves Protanopia and Deuteranopia failures; also benefits low-vision and situational-impairment users. WCAG 1.4.1 compliance.

Est. impact: WCAG 1.4.1 compliance

P3 — Medium

One-Click Buy Again Feature

Add a persistent "Buy Again" CTA on order history items and dispatch confirmation emails. Diary study data shows 67% of active users repurchase similar products — a direct reorder path removes 6-step friction from the re-purchase flow.

Est. impact: +retention & LTV

10 Research Timeline 14-week engagement from discovery to final handoff

Wk 1–2

Discovery

Stakeholder interviews & analytics audit

Reviewed 6 months of GA4 data, interviewed 5 stakeholders, established research questions and success metrics around conversion and returns rate.

Wk 3–4

Generative Research

Card sorting, diary study recruitment & baseline SUS

Ran hybrid card sorting (44 participants), launched diary study cohort, administered baseline SUS survey (54.8).

Wk 5–7

Evaluative Research

Moderated & unmoderated usability testing

18 moderated sessions, 50 remote tests, full cognitive walkthrough of checkout and product discovery across apparel categories.

Wk 8–9

Accessibility Audit

WCAG 2.1 AA audit, ARIA testing, motor & cognitive testing

Full 34-page audit, switch control sessions with 4 participants, colour blindness simulation across product imagery and swatch UI.

Wk 10–12

A/B Testing

19 experiments launched across checkout & product pages

Ran simultaneous A/B tests on CTAs, trust badges, image layouts, and checkout flow. Tree testing with 50 participants on revised navigation.

Wk 13–14

Synthesis & Handoff

Final report, post-redesign SUS, recommendations roadmap

Synthesised all findings, ran post-redesign SUS (79.1), delivered prioritised recommendations with implementation guidance for the product and engineering teams.