UX / UI Design · Data & Analytics

E-Commerce BI Dashboard

The most frequently used interface in the product — yet it consistently failed its users. No item-level data, no reliable channel breakdown, no way to act on what mattered. This project rebuilt it from the ground up.

Role

Lead Product Designer

Duration

1 month

Tools

Figma, Google Stitch, Gemini

Type

B2B SaaS · BI Dashboard

E-Commerce BI Dashboard

Users couldn't answer three basic questions

The dashboard was the first screen customers saw every day. Yet it consistently blocked rather than enabled decision-making. Three questions kept surfacing across every research touchpoint:

The result: low adoption, poor data trust, and users increasingly relying on external tools like Sellerboard to fill the gap.

Three tracks before a single design decision

To build a shared understanding across product, engineering, and design before touching any frames, I ran two research tracks in parallel.

01

Customer Interviews

Five interviews with customers and one partner agency. Findings synthesised into an affinity map identifying the key pain clusters.

02

CSD Workshop

A Certainties, Suppositions, and Doubts session with the cross-functional team to surface assumptions and align on unknowns before any design decisions were made.

Four problem clusters from affinity mapping

CSD Matrix — Certainties, Suppositions, and Doubts from the discovery workshop

The CSD matrix stopped us designing the wrong thing

During alignment sessions, it became clear that data discrepancies flagged by users weren't a front-end problem — they sat with data engineering, who were mid-way through a separate pipeline project. Designing for a backend that didn't exist yet would be wasted effort.

Rather than pause, we scoped deliberately: build an MVP that worked within current constraints, and design ahead for what would come next — without shipping it.

MVP scope

  • High-level KPI summary cards with period comparison
  • Item-level table with a defined, agreed set of data points
  • Total gross sales bar chart
  • Marketplace-level filtering across the whole view
  • Manual refresh trigger in place of automated pipeline syncing

Designed ahead, not shipped — MVP 2

  • Forecasting views — designed to avoid future rework, held back until the data layer was ready
  • Bar chart marketplace breakdown — technically out of reach for this release
  • External integrations — Google Ads, Shopify, Sellerboard

Competitive analysis and dashboard best practices

Before defining the design direction, I reviewed competitor products and established UX best practices for BI dashboards to pressure-test assumptions from user research. I analysed over five competitors and reviewed numerous articles on effective dashboard design.

Three key takeaways shaped the direction:

Meet Mandy — the E-Commerce Manager

User interviews and market research revealed multiple stakeholders touching the dashboard: logistics, finance, customer care, product management, and business development. But one primary persona emerged — the E-Commerce Manager. Responsible for daily performance monitoring, channel optimisation, and short-term planning. She needs fast answers, reliable data, and actionable breakdowns.

Persona: Mandy Management — E-Commerce Manager

Mandy Management — 38-year-old E-Commerce Operations Manager, data-driven, busy, and highly analytical

Mapping Mandy's ideal workflow

The optimal user journey maps Mandy's daily workflow across four stages: Awareness, Investigating, Planning, and Execution. Starting with a morning health check of marketplace and product performance, drilling into underperforming channels, planning adjustments based on detailed insights, and executing changes directly from the dashboard.

The journey map was also used as a design critique tool — identifying where the existing dashboard broke down (investigation and planning stages) and where improvement opportunities were highest.

Optimal user journey map for Mandy Management

Optimal user journey — Awareness → Investigating → Planning → Execution, with tasks, feelings, and improvement opportunities mapped at each stage

Using AI to explore fast, decide faster

Before committing to a direction in Figma, I used Google Stitch and Gemini to rapidly explore layout approaches, information hierarchies, and visual systems. This let me pressure-test multiple directions in hours rather than days.

The competitor analysis ran alongside this — five leading BI dashboards were audited to understand interaction patterns users already knew. The key insight: clarity beats customisation. The best dashboards lead with high-level insight and layer detail on demand. Build-your-own was a power-user edge case, not a core expectation.

AI exploration — layout direction 1

Exploration 1 — Precision Dashboard, compact layout

AI exploration — layout direction 2

Exploration 2 — coloured KPI card variant

AI exploration — layout direction 3

Exploration 3 — OmniERP channel-first layout

From overloaded to clear at a glance

The final design centres on a four-card KPI summary at the top — Today, Yesterday, Current month, Last month — each showing total gross sales with a percentage delta. Below, a total gross sales bar chart gives temporal context, followed by the best-selling products table with item-level profitability data.

Every view is filterable by period and marketplace. The layout respects the way managers actually work: scan the headline numbers first, then drill into what needs attention.

Sales Dashboard — KPI summary cards overview

The Sales Dashboard — four KPI summary cards, total gross sales bar chart, and best-selling products table

Total gross sales chart with best selling products

Total gross sales over time with the best-selling products table below — item-level stock, gross profit, and units sold

Trends Dashboard — monthly item-level comparison

Trends Dashboard — item-level monthly sales comparison across marketplaces, with inline sparklines and period-over-period deltas

Six customers, three key findings

After the initial design was complete, I tested the prototype with six customers before handoff. The goals: assess comprehension of the dashboard data, and test discoverability of the marketplace filter and the rich tooltip on KPI cards.

Before: tooltip triggered by a dedicated button

Before — tooltip triggered by a dedicated button that users consistently missed

After: clicking the number opens the breakdown

After — button removed, clicking the number directly opens the marketplace breakdown

Rich tooltip — marketplace breakdown by channel

The tooltip in detail — per-channel sales with percentage deltas, expandable metric rows

Final Sales Dashboard after testing adjustments

Final design after user testing — tooltip interaction updated, Trends quick links integrated

Dashboard walkthrough

A short walkthrough of the final design — from the KPI summary cards through to the marketplace tooltip and Trends navigation.

Next project

Automation Software