Deliverable 2 of 6
UX/UI Design Audit
A structured audit of the current replenishment workflow — clarity score, top issues, copy refactor, and structural improvements.
Current replenishment flow
Four screens Sarah goes through today — from list to confirmation.
0Home
1Step 1
2Step 2
3Step 3
Clarity Score
0
/ 10
Functional, but fragile
Clarity by Dimension
Avg 4.8 / 10
Critical
High
0 critical
0 high
0 fixes proposed
Diagnosis
Solid visual base, but serious gaps in information architecture, affordance, and UX writing.
P0
Affordance & Recovery
Screen 4 (Review) surfaces red alerts without defining the target, without showing cost, and without allowing inline correction.
P0
Information Architecture
The 2-step flow hides real complexity — 8 cascading dropdowns in Step 2 — and jumps straight to
Submit with no conscious review checkpoint.
P1
Visual Hierarchy
Typography is flat — everything is black / gray with zero semantic color to separate status, action, or risk.
P1
UX Writing
Copy swings between technical jargon (
Configuration Setup, scope selection) and generic CTAs (Continue, Submit).
P0
Trust
The Home screen shows duplicated data — eroding Sarah's trust before she even starts.
Critical
Top 5 Critical Issues
P0 — blocks the task
1
Coverage alerts with no action path
Step 3 shows "82% below target" in red but doesn't define what target means, doesn't let users adjust Replen Units inline, doesn't recalculate on edit, and doesn't sort by gap. Users see the problem and can't solve it on the same surface.
Nielsen #1 VisibilityNielsen #9 Recovery
2
"Submit Replenishment" CTA with no consequence clarity
Primary black button, zero reassurance. Is it reversible? Does it trigger a PO? Who gets notified? How much does it cost? A supply-chain user either clicks with fear or on autopilot — both are failure modes.
Nielsen #5 Error PreventionPeak-End Law
3
Inconsistent warehouse taxonomy
Home says "Distribution Center A/B/C", Step 2 says "Distribution Center Alpha", Step 3 says "Central Distribution Hub" — three different names for the same object across three consecutive screens. Breaks the mental model inside the product itself.
Jakob's LawNielsen #4 Consistency
4
Hybrid "Created" column on Home
Date plus an unlabeled string below (likely the creator's name) with no dedicated column. Users don't know if it's "created by", "assigned to", or "modified". The pattern is ambiguous and repeats across every row.
Nielsen #4 Consistency
5
Duplicated data erodes credibility
42 locations / $125.5K / 2,847 units appears identically in 4+ rows on Home. Either a placeholder in production or an aggregation bug — either way, the user distrusts every number on the screen.
Data integrityTrust
High
Top 5 High-Impact Issues
P1 — slows the task
1
Duplicated "Repeats" label in Step 1
Same label is used for (1) frequency ("Weekly") and (2) end date of the schedule. Taxonomy ambiguity on adjacent fields — the user has to pause and figure out which is which.
Miller's LawHick's Law
2
"Now" still exposes 5 irrelevant fields
Selecting "Now" keeps Repeats + Repeats every + Time + End date + Email recipients visible. If it runs now, 4 of those 5 fields are meaningless. Missing progressive disclosure pushes complexity onto the user.
Tesler's LawProgressive Disclosure
3
8 cascading dropdowns with no dependency signal
Step 2 has Facility Type → Territory → Market → Sites and Category → Subcategory → Collection → Items. None indicate disabled state until the parent is selected, none show which depends on which. Users try out of order and fail silently.
Nielsen #1 VisibilityAffordance
4
Inconsistent back navigation
Step 1 uses "← Return" (text), Step 2 uses "< Step 2 of 2" (numeric fragment). Two different navigation patterns in two consecutive steps of the same flow.
Nielsen #4 Consistency
5
Sidebar without labels or tooltips
4 stacked icons, no text, no visible tooltip. Users have to memorize each icon by trial and error — a classic recognition-over-recall violation on a nav element used daily.
NN/g #6 Recognition
Copy refactor — priority substitutions
Labels and CTAs rewritten for clarity, intent, and semantic honesty.
| Current | Proposed | |
|---|---|---|
| Run request · Now / Future | → | When to run · Run now / Schedule for later |
| Repeats (2nd field, end date) | → | End schedule on |
| Continue to scope selection | → | Next: Select products |
| Continue | → | Review replenishment |
| Submit Replenishment | → | Submit for approval (+ confirmation modal with cost and impact) |
| Coverage After Replen | → | Projected coverage |
| 0% below target (orange) | → | ✓ Target met (green) |
| Configuration Setup | → | Define coverage & products |
| Distribution Center A / Alpha / Central Hub | → | Distribution Center Alpha (DC-A) — identical across every screen |
Structural improvements
Turn Screen 4 into a decision surface
Fixed summary bar at top (total units, cost estimate, overall target gap, #SKUs below target). Inline edit of Replen Units with immediate recalculation of Projected Coverage. Default sort by target gap (worst first). Warning icon on critical rows.
Progressive disclosure in Step 1
"Run now" shows only Name + Recipients. "Schedule for later" expands frequency, days, time, and end date. Removes ~60% of the noise from the most common case without losing power for the advanced one.
Unified taxonomy platform-wide
"Distribution Center Alpha (DC-A)" used in Home, Step 2, and Step 3. Same rule for Market / Territory / Sites (ID + human name, always). One object, one canonical label.
Add Step 3: Review & Confirm
Compact summary of when it runs, geographic scope, products, estimated cost, and coverage impact. Edit-per-step without restarting. Submit only after this — kills the anxiety of today's blind CTA.
Typographic hierarchy + semantic color
4 typographic weights (label / value / metric / heading) + color by state (success green, warning amber, critical red, neutral gray). Today everything is black — the eye doesn't know where to land and 82% below target has the same visual weight as the column label.
Signal dropdown dependencies
Disabled state + skeleton + helper text ("Select Facility Type first"). Or, better: collapse into a single multi-level cascader when the hierarchy is rigid. Makes the dependency graph visible instead of leaving users to discover it by failing.
