All work Case study 02 — Fashion e-commerce concept

H&M Fashion App

A shopping app that makes finding the perfect fit fast, clear and trustworthy.

Unofficial concept project for learning and portfolio purposes — not affiliated with or endorsed by H&M.

Role: UI/UX Designer
Timeline: 1 week
Platform: iOS app
Deliverables: 12+ screens
Tools: Figma, Miro, Notion

01Overview

Fashion shopping, minus the guesswork.

A concept app for men’s, women’s and kids’ fashion — with complete product details, sizes, colors, prices, live offers and flexible payment methods in one place.

The challenge

Slow delivery, unclear quality

Shoppers worry about late deliveries and clothes that don’t match what they saw in the app. Categories can be confusing, and feedback rarely leads to visible improvements.

The approach

Fast, transparent and clearly organized

Faster ordering, clear categories, detailed product pages and an open feedback loop — every review, positive or negative, feeds the next improvement.

02Process

One week, five focused phases.

Discover
User interviews, user research, competitive analysis
Define
Persona, empathy map, journey map
Ideate
User flow
Design
Wireframes, design system, visual design
Test
Usability testing

03Discover

Where the market falls short.

Benchmarking Noon, Amazon and Shein showed that reviews, offers and payment options are table stakes. The real opportunities were fashion specialization, delivery speed and credibility.

Feature comparison between Noon, Amazon, Shein and the H&M concept app
Criteria	Noon	Amazon	Shein	H&M concept
Reviews	Strong	Strong	Strong	Strong
Offers	Strong	Strong	Strong	Strong
Payment methods	Strong	Strong	Strong	Strong
Installments	Strong	Strong	Gap	Strong
Specialization	Gap	Gap	Strong	Strong
Usability	Strong	Strong	Strong	Strong
Delivery speed	Gap	Gap	Gap	Strong
Credibility	Gap	Gap	Strong	Strong

04Define

Designing for a style-savvy shopper.

Mohamed Ahmed

“Style-savvy guy who loves finding the perfect fit — one scroll at a time. Always on the hunt for fresh looks and wardrobe upgrades.”

Age: 29
Work: Engineer
Status: Married, 2 kids
Location: Alexandria, Egypt

Self-control
Positive
Hard-working
Leadership

Goals

Build a versatile wardrobe — clothes that work for every occasion: casual, work and events.
Stay on top of trends — keep up with the latest fashion and refresh his style regularly.
Find the best deals — make the most of online sales, discounts and promo codes.

Frustrations (from the empathy map)

Feels uneasy paying by card online
Delivery delays
Clothes that don’t match the photos in the app

Motivations

Incentive

Fear

Growth

Power

Preferred channels

Facebook

Instagram

YouTube

Empathy map with sticky notes grouped into says, thinks, does and feels — Empathy map — says, thinks, does, feels

05Ideate

Mapping the shortest path to checkout.

The user flow runs from splash and onboarding through sign-in or sign-up, home, category and product list, product details, cart and payment — with category branches for men, women and kids.

H&M concept user flow from splash and onboarding to payment and successful order — User flowOpen full size

06Wireframes

From low-fi to high-fi.

Grayscale wireframes locked in layout and hierarchy before any color or imagery was added — then each screen was refined into the final UI.

Product list wireframe — Product listLo-fi → Hi-fi

Final product list screen — Product listLo-fi → Hi-fi

Product details wireframe — Product detailsLo-fi → Hi-fi

Final product details screen — Product detailsLo-fi → Hi-fi

All wireframes

11 screens

07Design system

Quiet colors, so the clothes stand out.

A deep navy anchors every action and black carries the type, leaving product photography to provide the color. Soft line illustrations add warmth to onboarding and authentication. Tip: click a swatch to copy its hex.