Logistics Design System
Overview
To streamline UX and brand cohesion across our company's digital footprint, our team developed a comprehensive design system that serves two waste logistics platforms—one acquired and one developed in-house. Each platform includes a web app, mobile app, and public portal, previously inconsistent in design, accessibility, and component implementation.
The Challenge The two platforms had diverging visual languages, tech stacks, and user experiences. Unifying them required a system that was scalable, brand-aligned, and accessible - while remaining flexible enough to support different frontend frameworks (React and Angular)
Our ApproachWe established tokens, color palettes, typography, spacing and components in a loosely atomic structure in Figma while incorporating brand and accessibility guidelines from the start.
Figma
Zeroheight
React
Angular Material
DocumentationWe documented design tokens, patters, and usage guidelines using Zeroheight, giving developers, designers, PMs and teams a single source of truth.
DevelopmentDevelopment was done in Angular and Reach. This required a complex structure of Figma components to support variances in the UI capabilities and behaviors.
Foundations
Specialized Logistics Components
Complex Mobile & Web Components
Outcomes
- Reduced design to development handoff times by standardizing deliverables and leveraging reusable assets
- Reinforced a cohesive brand identity across public and internal tools
- Enabled future scalability with documented, accessible foundations.
Before
After
