Analytics dashboard for a reusable packaging startup

Building the dashboard Recube's partners actually needed

Recube partners with restaurants and malls to replace single-use packaging with a reusable container loop. As their sole UX and frontend designer, I built the analytics dashboard from zero, giving 50+ restaurant partners their first look at live inventory counts, return rates, and sustainability impact.

Partners were flying blind

The old interface was cluttered and static. No live data, no impact metrics, no quick way to act. Restaurant managers couldn't tell how many containers were in the field, or show customers any proof of their sustainability work.

• Inventory updated manually: Stockouts happened because nobody knew stock levels in real time
• No shareable impact data: Partners had sustainability wins but nothing concrete to show customers
• No search: Finding a specific record meant exporting spreadsheets and hunting manually

The old interface: cluttered, static, no actionable data

4 interviews, 3 user types, 1 clear pattern

I talked to restaurant managers, mall operators, and Recube's internal ops team. Every group wanted the same thing: data they could act on without digging.

• Restaurant managers wanted shareable numbers: waste diverted, containers returned. Something to show customers.
• Mall operators needed live inventory alerts so they could act before a stockout, not after
• Both groups wanted the return flow to be obvious. Users often didn't know where or how to return containers.

A dashboard built around two questions: what's happening now, and what's the trend?

I designed for two mental modes: quick-scan (is everything OK right now?) and deep-dive (show me the numbers over time). Live status sits front and center; search and filters are discoverable without any training.

Dashboard overview showing real-time metrics and impact data

Research → wireframes → Figma → shipped

1. Information Architecture: Research surfaced two distinct use cases: quick operational checks and longer-term trend analysis. I split them into a live status view and a filterable data table, so neither user type had to dig through the other's workflow.

2. Wireframes: Low-fidelity wireframes let me validate hierarchy with stakeholders before any visual polish. The main call was what to show above the fold. We landed on inventory status and the three most-watched impact metrics.

Early wireframes defining dashboard layout and hierarchy

3. High-Fidelity in Figma: Green palette tied to Recube's brand; high-contrast text kept data legible at a glance. I built a lightweight component library so the dev handoff stayed clean with no one-off styles.

Advanced search functionality

Empty state and search prompts

4. Dev collaboration & QA: I sat in on sprint planning to flag anything technically risky before it got built. QA sessions caught edge cases that design reviews miss: empty states, loading skeletons, error messaging.

Partners could finally prove their sustainability ROI

• Managers could share CO₂ saved and containers returned directly with customers. It was a number they'd never had before.
• Mall operators got proactive low-stock alerts, ending reactive scrambling during peak hours
• Ops team went from manual reporting to live system health monitoring