UX DESIGN

ABC SUPPLY E-COMMERCE

Researching and ideating improvements to ABC's E-Commerce platform.

ROLE:

UX Design intern

DURATION:

04.2024 - 06.2024

TEAM:

‍Ron Rowland - Senior UX Designer
Dave Janes - Senior UX Designer
Mike Dillenburg - Digital Product Development Manager

OVERVIEW

During the spring of 2024, I served as a UX Intern on the ABC Supply Digital team. My internship focused on enhancing various aspects of the E-Commerce experience.
What I did: Worked across teams to improve the product taxonomy and its display in the E-Commerce experience. Redesigned the product browse and order flow experiences. Adapted the basic structure of the web app portal.

CONTEXT

ABC Supply is the largest roofing and vinyl siding wholesale distributor in the United States. The ABC digital platform, launched in 2020, brought its business operations online, enabling customers to place orders and receive quotes while ABC associates fulfill their duties digitally.

THE PROBLEM

While ABC's E-Commerce platform provided necessary capabilities, it was a basic product. Associates and customers both expressed frustrations when creating orders and navigating the extensive product selection.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

COMPETITIVE ANALYSIS

I began with a competitive analysis comparing ABC's platforms to competitors like Grainger, Beacon, and Home Depot. This process identified best practices and common patterns in E-Commerce flows, including checkout processes, product detail pages, multiple form factor displays, and product taxonomies. The analysis highlighted ABC's unique pain points and strengths.

Key pages from the competitive analysis.

USER RESEARCH

ABC Digital engaged a strategy consulting company to audit their digital platforms and systems. This engagement included customer and associate interviews, providing valuable insights into user preferences and pain points.Using the consultants' interview transcripts, I collaborated with the digital product manager and senior UX designers to prioritize features based on importance and feasibility.

High priority points of improvement:

THE QUESTION

Based on the priority-feasibility assessment, I focused on improving product taxonomy and order flow on the ABC web app.

The key challenges were:

1. Difficulty in browsing products without exact knowledge of what was needed.
2. An overly complex digital product data hierarchy.

Thus, the central question became:

How can we improve the product browse and order flow within the constraints of the current product data?

THE SOLUTION

1. SPACE OPTIMIZATION

I began by shfiting the navigation bar from the top to the left side of the screen, creating more vertical space. This change allowed for a full-page product browse experience and relocation of the category bar.

Top Navigation (initial state)

Left Navigation (end state)

2. NAVIGATION SIMPLIFICATION

To optimize the product browse experience, I aimed to simplify the navigation through the categories. Drawing inspiration from similar supply E-Commerce sites like Home Depot and Grainger, I incorporated visual indicators in category lists to heighten the readability and visibility of the long list.

Continuing these visual navigation points into subcategories also helped to open up visual space and add breathability to the previously dense and crowded browse page .

3. MAKING ROOM FOR ERROR

To address expressed frustrations on the later steps of the order flow, the review and submit screens of the order flow needed to be more forgiving to users. To improve the review and submit screens to be more user-friendly, I included a floating price summary, adjustable quantities, highlighted branch confirmation, and clear directions for editing delivery information.

Order Summary Screen

Delivery Detail

Review & Submit Order

AN ADDITIONAL PROJECT

An extra project that I took on was addressing the lack of documentation across the ABC Digital team. After consulting with the Digital Product Development Manager, I designed templates for documenting products and digital initiatives.

To tackle documentation challenges, I met individually with product owners to understand their needs. Based on their feedback, I reorganized the Confluence documentation structure and worked with each team to implement a new, more user-friendly documentation system.