01 — Executive Summary
The Fragmentation of
CPG Reporting
Modern CPG organizations operate through multiple interconnected business functions, each generating vast amounts of performance data. Sales teams monitor revenue, shopper marketing evaluates retailer effectiveness, demand planning forecasts inventory, and social media teams measure engagement.
Although every department contributes to the same business objectives, their data often exists in isolated reporting systems. This fragmentation makes it difficult for executives to gain a unified understanding of business performance and slows strategic decision-making.
"To address this challenge, Tru Fru initiated the design of a centralized Sales Performance Dashboard that could consolidate critical metrics from Social Media, Shopper Marketing, Demand Planning, and Experiential Marketing into a single executive reporting platform."
The objective was to eliminate reporting silos, provide a zero-click executive overview, and enable stakeholders to drill down into department-specific analytics while maintaining a consistent React-based user experience.
02 — Business Context
Divergent Lenses on
Business Success
Tru Fru is a premium frozen fruit snack brand acquired by Mars Inc. Within the organization, different business teams measured success through different lenses, creating a need for a standardized intelligence platform:
03 — Problem Statement
The Cost of
Siloed Intelligence
Enterprise reporting relied on multiple disconnected dashboards owned by different business functions. This created several critical business challenges:
No Holistic View
Data remained siloed preventing executives from understanding overall business health.
Inefficient MBRs
Monthly/Quarterly business reviews required manual consolidation of reports.
Lagging Indicators
Leaders lacked a real-time view, delaying reactions to changing market conditions.
Misaligned Frameworks
Department heads struggled to compare goals against actuals using a consistent standard.
04 — Business & Design Goals
Establishing a Single
Source of Truth
- Eliminate reporting silos across CPG departments.
- Provide a single executive source of truth.
- Enable real-time monitoring of GSV, NSV, and ROI.
- Reduce manual effort for MBR/QBR reporting.
- Zero-Click Overview: Instant executive understanding.
- Department Intel: Tailored analytics per persona.
- Actionable Insights: Data that drives decisions.
- Scalable Architecture: Accommodate future KPIs.
05 — Interactive Prototype
Role-Based Dashboard
Simulator
Select a persona and reporting parameters in the sidebar to simulate how the React dashboard dynamically shifts its KPI focus to serve different enterprise stakeholders.
Configure persona parameters and click render to simulate dynamic metrics.
06 — Responsibilities
My Design Role
As the Product Designer, I was responsible for transforming complex business requirements into an intuitive enterprise analytics experience.
Stakeholder Collab
Info Architecture
Visual Design
Dev Handoff
07 — Success Metrics
Evaluation Criteria
- • Reduction in MBR prep time.
- • Faster executive decision-making.
- • Increased visibility across departments.
- • Higher adoption of standardized KPIs.
- • Reduced time to identify anomalies.
- • Faster analytical workflow completion.
- • Increased usage of drill-downs.
- • Higher stakeholder satisfaction.
08 — User Personas
Stakeholder Mapping
Each persona represented a unique set of objectives and pain points that directly influenced the dashboard architecture:
09 — Research & Discovery
Shifting from Charts to
Decisions
The discovery phase centered on business strategy and analytical workflows to ensure every visualization answered a real business question.
Business Req.
Defined the core objective: consolidate Social, Shopper, Demand, and Experiential into one view.
Stakeholder Sync
Shifted the design process from "What charts to build?" to "What decisions must this enable?"
KPI Framework
Established layered KPIs: executive-level health on top, followed by department-specific metrics.
10 — Design Process
Iterative Methodology
Balancing analytical depth with executive usability required a strict process:
11 — Journey Flow
Retail Executive
Interaction Flow
12 — Design Decisions
Architectural Choices
Zero-Click Overview
Executives must immediately understand business performance without navigating multiple reports or clicking filters.
Department Intel
Each functional team accesses analytics tailored to its responsibilities while maintaining visual consistency globally.
Scalable Architecture
The component ecosystem accommodates future departments and KPIs without requiring significant structural redesign.
Enterprise Simplicity
Despite presenting hundreds of metrics, the interface remains approachable and legible for users with varying analytical expertise.
13 — Key Features
Modules Delivered
14 — Technical Challenges
Challenges Overcome
Stakeholder Appeal
Designing a dashboard capable of appealing to diverse, often conflicting, CPG marketing and supply chain stakeholders.
Data Volume Display
Displaying hundreds of dense metrics clearly without overwhelming users, solved via a unified React component architecture.
15 — Final Solution
The Analytical
Ecosystem
The final solution delivered a modern enterprise dashboard that transformed fragmented retail metrics into an intuitive analytical experience. By emphasizing business storytelling, KPI prioritization, and interactive exploration, the design enabled stakeholders to move efficiently from executive summaries to deep operational insights.
16 — Outcomes & Impact