Designing a client’s web portal for supply chain diagnostics
My role
Visual / UX Designer
Year
2023
Introduction
I led design for Brambles’ entry into data-driven asset tracking, creating both a customer-facing web portal powered by BLE-enabled pallets and a program-wide atomic design system. I audited fragmented libraries, set a migration plan, mentored an in-house designer, and facilitated cross-functional workshops to align on requirements. The result was a validated portal that gave customers actionable visibility into assets, a scalable design system that improved developer velocity, and a stronger internal design capability. Positioning Brambles as a credible player in digital supply-chain services.
Client
Brambles
Sector
Industrials
Project team
Product Owner
Business Analyst
Visual / UX Designer
UX Designer
Solution Architect
Front-end Developer
Back-end Developer
QA Tester
Timeline
9 weeks
Constraints
Align with emerging BLE hardware capabilities. Design for a global B2B audience. Reconcile fragmented component libraries with production code. Ensure scalability across future digital products.
Overview
Problem
Brambles was evolving from a pure logistics company into a digital service provider. To compete, they needed to offer customers real-time asset visibility. Where pallets are, how they’re performing, and whether they need intervention. The challenge was twofold: create a credible product experience for asset tracking that aligned with customer workflows and build a scalable design system to avoid fragmented, one-off solutions across future supply-chain tools.
Challenge
Deliver an intuitive web portal that gives customers usable, actionable visibility of assets. Establish a design system to unify patterns, reduce delivery cost, and scale to future digital products. Mentor and grow in-house design capability. Improve developer velocity by eliminating code/design inconsistencies.
Solution
Web portal giving customers real-time visibility into pallet location and condition, with clear alerts and drill-downs. Program-wide design system codifying atomic components, design tokens, and states. Documented for reuse across future products. Specs and governance for migrating from fragmented libraries to a unified system. Mentorship and team-level coaching to strengthen Brambles’ design capability.
Results
Portal design delivered a credible MVP experience that helped customers understand asset flows and supply-chain behaviour. Brambles established itself as a competitor in data-driven asset tracking, not just pallet pooling. Design system reduced UI inconsistency, improved developer velocity, and provided a foundation for future digital services. Mentorship strengthened in-house design skills and collaboration practices.
My process
Research activities
Stakeholder workshops to map business needs (cost savings, asset recovery, efficiency gains). Interviews with supply-chain customers to capture pain points and expectations. Audit of design artefacts vs production code to surface inconsistencies and technical debt.Competitive review of asset tracking and IoT dashboards.
Definition activities
Information architecture for asset tracking. Design-system structure. Principles.
Design activities
High-fidelity prototypes for portal workflows. Atomic components. Documentation.
Testing activities
Usability tests with customers. Stakeholder reviews. Cross-team alignment sessions.
Iteration activities
Refined flows and layouts.
Handoff activities
Developer-ready design system. Portal specs. Governance plan for ongoing system stewardship.
Research
Insights in the beginning
Customers wanted clear, actionable insights (e.g. “Where is my shipment now?”) more than raw telemetry. Discrepancies between component libraries and live code were slowing delivery and creating UI debt. Minimal cross-sell prompts within loyalty contexts to nudge ticket/snack purchase.
What we would track post-launch
User task success in finding asset status and insights. Reduction in asset loss and recovery time. Adoption rate of BLE-enabled pallets with portal access. Developer velocity and reuse of design system components.
Key decisions
Actionable over raw data
Present asset state as alerts and insights with drill-downs, not raw sensor feeds — this is because customers cared about exceptions and actions, not dashboards full of noise.
Atomic design system
Define tokens, components, and templates covering typography, colours, layout, data-visualisation elements, and states — this was to ensure consistency across portal and future tools and reduce design/engineering divergence.
Audit and migration plan
Document discrepancies between existing libraries and production code, and define a phased migration — this was to avoid costly parallel systems and bring engineering into alignment.
Mentoring in-house capability
Mentor a product designer, run critiques, and share feedback rituals — this was to grow Brambles’ internal design maturity and reduce their reliance on external consultants.
Cross-role alignment
Facilitate workshops with product owners, ops, and research to define requirements and prioritise — this was to ensure the portal balanced business imperatives with customer usability.
Risks and how they were managed
Fragmentation risk
Mitigated by documenting existing inconsistencies and phasing migration.
Complexity of BLE data
Distilled into clear user-facing insights and alerts.
Stakeholder divergence
Aligned through facilitated workshops and evidence from usability tests.
Designing a client’s web portal for optimising call centres
I designed a web portal that compares real-time performance benchmarks with adjustable forecasts to help call centre managers make smarter resource allocation decisions, improving overall efficiency.
