Improving the User Interface (UI) Design of a Product Detail Page
About
IndiaMART is India’s largest online B2B marketplace. Its business app has surpassed 10 Million downloads on the Play Store and has been rated 4.7 stars.
The Android app has about 20 lakh active monthly users — around 2.6 crore views on the Product Detail Page. Over 13 Lakh direct inquiries are sent and 11 Lakh direct calls are made to sellers, resellers, wholesalers and retailers via this page. IndiaMART also generates over 1.6 Lakh leads from the PDP.
The Project
The user interface design was inconsistent. It had too many attention-seeking elements, and lacked hierarchy. Product image used up most of the screen. There wasn't much room for other information in the first fold.
We wanted to bring simplicity and user-friendliness to this key screen.
User Interface Design
A new visual design was laid out. We focused on certain aspects including:
1. A branded header
It is to be noted that we mimic the design pattern across our mobile device platforms including the m-site, android app and iOS app. While incoming user traffic from apps need not necessarily require brand reinforcement but m-site creates a strong case for it as all page views are organic. Hence, we chose to progressively expand the search option only when a user demands it.
2. Verified seller badge
This builds up buyer trust and certainly helps while making a decision when multiple sellers offer the same kind of products.
3. More product and seller information above the fold
4. Collapsed Seller Details instead of Product Information
It is certain that a buyer is looking for a product. Hence, reducing a click to see more information about the product seems fair. Seller information at this point is however secondary and can be hidden behind a collapsed card. It is to be noted that some seller information is now already visible in the first fold.
5. Removing repetitive elements
Too many primary buttons on secondary products were fighting for attention.
6. More emphasis on the in-line form
The inline form was missed a certain time while scrolling and scanning the screen for other related products.
7. Sticky call and message buttons to contact a seller
Current User Interface
New User Interface
