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
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
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.