Brambles

Web Portal
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
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-
services.
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.

My role

Visual / UX Designer

Team

Product Owner
Business Analyst
UX Designer
Solution Architect
Front-end Developer
Back-end Developer
QA Tester

Timeline

9 weeks

Year

2023

Project name

Data-Driven Asset Tracking & Design
System

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.
  • 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.

Research

Activities

  • Stakeholder workshops to map business needs (cost savings, asset recovery, efficiency gains).
  • Usability testing and 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.

Insights

  • 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 to 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.

Process

1. Discover

  • Stakeholder workshops.
  • Customer interviews.
  • Tech audits.

2. Define

  • Information architecture for asset tracking.
  • Design-system structure.
  • Principles.

3. Design

  • High-fidelity prototypes for portal workflows.
  • Atomic components.
  • Documentation.

4. Validate

  • Usability tests with customers.
  • Stakeholder reviews.
  • Cross-team alignment sessions.

5. Deliver

  • Developer-ready design system.
  • Portal specs.
  • Governance plan for ongoing system stewardship.

Key decisions

Actionable over raw data

Present asset state as alerts and insights with drill-downs, not raw sensor feeds. Because customers care about exceptions and actions, not dashboards full of noise.

Atomic design system

Define tokens, components, and templates covering typography, colours, layout, data-viz elements, and states. This ensured consistency across portal and future tools; reducing design/engineering divergence.

Audit and migration plan

Document discrepancies between existing libraries and production code, and define a phased migration. This avoided costly parallel systems and brung engineering back into alignment.

Mentoring in-house capability

Mentor a product designer, run critiques, and share feedback rituals. This grew Brambles’ internal design maturity and reduced reliance on external consultants.

Cross-role alignment

Facilitate workshops with product owners, ops, and research to define requirements and prioritise. This ensured the portal balanced business imperatives with customer usability.
Three screens from the web portal designed for Brambles, formatted for a mobile viewport.

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.
Up Next

Vodafone

Web Portal
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.
An arrow pointing right.
A sim card.