I designed Sagar Distilleries' dashboard by starting with wireframes to map data flows, then prototyping interactive charts in Figma, and building the final responsive dashboard with Next.js. The result: real-time data visualization, mobile-friendly layouts, and a 40% improvement in the team's reporting efficiency.
I designed Sagar Distilleries' dashboard by starting with wireframes to map data flows, then prototyping interactive charts in Figma, and building the final responsive dashboard with Next.js. The result: real-time data visualization, mobile-friendly layouts, and a 40% improvement in the team's reporting efficiency.
Project Overview
Client: Sagar Distilleries
Role: Lead UI/UX & Full Stack
Goal: Real-time Dashboard
Stack: Next.js, Tailwind, Recharts
Sagar Distilleries was managing massive sales data across 7 provinces using static reports. They needed a way to visualize daily sales, track distributor performance, and manage inventory in real-time.
What Was the Challenge for Sagar Distilleries?
Executives wanted to check sales on their phones while traveling. Distributors needed to see their own targets on tablets. The dashboard had to be:
- Dense but Readable: Showing thousands of rows.
- Performance-First: 2s load time on 3G.
- Role-Based: Admin view vs. Sales Rep view.
How Did the "Card" Approach Solve Mobile Dashboard UX?
Instead of shrinking a massive table, I designed "Summary Cards" for mobile. Sales summaries were prioritized. Tables hidden behind details.
How Did We Optimize Dashboard Performance for 3G Networks?
We used lightweight SVG charts (Recharts) to keep the bundle size under 150KB.
What Were the Final Results for Sagar Distilleries?
The new dashboard reduced reporting time from 2 days to instant real-time access. Sales reps missed 40% fewer opportunities.
Frequently Asked Questions
Need a Custom Dashboard?
I build data tools that help businesses make better decisions.