Back
H&M
H&M

H&M

Buildingintelligenceformodernretail

I designed a mobile app for store associates and a management platform for audits and review — turning sales, store performance and operational data into clear, actionable insight across 4 700 stores.

35M+Monthly active shoppers
4,700+Stores across 75 markets
50+Countries running this platform

Role

Senior Product Designer

Timeline

2025–26

Platform

Retail

Store features
that drive sales

Tools for store associates — managing inventory, serving customers
and driving revenue on the shop floor.

H&M task management on iPad
1

Daily tasks and reset

200 tasks per shift, no clear prioritisation. I redesigned the daily view around urgency and team assignment — so store managers know exactly what to act on first.

What I need to do today.

The daily reset — every task, one dashboard

Task queue — replenishment and pickup orders by priority

Right task. Right moment.

H&M store operations
2

Replenish the floor

Replenishing the floor from the stockroom meant juggling lists and a handheld scanner. I simplified it to three taps on a consumer phone — scan, confirm, shelve.

Add to shop floor. Before it sells out.

Box-level scanning — batch verify before unpacking

Replenishment in action — scan, confirm, shelve

H&M pick and pack
3

Pick, pack, collect

Every Click & Collect order has 15 minutes to be picked, packed and shelved before the customer arrives. I designed the flow to guide staff through each step without errors.

Shelf to box. Three taps.

Batch picking — items grouped across orders for speed

Batch complete — summary and drop location confirmed

Customer handover in under 60 seconds.

Click & Collect — Ready to collect

Pickup queue — orders sorted by collection window

Click & Collect — Enter pick-up code

Identity verification — OTP confirmation before handover

Signature capture — legal proof of delivery built in

Order completion — closed loop with real-time inventory sync

H&M store operations
4

Receive and store

A delivery lands as a stack of sealed boxes. I designed one flow — scan each box on arrival, unpack it, then scan every item into its stockroom location, sorted by department.

Box to stockroom. Every item scanned.

Receive — scan overview

Outbound overview — shipments queued for dispatch

Box scanning — verify contents before sealing

Item-level check — confirm every product before it leaves

4

An analytics platform
for store managers

Store data was siloed in shift reports. I designed a live dashboard so regional managers can compare performance across 50+ stores without waiting for weekly rollups.

H&M store operations — sales overview

I designed the sales view so regional managers stop context-switching between five spreadsheets

H&M store operations — overview

The operations dashboard I designed to replace the morning status call

H&M store operations — store health score

From high-level health score to individual store discrepancies — all self-serve

Design system

Tokens, patterns and components for a native iOS inventory experience.

Colors

A restrained palette built around category accents, with semantic tokens for feedback and a dark mode for scanning interfaces.

Category Accents

#D4A46A
Replenishment
#C97AB8
Orders
#8685D4
Overstock
#155DFC
Inventory
#D4894E
Ad hoc / BOSS

UI Colors

#111827
Primary Black
#101828
App Dark
#F9FAFB
Background
#FFFFFF
Card
#F3F4F6
Border
#99a1af
Muted Text
#6a7282
Secondary Text
#E5E7EB
Disabled

Semantic

#059669
Success
#FF3B30
Error / Urgent
#4455FD
Scan Accent

Dark Mode

#0B0E18
Background
rgba(255,255,255,0.09)
Surface
rgba(255,255,255,0.40)
Muted Text

Typography

System font stack (SF Pro on iOS). Every size carries negative letter-spacing for a tighter, more intentional feel.

2,847
Stat Hero52px / 700-1.3px
Operations
Page Title28px / 700-0.7px
Replenishment
Section Title22px / 700-0.55px
Slim Fit T-Shirt
Card Title17px / 700-0.42px
Scanned at delivery bay
Body15px / 600-0.35px
Last updated 2 min ago
Secondary13px / 500-0.2px
Awaiting arrival scan
Caption12px / 500-0.15px
RECEIVED
Label / Tag11px / 7000.5px

Spacing & Radii

Generous radii create a soft, approachable UI. Consistent spacing tokens keep layouts rhythmic.

28pxSheet
18pxCard
16pxCTA
14pxThumbnail
12pxChip / Pill
9999pxFull Pill

20px

Page Padding

10px

Card Gap

24px

Section Gap

Shadows

Subtle depth cues that feel native. Cards float gently, CTAs press with confidence.

Card
Primary CTA
Dark Card

Buttons

Three tiers of emphasis. Primary commands attention, secondary supports, ghost fades into content.

Category Chips

Pill-shaped filters that toggle between active and inactive states.

AllReplenishmentOrdersOverstockUrgent

Status Pills

Contextual badges that communicate state at a glance through color and label.

CorrectMisplacedPendingUrgent

Cards

A unified card system with a left accent bar that ties each card to its category.

Slim Fit T-Shirt

Aisle 3 · Shelf B

#ORD-88204

Ready

3 items · Quinn Fabray

Stock Count

12 items remaining

BOSS Order #4421

5 items · Express