How I helped Nexleaf evolve ColdTrace from legacy interface patterns into a responsive product system spanning equipment, maintenance, and reporting across desktop, tablet, mobile, Figma, and Storybook.

This was a progressive system build, not a one-off redesign. Over five stages, the interface debt was paid down while the product kept shipping. Each stage was useful on its own, and each set up the next.

Evolving ColdTrace into a Responsive Product System

ColdTrace is Nexleaf’s platform used by health ministry teams to monitor cold-chain equipment, manage inventory, review performance, and respond to issues across facilities. I led a progressive redesign of the platform, starting with an audit and mini style guide, then evolving the experience into reusable responsive flows, a dedicated Figma design system, and an AI-assisted Storybook component library for engineering.

B2B SaaS Operational Workflows Responsive Design AI-assisted Development Design Systems Storybook

Context

A progressive system build, not a one-off redesign.

ColdTrace supports health ministry teams responsible for cold-chain equipment across distributed facilities. Users need to monitor equipment, review performance, manage inventory, track device associations, handle service requests, and respond to operational issues.

A typical moment looks like this: a technician stands in front of a vaccine fridge flagged as faulty, phone in hand. They need to confirm the status, check the open issue, and raise a service request before moving to the next room. The same record, on the same day, might be reviewed by an operations manager on a desktop, filtering hundreds of items across a region. One product, two completely different working postures.

The product carried important data, but the experience had grown organically. There were earlier UI kit assets in place, genuinely useful ones:

• Old cards existed, but with generic placeholders and example content rather than real product patterns.
• Old forms covered basic inputs, buttons, tabs, chips, dropdowns, and calendars.
• An old theme defined colours, typography, text styles, accents, and error states.

These foundations were useful, but ColdTrace needed reusable product decisions, not just reusable UI elements: rules for how pages behave, how actions are prioritised, and how information adapts across devices.