B2B-fication of a classical product card

B2B-fication of a classical product card

WizCommerce

Your all-in-one B2B commerce solution

Shopify but for wholesalers. Wizcommerce is a classy place where wholesale e-commerce is getting revolutionised, and I happen to be lucky enough to be at center of it!

Designing B2B products is fun and challenging.


Clarity (the fun): User needs are usually explicit mapping those use cases are often not that big of hassle


Complexity (the challenge): Turning those bullets into a seamless experience means understanding why each data point matters and how it fits within a sales rep’s workflow.

Designing B2B products is fun and challenging.


Clarity (the fun): User needs are usually explicit mapping those use cases are often not that big of hassle


Complexity (the challenge): Turning those bullets into a seamless experience means understanding why each data point matters and how it fits within a sales rep’s workflow.

Introduction

Product cards are the backbone of product discovery on any e‑commerce platform. Whether buyers are browsing, ordering, or just exploring, every interaction hinges on how effectively these cards showcase products. In the end, if product cards don’t convert, there’s no revenue to speak of.

Data and data never ending data

WizCommerce has been scaling insanely fast for sure. What comes with scale is More Data! Why more data on the product card? Because it helps sales reps make more informed decisions while selling...

WizCommerce has been scaling insanely fast for sure. What comes with scale is More Data! Why more data? Because it helps sales reps make more informed decisions while selling...

What data?

Stock availability

is it in stock, on order, or back-ordered?

Restock timelines

if it’s out, when is it coming back?

View similar

AI based similar product recommendations

AI - similar product recommendation

Wishlist

Bookmarking products

Variant Price Ranges

pricing across different variants

Product tags

useful filters, discounts and offers

With all of the user insights/requests and a little research it came to light that these extra parameters are crucial and play an important role for the Sales-Rep making the sale through the app. Why and how? we need to be scheduling a meeting for that :P.

Problem

We needed the product card to surface critical data at a glance, but its existing structure couldn’t handle that complexity without cluttering the interface or confusing users

We needed the product card to surface critical data at a glance, but its existing structure couldn’t handle that complexity without cluttering the interface or confusing users

With all of the user insights/requests and a little researched it came to light that these extra parameters are crucial and play an important role for the Sales-Rep making the sale through the app.

Solution

We rebuilt the mobile product card as a bottom‑sheet that layers information by importance—featuring image‑anchored badges for tags and inventory, quick‑access parameter chips, grouped core details (name, SKU, price), tucked‑away “View Similar” and Wishlist actions, a scrollable “On Order” section, and an adaptive “Add to Cart” CTA with variant selection—so reps see exactly what they need, no noise, and the layout scales as we add more data.

Form and function

Form and function

How

View similar, Tags and Wishlist

When working with the icons - actions that overlayed the image, It was necessary to keep the visible real estate of the image, and also considering the edge case - what if the image is not centred??

View similar : Sits bottom-right, with visible text instead of just an icon—since it’s a core feature and deserves more attention.

Inventory flags

With Back order dates and stock information, These initially occupied a lot of real estate overlapping the image. One of the most trickiest things to crack but was fun.

With Back order dates and stock information, These initially occupied a lot of real estate overlapping the image.

Scaling this further?

With ever expanding use cases and client requests, we figured out there will be a time where more custom data/more intricate information would be made to show on the product card.

With this thing into consideration it won’t be always possible to Re-do this card. Therefore I came with an idea of a one liner placeholder that could scroll. Companies like Noon, Amazon already do this : but this was an interesting brainstorm and research in-order to arrive at this.

Data propagation

With these product cards in place, a lot of other flows and screens had more inflow of data at hand. And hence all of these cards/rails needed a visual amp up. These changes were significant and scaled through the entire platform across multiple devices as well.

Takeaways

With an ultra short timeline for projects here, it becomes increasingly difficult to maintain proper documentation of design designs and it always becomes a hassle to communicate the same to the devs and other teams. And further even more difficult to make a case study out of it. :P

Stories

Resume

Stories