Sell Out Data: Transforming eCommerce Reporting
Redesigning a Global FMCG Conglomerate's sell-out data management system from the ground up — replacing a legacy tool with a modern, accessible platform that cut editor time by 50% through automation and centralized multi-currency FX management.
The Challenge
The enterprise's sell-out data — the record of products leaving retail shelves to consumers — was managed through an aging legacy system that created bottlenecks across multiple business units. Editors struggled with manual data entry, fragmented currency conversions, and limited visualization tools.
Legacy System Limitations
The existing sell-out data system was outdated and lacked modern UX patterns. Users reported frequent errors, slow load times, and an unintuitive interface that made day-to-day data management frustrating and error-prone.
Manual Data Entry Bottleneck
Editors spent excessive time manually entering sell-out data point by point. Without template-based uploads or automation, the process was slow, repetitive, and vulnerable to human error — impacting data accuracy downstream.
Fragmented FX Management
Foreign exchange rates were managed ad-hoc across different teams and spreadsheets. There was no centralized source of truth for currency conversions, leading to inconsistencies in multi-market reporting and financial discrepancies.
Limited Data Visualization
Stakeholders lacked real-time visibility into sell-out trends. Dashboards were either non-existent or static, forcing teams to rely on manual report generation. The goal was automated Tableau dashboards hosted on the Tableau server.
My Design Process
I followed a structured, user-centric design process — from initial stakeholder workshops to developer handoff — ensuring every design decision was validated with real users at each stage.
Research & Discovery
Through stakeholder workshops and user interviews, I uncovered the core pain points driving inefficiency. These insights directly shaped every design decision in the platform.
Key Personas
Pain Points Uncovered
- Manual data entry taking hours per reporting cycle
- No validation — errors discovered too late in pipeline
- FX rates managed in disconnected spreadsheets
- No role-based access control at account level
Design Opportunities
- Bulk template upload to replace manual entry
- Centralized FX rate management module
- Auto-generated Tableau dashboards
- Granular admin panel with notifications
The Bulk Excel Ingestion Anomaly & Inline Correction Flow
In early design reviews, users reported that regional partners frequently uploaded spreadsheets with malformed columns, missing cell rows, and local currencies. Under the legacy system, this caused complete ingestion failure, requiring editors to manually edit Excel files in a slow cycle that could take days for a single market.
Rather than building a simple "Fail and Reject" error banner, I designed a customized visual spreadsheet validation grid (the inline correction grid). When a file is uploaded, the engine parses columns, flags anomalies inline in real-time, and enables editors to edit and validate cell cells directly inside the browser before final submission. This removed the manual Excel round-trip and shortened the time editors spent debugging uploads.
┌────────────────────────────────────────────────────────┐ │ INLINE SPREADSHEET VALIDATION FLOW │ ├────────────────────────────────────────────────────────┤ │ 1. Bulk Upload (Excel/CSV Template) │ │ [ Upload Q4_APAC_Sales.xlsx ] ──> Automated Parser │ │ │ │ 2. Visual Error Grid (Messy Middle Solution) │ │ ┌──────────┬──────────────┬─────────────┬──────────┐ │ │ │ Row │ Product SKU │ Unit Price │ Status │ │ │ ├──────────┼──────────────┼─────────────┼──────────┤ │ │ │ Row 14 │ SKU-901-A │ $12.40 │ [OK] │ │ │ │ Row 15 │ NULL │ $124.00 │ [ERR] 💥 │ │ │ └──────────┴──────────────┴─────────────┴──────────┘ │ │ 💥 Reason: Missing SKU identifier. │ │ [ Edit Inline ] ──> [ Re-validate & Submit ] │ └────────────────────────────────────────────────────────┘
The Solution
I designed a comprehensive sell-out data management platform with four core modules — addressing every pain point uncovered during research while introducing automation that fundamentally changed how editors interact with data.
Performance Overview Dashboard
Performance Overview
LiveAutomated Data Input
The key innovation: template-based bulk uploads replaced tedious row-by-row manual entry. Editors download a pre-formatted template, fill in their regional sell-out data, and upload — with inline validation catching errors before submission.
Submit Sell Out Data
Upload your regional data using the template or enter manually.
Sell Out Data Management
Sell Out Records
248 recordsInterface Anatomy
The system manages sell-out data reporting from global retail partners across a three-stage pipeline: editors submit performance data, a two-stage approval chain validates it, and admins configure the partner records underneath. The green-themed UI follows enterprise design standards throughout.
Performance Overview Dashboard
The editor's landing screen: performance KPIs (YTD Performance vs Target, Sell-out Accuracy) up top, a task-status panel flagging pending approvals, and a country → model breakdown of sellout value, growth, and completion status underneath.
Admin & Approval Overview
The two-stage approval chain made visible as one queue: an admin can see exactly which user or approver still has remaining accounts to fill in or validate at each stage, and nudge them directly with a per-row Notify action.
Partner Details Management
Every partner record in one form: identity fields (Platform, Partner ID, Country, Partner Group), business configuration (activation date, model type, sellout margin, status), and the four-person workflow assignment — Editor, Back-up Editor, and two Approvers — that governs who can touch that partner's data.
Interface Highlights
- Status-driven queues — every table leads with a "remaining to fill in / validate" count, so the next action is never ambiguous
- Consistent escalation pattern — the same Notify action appears at every stage, from initial data entry through both approval rounds
- Multi-level data hierarchy — Zone → Country → Partner → Model for scalable organization
- Role-based workflows — dedicated fields for Editor, Back-up Editor, and dual Approvers ensure accountability
The Messy Middle
Every digital transformation hits a wall of legacy constraints. Here is the visual representation of my pivot from spreadsheet-based chaos to structured efficiency:
CHAOS (Legacy) TRANSITION (The Messy Middle) ORDER (System)
[Excel Files] --(Email)--> / [ Mapping Errors ] \ [Structured DB]
[Manual Data] --(Manual)--> | [ Version Control ] | ---------> [Validation API]
[FX Inconsistency]------> \ [ Human Fatigue ] / [Auto FX Engine]
^-------------------^
Pivot Point: Templating
Key Design Decisions
Template-based upload as the primary data input method
Rather than forcing editors into tedious row-by-row entry, the template upload became the default tab. Editors download a pre-formatted spreadsheet matching their region, fill it offline, and upload — reducing input time by 50% and virtually eliminating formatting errors through validation.
Centralized FX rate management with auto-application
Instead of letting editors manually apply exchange rates (which led to inconsistencies), I designed a centralized FX management module. Rates are set by admins once and auto-applied to all relevant data submissions, ensuring financial accuracy across multi-currency reports.
WCAG-compliant design system from day one
Accessibility wasn't retrofitted — it was embedded from the start. Color contrast ratios, keyboard navigation, screen reader support, and focus state indicators were designed into the component library. This gave the data app a modern feel while being usable by all team members.
Admin panel with calendar windows and notifications
Sell-out data has strict submission deadlines. I designed a calendar-based "input window" system where admins set open/close dates for data submission periods, with automated email notifications. This eliminated the need for manual reminder emails and reduced late submissions significantly.
Collaboration, Handoff & Governance
Building a complex platform across international borders required structured collaboration. We established a DesignOps workflow to bridge the gap between design concepts, developer execution, and business operations.
Steering Committee & RACI
We defined a RACI matrix to streamline decision-making. Monthly steering committee sessions with senior engineers, product managers, and localized data coordinators ensured feature updates stayed aligned with the developer backlog.
Design Tokens & Code-Sync
To eliminate handoff ambiguity, we translated Figma styles directly into responsive CSS and Tailwind theme tokens. Every component—from button paddings to alert banners—shares a unified token namespace with the code repositories.
Agile Standups & Teams Sync
We integrated design directly into the Agile cycle. Participating in daily stand-ups and sprint reviews on Microsoft Teams created an active feedback loop between developers, product owners, and regional data editors.
4-Step Contribution Loop
We created a standardized contribution model for custom regional requirements. Rather than ad-hoc overrides, new templates and currency columns follow a structured path: Request → Review → Component Draft → Verified Build.
Impact & Outcomes
The redesigned sell-out data platform transformed how the Global FMCG Conglomerate manages its eCommerce reporting across global markets. By replacing a legacy system with a modern, accessible, and automated platform, I delivered measurable impact across every dimension of the business need.
- Resolved User Pain Points: Every pain point uncovered during user interviews was addressed — from the cluttered data entry interface to the missing validation and disconnected FX management.
- 50% Faster Data Entry: Automation through template uploads replaced manual entry, cutting the time editors spent on data input by half while simultaneously reducing errors.
- Modern & Accessible: The platform achieved WCAG accessibility compliance, giving it a modern feel that made it easy for all users to input and manage sell-out data regardless of ability.
- Centralized Multi-Currency: The unified FX management module helped users handle multiple currency inputs with ease, eliminating spreadsheet-based workarounds and ensuring financial consistency.
- Complete Admin Capabilities: The admin panel for user management, partner management, sell-out input calendar windows, and automated notifications gave administrators full control over the platform lifecycle.