Work / B2B E-commerce / SaaS Redesign

Clove

Clove is a B2B e-commerce workflow that puts sales data, stock, PO management, and customer engagement at the user’s fingertips. Its Advertising Manager and Inventory tools had grown cluttered and hard to navigate, I redesigned them around how sellers actually decide.

Role
UX research, interaction design, UI redesign, validation
Domain
B2B e-commerce · SaaS
Methods
Contextual inquiry, interviews, usability testing, eye-tracking heatmaps
Scope
Advertising Manager + Inventory Management tools
Context
Product redesign engagement
Outcome
Lower cognitive friction, faster onboarding, less abandonment
Redesigned Clove case-management dashboard with color-coded breakdowns, KPI cards, and a prioritized claims table
The redesigned dashboard: case breakdowns, reimbursements, and progress readable at a glance.
Problem

Too much dashboard, too little decision

Amazon sellers operate in a highly complex, fast-paced environment where managing inventory, sales, and analytics simultaneously is necessary for survival. Despite the availability of data, sellers were overwhelmed, relying on infinitely scrolling, disconnected data tables that caused extreme cognitive overload and decision fatigue.

Clove’s original interface for the Advertising Manager and Inventory Management tools was cluttered, difficult to navigate, and lacked intuitive elements to guide users through critical tasks such as creating ad campaigns or updating stock levels. User complaints clustered in three areas:

  • Difficulties finding key features: the tools were there; the paths to them weren’t.
  • Confusion around data representation: charts didn’t answer the questions sellers actually had.
  • Lack of real-time insights: decisions were being made on stale information.

The goal: redesign the interface into a user-friendly, intuitive experience that supports quick decision-making, while keeping the design scalable for future features.

Research

Contextual inquiry, before pixels

I employed contextual inquiry as the pivotal research method in early discovery, observing and interviewing a select group of users in the context of their real work, which surfaces insights that directly inform requirements, personas, and content strategy. On top of that sat extensive interviews and usability-testing sessions with current Clove users, asking questions like:

  • “What tasks do you find most challenging in the current interface?”
  • “Can you walk me through how you create a new ad campaign?”
  • “What improvements would make managing your inventory easier?”

Three findings carried the redesign: overwhelming dashboards that displayed too much at once and made prioritizing hard, complicated navigation that buried campaign and stock tools, and an inefficient workflow that forced users across multiple screens to finish a single task.

Contextual inquiry User interviews Usability testing Affinity analysis
A large affinity wall of hundreds of color-coded research notes from interviews and search-and-filter sessions
Stage 01 · Research The affinity wall: hundreds of notes clustered until the pain points named themselves.
Process

From sketch to screen

With the pain points named, the work moved in deliberate stages: rough sketches to test the riskiest ideas, an information architecture to settle navigation, low-fidelity wireframes to agree on structure, then high-fidelity screens populated with real data, and finally eye-tracking to check the result against behavior.

Hand-drawn sketches of the account page, the IF and SKU filter logic, and the campaigns view
Stage 02 · Sketches The riskiest ideas, including the filter logic, worked out on paper first.
Detailed hand-drawn wireframe of the lost-inbound breakdown table with annotations for columns, claim actions, and sorting
Stage 02 · Sketches The lost-inbound breakdown table, annotated by hand before any pixels.
Clove user-flow diagram with a pages overview, branching from sign-up through the main dashboard and account settings
Stage 03 · Architecture The user flow and pages overview: every path mapped before a single screen was drawn.
Low-fidelity wireframe of the data table with a Click ASIN annotation and a product hover card
Stage 04 · Wireframes Structure first: the table, the ASIN drill-in, and the product hover card.
Mid-fidelity skeleton of the restock table with every column header in place
Stage 04 · Wireframes The restock-table skeleton: every column agreed before visual design.
Annotated Ads Manager layout with callouts labelling every control: tool menu, metrics, markers, filters, table presets, and more
Stage 04 · Annotated spec Every control and behaviour documented, so engineering could build without guessing.
Redesign

One view per decision

From sketches with clear hierarchy to mid-fidelity wireframes in Figma, populated with potential real-world data so tests measured comprehension, not lorem ipsum, the redesign streamlined the most common actions and cut cognitive load:

  • Ad Manager: KPIs (spend, sales, ACoS) shown prominently with a clear color-coded system; charts gained hover interactions for granular insights.
  • Inventory Management: stock levels and restocking alerts brought into a single view; action buttons like restock and update stock made unmistakably visible.
Final Clove advertising and restock dashboard with metric cards, a dual-axis trend chart, and a dense data table
Stage 05 · Final UI The advertising and restock view: KPIs, trends, and actions in one screen.
Final Clove account-creation screen with single sign-on options beside a workspace photo
Stage 05 · Final UI Onboarding: one decision per screen, from the very first one.
Final Clove Ads Manager Campaigns view with a spend and orders chart over a sortable campaigns table
Stage 05 · Final UI The campaigns view: performance chart over a sortable, filterable table.
Final Clove restock table packed with inventory columns: merch stock, safety stock, current stock, ESTR, and per-ASIN actions
Stage 05 · Final UI The full restock table: dense inventory data made calm and scannable.
Design system

One system, documented

The redesign shipped with a style guide so the visual language held together as the product grew: colour and elevation, typography, the icon set, core components, charts, and layout sizing, all in one reference for designers and engineers.

Validation

Watching where eyes go

Every stage of the design was tested against behavior, not opinion. Alongside usability tests, eye-tracking heatmaps showed where attention actually landed on the dashboards, and where it never arrived. Navigation structure, button placement, and the color system were each adjusted from that evidence.

The design process began with in-depth exploration of target users’ behaviors, needs, and challenges; nothing was built from assumption. Every decision, from overarching navigation strategy down to minute details, was guided by data from research and usability tests.

Eye-tracking heatmap overlaid on the Clove dashboard, attention pooling on the charts and the welcome area
Stage 06 · Validation Eye-tracking heatmap: attention pooling where the design intends it to.
Figma prototype of the Ads tool running in a browser during a remote usability test, participant camera visible in the corner
Stage 06 · Validation The prototype under remote usability testing, filters under scrutiny.
Outcome

From data wrangling to growth

The redesign replaced the endless scroll with a unified, modular dashboard ecosystem: insights are pushed to the seller through intelligent widgets instead of buried in tables. During beta testing we mapped user workflows, refined widget interactions, and streamlined onboarding so the new mental model landed for veteran and new sellers alike.

The result: dramatically reduced cognitive friction, a learning curve that plummeted for new users, and a significant decrease in abandonment. Sellers could finally focus on growth rather than data wrangling.

The final product is a testament to user-centered design, not built on assumptions, but on actual user data and experiences.
design stages, Clove