Case Study 04 Lulu and Sky · Fashion E-Commerce

E-Commerce
Conversion Redesign

End-to-end UX for a fashion platform — removing sign-up friction, rebuilding checkout, and creating the brand's first design system. Drove +21% registration and +15% checkout conversion.

Role
Senior UX/UI Designer — End-to-End
Timeline
Aug 2016 – Dec 2017
Platform
Web · Mobile · iOS · Android
Scope
Full platform redesign + design system
+21%
User Registration
+15%
Checkout Conversion
-25%
Onboarding Time
1st
Design System Built
E2E
Full Platform Ownership

Context

A fashion brand losing customers at every critical moment

Lulu and Sky — an Indian fashion e-commerce brand — had products people loved but a digital experience that was costing them customers. Sign-up friction drove away new users before they'd seen a single product. Complex checkout caused cart abandonment at the last mile.

I was brought in to lead the complete UX redesign — from the landing page to the order confirmation screen — and build a unified design system that the team could scale from.

"The products were beautiful. The experience of buying them was not."

The gap between the brand's visual identity and the digital experience was stark. A fashion-forward brand should feel effortless to browse and delightful to purchase from. My goal: make the platform worthy of the products it sold.

The Problem

Three moments where the platform was losing customers

📝

Sign-up Friction

8+ fields required before users could browse. New users left before seeing a single product. No social login, no guest browsing option.

🛒

Checkout Abandonment

Multi-page checkout with unclear progress. Payment options hidden until the final step. No saved addresses, no order summary visible during purchase.

🎨

Inconsistent Visual Design

No design system. Every page had different typography, button styles, and layouts — undermining brand trust and making the product feel unfinished.

"Increasing registration by 21% didn't require redesigning the whole site — it required removing the barrier standing between the user and their first purchase."

— Surbhi Mahendru

The Solution

Three design interventions with measurable outcomes

01

Progressive Onboarding — Earn Trust Before Asking

Redesigned sign-up from an 8-field form at the front door to a progressive experience. Users could browse immediately — a lightweight 3-step style preference setup came after their first engagement. Only email required to start. The style quiz doubled as personalization data, improving recommendations and email relevance.

Progressive registrationStyle preference quizSocial loginPersonalisation data
02

Single-Page Checkout + Trust Signals

Restructured multi-page checkout into a streamlined 4-step flow (Cart → Shipping → Payment → Confirm) with persistent order summary visible at every step. Added social login, saved addresses, and multiple payment options upfront. Trust signals (SSL, free returns, delivery estimate) directly in the checkout flow.

4-step flowPersistent order summaryTrust signalsSaved addresses
03

Unified Design System + Visual Hierarchy

Built Lulu and Sky's first design system from scratch — defining typography scales, colour tokens, button states, card patterns, and grid systems. Optimised landing page visual hierarchy to surface bestsellers, sale items, and new arrivals in the first viewport. The design system dramatically reduced development time for new features and gave the brand a consistent, premium digital identity that matched their products.

Design systemVisual hierarchyColour tokensComponent libraryGrid system

Before & After

Removing barriers at every critical moment

BEFORE
  • 8-field sign-up form before browsing was possible
  • No social login, no guest option
  • Multi-page checkout with hidden payment options
  • No order summary visible during purchase
  • Zero design system — every page inconsistent
  • No trust signals anywhere in the purchase flow
AFTER
  • Email only to start — progressive onboarding after first engagement
  • Social login + guest browsing
  • 4-step checkout, persistent order summary, all payment options upfront
  • Trust badges in checkout (SSL, returns, delivery estimate)
  • Unified design system — consistent brand across every screen
  • Style preference quiz drives personalized product discovery

Impact & Results

Three numbers that tell the full story

+21%

User Registration

Removing the 8-field sign-up wall and replacing it with progressive onboarding and guest browsing.

+15%

Checkout Conversion

Single-page checkout, persistent order summary, trust signals, and upfront payment options.

-25%

Onboarding Time

Intuitive walkthrough experience and reduced required fields cut time-to-first-purchase by a quarter.

1

The Biggest Wins Come from Friction Removal, Not Addition

Adding a feature rarely increases conversion as much as removing a barrier. The +21% registration gain came from deleting 6 sign-up fields — not from adding a new feature.

2

Trust is a Design Problem

SSL badges, free return messaging, and delivery estimates in the checkout flow reduced the anxiety that causes last-minute abandonment. Security and trust aren't just engineering concerns — they're UX concerns.

3

A Design System is a Business Investment

Building the design system wasn't just about visual consistency — it reduced development time for new features significantly. The ROI extended far beyond my tenure at the company.

Final Reflection

"The best e-commerce UX gets out of the way and lets the products do the selling."

Lulu and Sky taught me that conversion optimisation and brand building are the same work. When the experience is frictionless, on-brand, and confidence-building, users don't hesitate — they purchase. This project also gave me my first experience building a design system from scratch — a skill that became foundational to every enterprise project I led afterward at TCS, Capgemini, Aviva, and CitiGroup.

Project Screens

Design Screens & Deliverables

Click any placeholder below to upload your actual project screenshots. Images preview immediately.

Hero Screen — Full Width

Product Homepage — Hero Screen
Click to upload your screenshot

JPG · PNG · WebP · up to 10MB
Product homepage screenshot

Two-Column Screens

Onboarding / Sign-up Flow
Click to upload

JPG · PNG · WebP
Onboarding flow screenshot

Checkout Flow
Click to upload

JPG · PNG · WebP
Checkout flow screenshot

Three-Column Screens

Product Listing
Click to upload

JPG · PNG · WebP
Product listing

Design System
Click to upload

JPG · PNG · WebP
Design system screenshot

Mobile Screen
Click to upload

JPG · PNG · WebP
Mobile screenshot

💡 To make images permanent: replace each .img-slot div with <img src="your-file.jpg" alt="description" style="width:100%;border-radius:12px;">

Design Files

Project Assets & Files

Design deliverables for the Lulu and Sky E-Commerce project.

🎨

Figma Design File

Full platform redesign with all screens, component library, and design system tokens.

Request Access
▶️

Interactive Prototype

Clickable prototype covering the onboarding flow, product discovery, and checkout journey.

Request Access
📄

Case Study PDF

Full documentation: research insights, wireframes, and design rationale for all key screens.

Request Access
📐

Design System Doc

Component library documentation: typography, colour tokens, grid, button states, card patterns.

Request Access
🔍

User Research Report

Conversion analysis, usability findings, and research insights behind the redesign decisions.

Request Access

Add Your File

Replace this card with a link to your Figma, Notion doc, prototype, or any project asset.

Add Link

Contact surbhi.contactme@gmail.com to request access to any file.