B2B e-commerce for Distributor of Appliance Parts

TL;DR: As a UX/UI Designer I led the redesign of a B2B e-commerce platform with millions of appliance parts aimed at reducing call center activity by shifting customer behaviour to the website. The challenge was to simplify navigation and streamline the ordering process, addressing pain points like stock visibility and warehouse selection. By collaborating with a 13-member team across Canada and the USA, I produced wireframes, prototypes, and responsive designs using an Agile process. The outcome was a significant increase in conversion rates, site traffic, and user feedback, with a 50% boost in content engagement.

CHALLENGE:

Redesign a B2B e-commerce site with a database of millions of models and appliance parts available for customers, in order to reduce call center activity. Customers were used to buying everything through phone calls because they had very specific needs like reviewing the available stock and choosing which warehouse to buy from

• ROLES: UX Designer, UI Design Coaching, and Facilitate design meetings

• TEAM: 13 (Frontend/Backend/UI/UX) - Stakeholders from Canada and USA

• PLATFORM: Responsive Website

• LEARNED SKILLS: e-commerce, Wireframes, Mockup, Project Managing, Figma, Brainstorm, use cases, work stakeholders, Agile, components

• OUTCOMES: Increase Conversion Rate, Site traffic up, New content usage, and User feedback up 50%

2. Define

PROBLEM: what was the main problem with the current site and end-to-end process.

SOLUTION: Align the team with a shared experience vision: simplify the navigation and an efficient order experience

TASKS AND ACTIVITIES:

• Review main pain points and problem framing

• Scope and effort: MVP

• User stories and jobs to be done (features and use cases)

• Ideation for main flows and process

• Project plan and touchpoints with stakeholders

3.Ideation

PRODUCT DESIGN: Once we had the user stories, I started working on the flows and the main content for each screen to analyze if the solution was making sense with jobs to be done and the business process.

TASKS AND ACTIVITIES:

• Competitor Analysis

• Site Map and Information architecture

• Visual Proposals and Style Guide

• A lot of sketching

• Use cases and system flows for user journeys

• Wireframes for each use case and mockups

• Mobile responsive screens

• Deliverables reviews with stakeholders

4.Prototype and Implementation

Prototype main use cases and simulate some interactions in Figma. And testing by stakeholders with some customers and provided feedback during iterations sessions.

We had regular touchpoints to review flows, wireframes and prototypes, in order to ensure that everything was aligned with developers and stakeholders.

TASKS AND ACTIVITIES:

• Prototype use cases and mobile screens

• Review with developers constraints and iterations

• Provide components to frontend, understand react library

• Present each feature and final screens to stakeholders for approval

Agile

For each feature we work with the team to follow an Agile Process:

• Backlog of User Stories

• Sprint Planning

• Sprint Execution

• Sprint Review

• Sprint Retrospective