Ebay Heuristic Evauation

Reducing frustrations in eBay's browsing and checkout process

Tools

  • Figma

  • Google Slides

  • Slack

Team

  • 3 UX/UI Designers

My Role

  • Led heuristic evaluation

  • Design Strategy

Timeline

  • 25 hours over 8 days

Ebay Heuristic Evaluation

What is ebay?

eBay is a global auction and trading company that matches buyers with sellers of goods and services.

eBay's success is largely due to its established marketplace for rare and unique items. To maintain this success in the digital age, eBay would benefit from optimizing its user experience.

Why is UX particularly important in e-commerce?

88%
think detailed product content is extremely important
70%
abandon their carts without buying anything
38%
leave a website if they find the layout unattractive

Method

To conduct the heuristic evaluation, we examined the website based on a set of usability principles. Then, we considered frequency, impact, and persistence and ranked them based on severity. 

Ebay Heuristic Evaluation
Ebay Heuristic Evaluation

Helping Gloria seamlessly find a Funko Pop character to add to her collection

To narrow our analysis, we decided to focus on the browsing and checkout task flow. Specifically, we focused on Gloria's journey toward finding a Max Funko Pop character.

Prioritizing Design Changes

After conducting a heuristic evaluation of the browsing and checkout flow, we placed all opportunities for improvement in a prioritization matrix. To maximize efficiency, we implemented all improvements aside from those that are high effort and low impact.

Ebay Heuristic Evaluation
Improving the Category Page
Ebay Heuristic Evaluation

1. Visibility and System Status

Keep users informed about what is going on at all times

Image alt tag

Violations

  • Confusing breadcrumbs - shows pages that the user hasn't clicked

  • The page title doesn't match the category name

  • The “funko” on the sidebar is not clickable.

Image alt tag

Solutions

  • Redesigned Breadcrumbs so that Gloria can see exactly what steps she's taken

  • Matched the title with the category name

  • Removed the sidebar to have more white space and reduce confusion.

Ebay Heuristic Evaluation

2. Consistency and Standards

Users should not wonder whether different situations or actions mean the same thing.

Image alt tag

Violations

Multiple filter bars were confusing and inconsistent with other e-commerce sites Gloria had seen.

Image alt tag

Solutions

Removed "shop by rarity" and kept "shop by character family" and the main filter bar.

Elevating the product page
Ebay Heuristic Evaluation

3. Aesthetic & Minimalist Design

Interfaces should not contain information that is irrelevant. Every extra unit of information competes with the relevant units of information.

Image alt tag

Violations

  • Long product name with unnecessary words

  • Three buttons made it hard for the user to distinguish between action items

  • Gloria has to scroll down to find the product description

  • Irrelevant shipping, delivery, payments, terms, and conditions clutter the bottom and right side of the page

Image alt tag

Solutions

  • Split the title of the product into “main name” and an additional context description - making it easier for the user to read and process

  • Consolidated the buttons into "buy now" and "add to cart" buttons while having an additional heart button on the side.

  • Moved the product description above the fold

  • Combined the shipping and payment information into a drop-down menu 

Ebay Heuristic Evaluation

4. Help and Documentation

It is important to provide documentation to help users complete their tasks.

Image alt tag

Violations

Hard to find contact seller information

Image alt tag

Solutions

Turned the link into a button and featured it at the center of the page where it’s visible to the user.

Repairing the Checkout Page
Ebay Heuristic Evaluation

5. User Control & Freedom

Users need a clearly marked "emergency exit" to leave an unwanted action.

Image alt tag

Violations

Gloria was unable to go back to the previous page or exit the checkout page

Image alt tag

Solutions

Added a back button (icon and text) to return to the previous screen.

Learnings

Image alt tag

Play to your strengths

When working with a team of designers, it is important to leverage each other's skills. For example, I led the heuristic evaluation while my teammates lead the UI redesign.

Image alt tag

Keep it human-centered. Always.

Even when redesigning a website, it is important to start by empathizing with the user. This allows us to think about effective solutions compared to conducting an evaluation as a checklist.

Image alt tag

Consistent Branding

When working with a client, it is important to present the redesign in a way that fits with their branding.