The Challenge

The client, a mid-sized logistics company, was struggling with an outdated inventory management dashboard. Users reported high cognitive load, frequent errors in data entry, and a steep learning curve for new employees.

Key Goals:

1. Reduce time-to-task for common inventory operations.
2. Modernize the visual interface to align with new brand guidelines.
3. Improve accessibility for warehouse staff using tablets.

The Solution

We approached this project with a “mobile-first” mindset, even though the primary use case was desktop. This forced us to prioritize content and actions ruthlessly.

Component System

We built a custom component library based on Radix UI primitives to ensure accessibility and keyboard navigation were handled correctly from the start.

// Example of the accessible Card component we built
import { Slot } from '@radix-ui/react-slot';

export const Card = ({ children, asChild, ...props }) => {
  const Comp = asChild ? Slot : 'div';
  return (
    <Comp className="p-6 bg-white rounded-xl shadow-sm border border-slate-200" {...props}>
      {children}
    </Comp>
  );
};

Visuals

We used a soft, clean aesthetic with high contrast for critical data points.

Results

After a 3-month beta period, the client reported:

• 40% reduction in time spent on daily inventory checks.
• ZERO critical data entry errors reported in the first month.
• Positive feedback from warehouse staff regarding tablet usability.