Redesign Flipkart’s Product page experience

Redesign of the product page was done in keeping two things in mind.
- Enhance flipkart’s marketplace model giving sellers more visibility
- Help users choose and purchase products more easily and confidently

Problems with the Old Product page

We were not doing justice to the sellers on Flipkart as users didn’t explore much on who’s selling the product.

Users were buying from flipkart’s prefered seller many of the times buying at a higher price, unaware that a cheaper price is available by another seller.

The information and steps necessary for users to make a purchase weren’t structured the right way like delivery options, offers are seller specific and should be a part of seller info.

Improvement on information structure & heirarchy was much needed for ease of use, clarity and experience. Let users skim through the page than be overwhelmed by exhaustive information.

Business Needs

Marketplace fairness

Delivery and variant

Scalable design

Intuitively navigable

User chooses best seller as per his evaluation criteria like pricing, reviews, offers, SLA etc

User should understand how each product variant is a new product in itself and different sellers may sell them at different price & deliver at different time.

Create a solution scalable to show more recommendations like related products, combos, complate the look. Information heirarchy for inter-relationship between modules.

To create a rich mobile app experience unlike m-site (gestures, interactions, animations, fewer taps etc.)

User Experience

Showcasing a Flow where a user on Flipkart purchases a product

Swatches - Lifestyle

Product page experience was optimized for lifestyle & electronics category. The swatch selector lets users to select 2 most important criterias to select a lifestyle product that is Color and Size.

Swatches - Electronics

Choosing an electronic is quite a complicated matter where there are multiple variants involved, e.g. in this case, a 16GB, silver, wifi + 3G is available but the gold variant isn’t. Users are made aware of availability and unavailability of each product variant without even tapping of each one with the help of visual design like dotted line means unavailable and all green ticks means the product is available.

Geo browse

Geo Browse picks up users default delivery location and displays only those sellers who can deliver the product to the user. If the product cannot be delivered, users are aware, they can either change the product variant or change delivery location.

Seller card

Seller card shows all the relevant information needed for users to make a buying decision. A number of seller cards are listed who are available to sell the product at different prices. Users can select a seller based on the user reviews and ratings, unique offers they are providing, delivery time and best price.

Reviews and ratings

Users can view two most recent reviews about the product, along with overall rating. Write a review feature is only visible to the users who have already purchased the product.
Users can go into detailed review page and read more about what other customers feel about the product. Product reviews and seller reviews are deliberately kept seperate for clarity and fairness sake.

Product Specification

The details tab shows the most important specs for a product and rest of the information is hidden under inner pages. A standard tabular data sets is presented in case of electronics and large appliances.

Primary and Secondary actions

The secondary buttons like add to wishlist, chat, show similar products are shown in the first fold, As user scrolls to the bottom and a seller is selected, Buy now and add to cart buttons are revealed.

Interaction Design

The interaction of the page is contexual so that information is revealed mostly on demand and there is discovery when user dwells deeper into sections.

iOS adaptation

Flipkart’s iOS app has its own character with sleek design, showcases some premiumness to the App although the core phylosophy around the product page remains the same
as android.