Design solutioning - Desktop
Design solutioning - Desktop

Previous Listing page.

⁠

⁠

Solution

Final Design Link -

https://www.figma.com/file/sRL6x8epbomLwKxa75j3nP/NPP_Marketplace?node-id=23%3A281377&t=4byqxJ9wwvMbfVB0-1⁠

⁠

⁠

Detailed view

Following are the new elements we added -

Show recommended price for product listing so user can take it as a guiding price to list his product.

Separate out price section with all the price related input and kept it 3rd position after taking all the necessary needed to generate a recommendation.

Introduced Price breakdown that educates user of all the price components and the final customer price in realtime to solve the benchmarking issue.

#1 Show recommended Price

When user enters their Meesho price (selling price), the system generates a recommended price and show the user. The visibility to recommended price is only given in those cases where the input price is higher than the generated recommendation. To validate the recommendation, user can click on the check button which opens a comparison of their product and product of other suppliers being sold on Meesho or external competitions.

⁠

⁠

Check modal

⁠

⁠

#2 Separate out price section

Price and Tax related input were seperated out from other attribute inputs and placed together in a section which is now placed after all the mandatory attributes related to the product category. This was done to support the price recommendation feature at listing, as now the system is able to generate an accurate recommendation after analysing the attributes first.

#3 Introduced Price breakdown

⁠

⁠

Why we positioned it in Right side panel ?

The information in the breakdown comprised of bank settlement amount and Final Customer price. While a user is listing a product, their main focus is expected to be at the left side where all the input boxes are available and needs attention to be filled carefully. Now, if we place our information below the Price and Tax section, it may bring in positive effect in short term but in long run, this information will remain just a scroll and may also lead to drop in optional attributes fill rate that comes after the Price and Tax section. Hence, we placed the Price breakdown as a card in right side panel for suppliers as an option to have a look at the final prices if they wish to without getting disturbed in their creation flow.

The Scroll behaviour

Previous behaviour of upload page was the whole page (both left and right side) gets scrolled up in a single scroll.

The height of the left side will vary as the user adds more variant to the product. Height of right panel will also vary depending on the compliance availability and its count for that category.

Considering that we want to keep the Price and Tax section and the Price breakdown card in line so that it create the expected impact, we proposed to create a parallax while scrolling. With this approach, we would have been able to keep price & Tax section in left parallel to price breakdown card in right in all the scenarios. But considering its limitation from tech, we had to look for other alternatives.

So after thinking around multiple approaches, I landed on this approach where the price breakdown will appear only after Meesho price is filled. The card will appear parallel to the price and tax section.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP