ByBox — Thinventory

Project summary

ByBox is a UK supply-chain technology company that delivers spare parts to field engineers overnight through a nationwide network of smart lockers. Its software platform, Thinventory™, connects the locker hardware, the mobile tools used in the field and the back-office systems into a single inventory operation.

As the in-house UX/UI designer I worked across this ecosystem: the on-screen experience of the lockers themselves, the mobile applications engineers and couriers use to drop off and collect parts, and the foundations of a shared design system to keep everything speaking the same visual language.

Out of respect for a confidentiality agreement, this case study shows the design process — research, story mapping, prototyping and usability testing — rather than the production product screens.

The challenge

The products had grown over many years, each with its own look, terminology and interaction patterns. Field engineers use them in conditions a desktop designer rarely faces: outdoors at 6am, with gloves on, in direct sunlight, often on small embedded screens driven by a hardware keyboard rather than touch.

Every extra second at the locker multiplies across thousands of daily collections. The brief was therefore twofold: make each individual flow fast and error-proof, and give the whole product family a consistent, recognisable interface aligned with the brand.

Discovery & story mapping

I started from the operation: mapping how parts move through lockers and how engineers, couriers and back-office users actually behave around them. Working with product and engineering, we ran story-mapping sessions that turned a tangle of stakeholder requests into a prioritised, shared backlog — and surfaced the dependencies between hardware, data and interface early.

Prototyping & information architecture

From the map I moved into flows. I designed the journeys for the field app — finding an available locker, opening the right door, verifying parts, scanning return labels and confirming — and wired them into clickable Figma prototypes, including recovery paths for when the door or the parcel doesn't match expectations. Laying the whole information architecture out at once exposed dead-ends and redundant steps before a single line of code was written.

Usability testing

We validated the work with real users. In one-to-one sessions and remote unmoderated tests, I gathered observations and direct quotes, then clustered them on an affinity board — separating genuine usability issues from nice-to-haves and translating each finding into a concrete improvement to the flows, the terminology and the on-screen guidance.

Interaction & component design

Down at the detail level, I designed the reusable building blocks and their behaviours: list items that reveal a delete action on swipe, clear states for serial, condition and reference data, and consistent feedback for success and error. Small interactions, designed once and reused everywhere, are what make a fast flow feel effortless under gloves and sunlight.

The design system

To stop every app reinventing its own buttons, I set up the foundations of a design system: a UI colour system with primary, accent, semantic and data-visualisation palettes, a shared icon set, and reusable components documented for both designers and developers.

An AI-first design-to-code pipeline

More recently I've made this work genuinely AI-first. Starting from the Figma designs, I use Claude via the Figma MCP to turn screens into working .NET MAUI prototypes in XAML, then compile them to Android and macOS — putting a real, running app in front of users instead of a clickable mock-up. It collapses the distance between a design decision and a testable build from weeks to days.

I use AI earlier in the process too: auditing the information architecture, clustering and synthesising the pain points from stakeholder interviews, and generating dashboard concepts I can react to and refine in minutes. AI does the heavy lifting — first drafts, restructuring, exploration — while the design judgement, the testing with real users and the final decisions stay firmly mine.

The result

A research-led, consistent interface language across the locker and mobile experiences; drop-off and collection flows that engineers complete in seconds without training; and a design system that lets new features ship looking like part of the family rather than an afterthought.

The system pulled a fragmented product family — around ten apps across mobile, web and locker-terminal — into a single visual language, with roughly 180 icons and 150 reusable components (buttons, headers, cards, fields and more) documented for designers and developers alike. It serves a nationwide locker network handling thousands of collections a day, and the AI-first pipeline takes a screen from Figma to a testable, running build in days rather than weeks.