Design for Seller Comparison

Information Architecture (IA)
& Intereaction Design

This case study highlights my approach my approach to structuring and prioritizing information to make seller-comparison clear and easy on mobile.

Product
Ecommerce Platform
Target User
Consumers, B2C users
Role
UI/UX Designer
Collaborator
UX Manager
Team
Lazada's Product Development

Background

The Multi-seller feature allowed buyers to compare different sellers for the same product directly on Lazada’s Product Detail Page (PDP). Goal of this project was to help users quickly choose the best offer.

Approach

Focus Areas in Design Thinking Stages

Empathize

Define

  • User Flow Mapping: mapped out how users interact with the Multi-seller feature within PDP.
  • Information Architecture Planning: defined key metrics for comparison to support user decision-making.
  • Interaction Design: defined interaction patterns that support quick and clear comparison between sellers.

Ideate + Prototype

  • Design Proposal: created the initial interface layout to visualize the concept.

Test + Learn + Adapt

User Flow Mapping

We started by defining the user flow to make sure everything was smooth and easy to navigate. On the PDP, users could click on “View Other Sellers” to get to Comparison Mode – also known as the Multi-Seller Page. There, they would see a list of sellers offering the same product. Users could then filter and compare options to find the best deal.

Multi Seller's User-flow
Multi Seller's User-flow

Information Architecture Planning

We started by identifying the key information users look for on the PDP, which would be used to compare offers from other sellers.

To make comparisons easier in the Multi-seller feature, we grouped this information into 3 clear categories: Seller info, Delivery info, and Service info. Within each category, we prioritized the most relevant details so users can quickly scan and compare their options.

Interaction Design

Since this comparison feature was designed on the mobile app, we explored 2 interaction patterns for displaying comparison information:

    • Expansion: users tap for more information within each seller’s section.

    • Carousel: users horizontally scroll to view additional information.

After evaluating both options, we decided to go with the carousel interaction. It provides a more compact layout, allowing users to easily browse the seller listings vertically and compare key metrics by scrolling horizontally.

Design Proposal

PDP: We reorganized the Delivery, Service, and Seller information into clear, separate sections. The goal was to create a well-structured layout that helps users quickly understand the content. This structure also prepares users for a consistent experience when they move to the Multi-seller Page.

Multi-Seller Page: We displayed other sellers in a card format to make comparison and selection easier. Each card highlights the Seller info at the top, with additional details such as Delivery, Service, and Promotions that users can scroll through horizontally within the card.

Seller Comparison Flow
Seller Comparison Flow

Below is a breakdown of the elements to align with the development team.

What Improved

Compare sellers easier and decide faster: Users can quickly see the differences and choose the best option with less effort.

Too much information is now easier to scan: Seller details are organized clearly, so users can spot the right choice at a glance.