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 project brief was to design a bespoke internal web interface that made AI suggestions transparent, inspectable, and actionable — without removing human judgment from the loop.
A note on confidentiality
Specific wireframes, UI screenshots, and usage statistics for this project are confidential and cannot be shared publicly. This page documents the design process, intent, and approach. All artefacts are available for discussion in an interview context.
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
research-workshop-hm
1:1 interviews with global merchandisers + AI team workshops
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.
Logic & Flow
04Simplified Flowcharts
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.
flowchart-hm
Pre-allocation decision flow — demand signal → confidence scoring → auto-allocate or escalate to planner
User Stories
05Translating research into requirements
User stories were co-written with the product owner, grounded directly in interview findings. Each story traced back to a specific pain point observed in the existing SAP or Excel workflow.
The process ensured alignment across the AI team, packaging software team, and business stakeholders before a single wireframe was drawn — preventing expensive late-stage pivots.
user-stories-hm
Stories were reviewed in joint sessions with the AI tool team, packaging software team, and business stakeholders — ensuring technical feasibility and business validity before entering the design phase.
Structure
06Information Architecture
The redesigned IA organised the tool around merchandiser task flows rather than data model structure — a fundamental departure from how SAP surfaces information.
ia-hm
Redesigned information architecture — task-first navigation replacing SAP's data-first model
Wireframes
07Structural design
Wireframes adapted the existing Excel-based workflows into lucid interfaces that supported all edge cases — demand spikes, stock exceptions, and multi-region allocation conflicts.
wireframe-hm-1
wireframe-hm-2
wireframe-hm-3
Wireframes adapted existing Excel workflows into lucid interfaces supporting all edge cases — including demand spikes, stock exceptions, and cross-region allocation conflicts. Each iteration was reviewed with merchandisers before progression to visual design.
Interface Design
08High-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.
ui-hm-1
ui-hm-2
Based on H&M Fabric Design System
09Design System Adaptation
H&M's Fabric system was built for B2C e-commerce. Adapting it for a dense internal B2B tool required extending component behaviour — tighter spacing, higher information density, and new patterns for data tables, confidence indicators, and exception states — without breaking the visual language.
Brand Tokens
H&M Red
#E50010
Dark
#111111
Grey
#F2F2F2
White
#FFFFFF
design-system-hm
Fabric component library — adapted tokens and new B2B patterns
Reflections
10Conclusions
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.
Specific metrics, wireframes, and usage data for this project are confidential. Available for discussion in interviews.