Personal project
2025
Redesigning Indellia's review-analytics dashboard for clarity under density
Creating a portfolio system that balances storytelling, visual personality, and long-term scalability.
Role
Senior UI/UX and Web Designer
Timeline
8 weeks · end-to-end
Platform
Web Application
Deliverable
hi-fi dashboard
Creating a structure around storytelling
Problem statement
Brand managers use this dashboard daily to catch rating drops and sentiment shifts before they affect sales. But the current screen presents every metric — KPI, gainer, drainer, chart, and breakdown — at equal visual weight in dense, uncompressed tables. Users report needing 3–4x longer than expected to find a single answer ("Which product tanked this week and why?") and frequently miss negative-review spikes buried below the fold.
The redesign goal: preserve full analytical depth for power users while making the single most important signal — what changed, and how badly — visible in under 5 seconds.
Goals
Business goals
~ Reduce support tickets tied to "can't find X" by 40%
~ Increase weekly active usage of Saved Views & Alerts
~ Shorten average time-to-insight per session
User goals
~ Spot rating drops and negative-review spikes immediately
~ Compare products/brands without cross-referencing 4 tables
~ Trust the data — clear labels, real context, no ambiguous icons
Balancing personality with clarity
Structured audit against Nielsen's 10 usability heuristics.
Visibility of system status
Fail
No loading, empty, or last-updated states; users can’t tell if data is fresh or if a filter silently returned nothing.
Match between system and real world
Partial
Jargon like "Drainers" and "MTD" plus unlabeled flag/thumbnail icons assume prior training rather than plain language.
User control & freedom
Partial
"Clear All" exists, but there’s no undo for filter changes and no explicit run action — every change fires immediately.
Consistency & standards
Fail
Filter fields, buttons, and table headers use different heights, colors, and border styles on the same screen.
Error prevention
Partial
Broken product thumbnails (flag-emoji placeholders) ship to production with no image fallback.
Recognition rather than recall
Fail
Users must scroll past 4 tables and 4 charts to mentally reconstruct "what changed this week" themselves.
Flexibility & efficiency of use
Partial
Saved Views and Alerts exist but carry no visual priority; there’s no fast path for the daily 30-second check.
Aesthetic & minimalist design
Fail
A top-line KPI and an 11px table cell get near-identical visual weight — nothing signals importance.
Recognize & recover from errors
Fail
Zero-result filter combinations produce blank regions with no explanation or recovery path.
Help & documentation
Partial
Derived metrics (score deltas, "Drainers") have no inline definitions or tooltips for new users.
Key usability issues
1
No visual hierarchy
Uniform sizes and card styles across KPIs, tables, and charts remove any sense of priority.
2
Repetitive dense tables
Gainers, Drainers, and low-rated products repeat near-identical columns in three separate tables.
3
Illegible microtext
Table cells run at 11px with low-contrast gray — fatiguing for a screen used many times a day.
4
Trust-eroding imagery
Flag emoji and mismatched thumbnails stand in for product photos, casting doubt on the data itself.
Research assumptions
Users scan, not read
Analysts open the dashboard several times daily for a quick health check — the first viewport must carry the headline signal.
Questions beat navigation
Most sessions start with a question ("what dropped?"); natural-language search can short-circuit table hunting entirely.
Filters should be deliberate
Users compose multi-field queries; an explicit Run action prevents half-configured filters from firing misleading results.
Priyank Shah
Brand Analytics Manager
"I need to know within a minute if something is on fire — not after scrolling six charts."
Goals
~ Catch rating drops before leadership asks
~ Compare her brand against competitors weekly
Frustrations
~ Scrolls past irrelevant tables to reach her brand
~ Cross-references two tables to see what changed
Marcus Webb
E-commerce Category Director
"I’d rather just ask the tool a question than learn where every number lives."
Goals
~ Fast portfolio-wide health check between meetings
~ Share a single view with retail partners
Frustrations
~ No search — everything requires manual filtering
~ No shareable summary of "this week in one view"
Information architecture — restructured around intent
Before — flat, one long scroll
Dashboard
~ Filter bar (7 equal-weight fields)
~ 4 KPI numbers
~ Gainers table · Drainers table · Low-rated table
~ Brand stats + score trend
~ 4 unrelated charts stacked at the bottom
After — layered by intent
Dashboard
~ AI search & chat — ask instead of hunt
~ Scoped filter row + explicit Run / Save actions
~ KPI cards with deltas and drill-in ("Show")
~ Gainers / Drainers — one table pattern, clear +/− framing
~ Distributions — rating & sentiment side by side
~ Alerts, Saved Reports, Export promoted to global nav
Task flow — "why did this product's rating drop?"
Wireframes & design exploration
Three lo-fi structures were tested with 5 internal analysts; the AI-search-led layout won on both comprehension speed and preference, then went through two visual iterations.
V1 — KPI strip first
V2 — AI search led (selected)
V3 — master / detail split
A — Dense, data-forward
Kept most tables intact with stronger type hierarchy only. Familiar, but failed the 5-second scan goal.
B — AI search led (selected)
Leads with natural-language search and KPI cards with drill-ins, then one reusable table pattern. Fastest comprehension in testing.
C — Summary-only digest
A generated text digest of the week. Compelling, but hid the underlying data users still needed to verify.
The redesigned dashboard
AI-assisted search up top, KPI cards with deltas and drill-ins, a single reusable table pattern for Gainers and Drainers, and grouped distribution charts — on a calm one-accent blue system.
AI-assisted search
A persistent search/chat bar lets users ask “which Apple products lost rating this month?” instead of hunting through tables.
KPI cards with drill-in
Five scannable cards pair each number with a color-coded delta and a “Show” action that filters the tables below.
One table pattern
Gainers (+) and Drainers (–) share a single component — real product imagery, copyable item IDs, and consistent columns.
Deliberate filtering
Filters compose left-to-right and apply on an explicit Run, with Save for recurring views — no more accidental half-queries.
Accessibility improvements (WCAG 2.2 AA)
Each fix traces to a specific violation in the legacy screen.
1.4.3 Contrast (Minimum)
Body and table text raised to ≥7:1 against white; blue header text on #2e75f0 verified at AA for its size.
1.4.1 Use of Color
Gains/losses pair color with +/– signs and arrows; sentiment legend adds text labels, not swatches alone.
2.5.5 Target Size
Filter fields, Run/Save buttons, and “Show” drill-ins sized to a 44px minimum hit area.
2.4.7 Focus Visible
A 2px visible focus ring on all interactive controls, including table row actions and chart toggles.
1.4.4 Resize Text
Fluid type scale reflows cleanly at 200% zoom; tables collapse to stacked cards below 900px.
4.1.2 Name, Role, Value
Trend sparklines, star ratings, and thumbnails carry descriptive aria-labels for screen readers.
Design system considerations
A tight, one-accent palette pulled from the final UI, with semantic colors reserved strictly for data meaning.
Primary
#2e75f0
Primary Deep
#1a4fc0
Primary Soft
#e7effe
Ink
#1f2430
Positive
#34a853
Negative
#e5484d
Blue reserved for navigation, headers, and primary actions
Green / red used only for semantic data (gains, losses, sentiment)
Type scale 24/16/14/12px — minimum table text raised to 13px
8px spacing grid; 44px minimum interactive targets
One table component reused for Gainers, Drainers, and low-rated lists
Elevation via soft shadow tokens; borders reserved for data separation
Key UX decisions
Lead with AI search, not filters
Session recordings showed most visits start with a question. Natural-language search collapses a 6-step filter-and-scroll flow into one input, while classic filters remain for precise queries.
Explicit Run / Save actions
Auto-firing filters produced misleading intermediate results. A deliberate Run action lets users compose a full query; Save promotes the recurring daily check to one click.
KPI cards with deltas and drill-ins
Each KPI now answers “how much, which direction, and where?” — the color-coded delta chip and “Show” action remove the cross-referencing that drove the biggest complaints.
One reusable table component
Merging three near-identical tables into one pattern (with +/– framing for Gainers vs. Drainers) halves vertical scroll and builds a single mental model.
Semantic color discipline
Blue is reserved for structure and actions; green and red appear only where they carry data meaning — restoring the pre-attentive value of color that the legacy screen had diluted.
Before → After: The full redesign
A head-to-head comparison of the legacy eCommerce Insights interface and the redesigned Indellia dashboard — showing the shift from feature-overloaded tables to a clarity-first, AI-led analytics experience.
What was broken
Cluttered table-first hierarchy with no clear visual priority
No AI or natural-language search — users had to know the filter taxonomy upfront
Six fragmented filter dropdowns with no time-aware or contextual defaults
Brand equity gap — generic eCommerce Insights identity, no product personality
What was fixed
Intent-based navigation — AI Chat as the primary entry point, structured below
Conversational AI search bar replaces blind taxonomy drilling — faster first interaction
Unified filter rail with smart time-range default — from 6 dropdowns to one coherent row
Rebranded as Indellia — unified visual system, clear product identity and brand equity
Before
Legacy eCommerce Insights — dense, table-first hierarchy; fragmented filters; no AI search layer; no recognisable brand equity.
Expected business impact
-45%
Time-to-insight per session
+18%
Task completion on “find biggest mover”
+30%
Adoption of AI Chat & Saved Reports
-40%
Support tickets tagged “can’t find X”
Success metrics
METRIC
BASELINE
TARGET
MEASUREMENT METHOD
Time to identify top mover
~90 sec
< 15 sec
Moderated usability testing, task timing
Task success rate
68%
90%+
Unmoderated task-based study
AI search weekly usage
—
50%+ of sessions
Product analytics
WCAG AA pass rate
42%
100%
Automated + manual audit (axe, VoiceOver)
Saved Reports weekly usage
12%
35%+
Product analytics