Internal B2B Tool · AI-Integrated
AI-Based Logistics
Pre-Allocation Tool
Replacing SAP and Excel with an intelligent distribution interface for H&M's global merchandisers — designing human–AI decision workflows for high-stakes logistics.
Overview
01From spreadsheets to AI-augmented decisions
Global merchandisers at H&M make high-stakes distribution decisions daily, balancing stock across thousands of stores and warehouses. Legacy workflows relied on disjointed SAP tools and massive spreadsheets, leading to cognitive overload and slow, error-prone decisions.
While AI-generated allocation predictions existed, they were opaque black boxes that planners found difficult to trust or act upon. The design challenge was not simply showing AI recommendations. It was helping merchandisers understand, question, override, and act on them without losing trust in the system. This project is directly relevant to AI-native SaaS products because the core challenge was not adding AI to a workflow, but designing trust, agency, and override logic around machine-generated recommendations.
"This project was not about using AI to design faster. It was about designing the interface between human judgement and machine prediction — making AI suggestions transparent, inspectable, and actionable without removing the merchandiser from the loop."
Relevant for: Enterprise AI · Decision-support tools · Human-in-the-loop UX · Internal SaaS
What I did
- Led UX research and workflow mapping for global merchandisers.
- Designed human-in-the-loop AI decision flows for allocation and replenishment.
- Translated SAP and Excel-heavy workflows into clearer product journeys.
- Adapted H&M's Fabric design system for dense internal B2B tooling.
- Created wireframes, interaction patterns, and portfolio-safe interface reconstructions.
- Supported product clarity for a tool intended to reduce manual allocation work.
Challenges & Goals
02What we were solving for
Challenges
Inefficiency at scale
SAP and Excel workflows couldn't support the speed or complexity required — planners managed thousands of SKU-store combinations manually.
AI integration complexity
ML predictions existed but were opaque. Planners didn't understand or trust them, so they were routinely ignored in favour of intuition.
Cross-team alignment
AI team, packaging software team, and global merchandisers had different mental models, vocabularies, and success criteria for the same system.
Goals
New tool with AI-suggested distribution
A purpose-built interface that surfaced AI recommendations in a way planners could understand, interrogate, and act on confidently.
Agile design process
Rapid iteration cycles with real users — global business managers — through 1:1 interviews, workshops, and usability feedback loops.
Standardised internal design system
Adapt H&M's existing 'Fabric' e-commerce design system for internal B2B use — maintaining brand coherence while serving enterprise workflow needs.
Research & Analysis
03Understanding the problem space
Internal Team Engagement
- 1:1 interviews with global business managers across H&M Group regions
- Workshops with the AI / Data Science tool team to map model outputs
- Sessions with the packaging software team to understand downstream dependencies
- Stakeholder reviews with logistics leadership to align on scope and constraints
- Ongoing feedback loops with merchandisers throughout the design process
Research Methods Applied
- Semi-structured 1:1 user interviews (Lookback.io)
- Contextual inquiry — observing planners using existing SAP workflows
- Affinity mapping and synthesis from interview transcripts (Miro)
- User story mapping with the product owner
- Rapid concept validation through low-fidelity wireframes
- Usability testing across iterative prototype versions
Simplified allocation decision flow — mapped before any UI was designed
Logic & Flow
Before any UI, the allocation decision logic was mapped as a flowchart — from demand signal ingestion through AI confidence scoring to final planner action. This became the shared contract between design, engineering, and data science.
Research artefacts including workflow maps and interview synthesis are available on request.
Design Intent
"The goal was not to automate the human out of the loop, but to elevate them from 'data processor' to 'strategic decision maker'."
Clarity
Reduce cognitive load by synthesising complex signals into digestible insights.
Trust
Make system logic inspectable. Show the 'why' behind every AI recommendation.
Agency
Preserve human expertise. Ensure planners can easily override and tune the model.
From insight to user stories
User stories were co-written with the product owner, grounded directly in interview findings — each tracing back to a specific pain point in the existing SAP or Excel workflow.
User stories co-written with product owner, grounded in interview findings
The redesigned IA organised the tool around merchandiser task flows rather than data model structure — a fundamental departure from how SAP surfaces information.
Information architecture restructured around planner task flows
Wireframes
04Structural design
Before moving to high-fidelity, we established the information architecture through structured wireframes — mapping each module's data model, user flows, and edge cases.
Split rules
Warehouses
Timeline
Packaging
Products
Interface Design
05High-fidelity UI
Visual design applied H&M's Fabric system tokens to the wireframe structures, producing an interface that felt coherent with the broader H&M product ecosystem while serving the density requirements of an internal tool.
Anonymised concept interface showing how allocation recommendations, confidence signals, market-level forecasts, and exception states could be reviewed by planners.
Connected Interface Views
Products
Planners can triage SKUs by review status, allocation volume, and AI confidence.
Packaging
Pack configuration logic helps planners balance size and colour distribution across markets.
Warehouse
Capacity and regional distribution views help surface bottlenecks before allocation decisions are approved.
Timeline
Seasonal timelines make allocation phases, dependencies, and category progress easier to coordinate.
Based on H&M Fabric Design System
06Design System Adaptation
H&M's Fabric system was built for B2C e-commerce: generous spacing, marketing hierarchy, consumer-facing interactions. Adapting it for a dense internal B2B tool meant extending the system in three directions — without breaking the visual language that H&M teams already knew.
Three-layer token architecture — primitives inherited from Fabric, semantic layer extended for status states, component layer built new for B2B density and AI confidence patterns.
Density
Tighter spacing for data density
Consumer Fabric uses generous padding optimised for touch targets and marketing hierarchy. Internal merchandiser tools needed compact row heights to show 6,000+ SKU-level entries without horizontal scrolling.
Status System
New confidence and exception states
Fabric had success/error states for form validation. The AI tool required a richer status vocabulary — AI confidence bands (high/medium/low), exception flags, and override indicators — none of which existed in the B2C system.
Data Tables
Dense tables as a first-class pattern
Fabric's table component was designed for simple order summaries. The allocation tool needed sortable, selectable, bulk-editable tables with inline status badges and deviation percentages — requiring a full table pattern extension.
Colour Tokens
--color-brand-primary
#E50010
--color-surface-dark
#111111
--color-surface-light
#F2F2F2
--color-text-inverse
#FFFFFF
--color-status-success
#1A7A4A
NEW · not in Fabric B2C
--color-status-warning
#B45309
NEW · not in Fabric B2C
Packaging allocation view — Fabric tokens applied to a data-dense B2B layout. Note compact row height, colour-coded pack configuration bars, and AI recommendation panel pattern.
Reflections
07Conclusions
What was delivered
Initial designs are live within H&M's logistics supply chain. The system brought AI-generated allocation suggestions into a workflow that merchandisers could actually use — replacing a fragmented SAP-and-spreadsheet process with a single, coherent interface.
What I learned
Enterprise AI projects are fundamentally trust design projects. The hardest problem wasn't the interface — it was convincing experienced planners that a system they couldn't fully explain was worth acting on. Every design decision was, in some way, an answer to that question.
Navigating complexity
Working across a distributed team — AI researchers, logistics product managers, packaging software engineers, and global merchandisers in multiple time zones — required a design process that was as much about facilitation and alignment as it was about artefacts. The discipline of writing user stories before wireframes, and flowcharts before UI, proved essential.