Badho·B2B e-commerce·Gamification
Most retailers took the smallest quantity and walked past the better bulk prices. I redesigned the quantity modal so those savings are easy to see, and easy to act on.
2 months before vs 2 months after launch
Badho is a B2B marketplace where kirana (neighbourhood grocery) store owners buy stock straight from FMCG distributors. Two apps make it work: retailers order in one, distributors fulfil in the other. I worked on the buyer app.
Buyer appRetailers place ordersThis project
Seller appDistributors fulfil themPicture a retailer who just tapped ADD. The next screen should help them choose a quantity. Instead, it made buying more feel like homework.
123“What do I get if I buy more?”
The bulk prices are easy to miss, so retailers can’t tell how the price changes with quantity, or which slab is the better deal.
Low conversion at the quantity step.
Conversion was lowest in the order journey, and retailers kept pointing at the same place: the screen right after tapping ADD. The data agreed with them.
The lowest conversion in the whole order journey.
User feedback kept pointing at the screen right after tapping ADD.
The quantity modal lost more retailers than any other step in the buying flow.
Most orders started this small, and sellers rejected many of them.
I facilitated research with about 10 retailers in Delhi NCR, the most accessible location for the team. I ran it over WhatsApp video calls while our APM went onsite.
Many products on Badho have slab pricing: the more you buy, the lower the price per piece. The quantity modal is where retailers decide how much to buy, so it's the natural place to show these bulk deals.
Kapila Mikomore Buffalo - Festival Special
Last bought 10 days ago
The bulk prices, the main reason this screen exists, were squeezed into one thin row of small text.
Payment, delivery and return terms sat in the most visible spot, above the deals.
This left little room to compare slabs or show how much retailers could save.
It made sense for the Badho it was built for. Back then, Badho was an order management tool.
With a cart and a seller catalogue, seller policies can live there, like in other commerce apps.
Highest exit rate in the whole buying flow.
The quantity started at the lowest slab, and many of these small orders ended up being rejected by sellers.
From kick-off to tracking metrics after launch.
I explored three versions, and each one built on what worked in the one before.
V1
What could be better
What worked well
V2
What could be better
What worked well
V3, final
What could be better
What worked well
I aligned with the PM lead, APM and devs at three points: kick-off, wireframes and hi-fi. Each round tightened one decision.
Research showed policies distracted retailers. Business and product leads agreed, because the cart and seller catalogue could carry them.
V1 put every slab on screen and overloaded it. V2 added offers and a progress bar. V3 tied them together, so slab and savings move with the quantity.
Sound and interactions reward moving up a slab, which makes bulk buying feel good.
Policies now live elsewhere, and slabs scroll sideways. Both were deliberate, and both were reviewed with dev.
1At this step retailers are trying to choose a quantity. Onsite research showed policies distracted them, and business and product leads agreed. So the modal now does one job, and policies live in the cart and seller catalogue.
Raise order value, reduce rejected orders, focus on slab pricing, and make buying fun.
Order value is the main goal, and policies still need to appear somewhere.
Goals were set and policies moved out of the modal.
1The old modal hid slabs in one thin row, so retailers couldn’t see what buying more would get them. V1 lays every slab out in a familiar vertical scroll, so deals compare at a glance.
Too much on one screen, and no push to buy more.
V2 lowered the load and added offers and a progress bar.
12V1 gave retailers no reason to buy more. AI-assisted exploration led to a progress indicator that shows where you are and what’s next, so the next slab feels within reach.
V1 felt crowded. Removing them lowered cognitive load and put slab pricing first.
Qty and amount sit far apart, and seller terms shouldn’t be lost.
V3 grouped qty and price and kept policies at other entry points.
123V2 kept quantity and amount apart and still didn’t nudge anyone. Now the bar moves live as you type, so the slab and the savings always match the quantity.
Quantity and total now sit side by side, right above Add to Cart, so every change shows its cost straight away.
The old keypad overlapped the modal content and forced scrolling to reach it, which is an accessibility issue. The shorter keypad leaves room for slabs and adds one-tap jumps to a better slab.
Built for the goal “make buying fun”. Moving up a slab is rewarded, so reaching MAX SAVER feels earned.
Below-MOQ orders were a source of confusion. A soft, inline nudge replaces a blocking error.
Can slabs scroll sideways, and what happens as qty changes?
Auto-select and a live-moving margin bar were specced.
Did order value go up, and are fewer orders rejected?
We tracked 2 months before vs 2 months after launch.
Good decisions rarely get a free pass. Three moments where the team pushed back, what I argued, and where we ended up.
Policies should stay on this screen. Seller terms matter, and retailers might miss them elsewhere.
Research showed retailers froze on the policies and never interacted with the price slabs. This modal’s job is to make them aware of every slab and motivate them to buy more quantity.
Policies move to the cart and the seller catalogue, where there’s room to read them properly. Business and product leads agreed.
In one line“Leads worried retailers would miss seller terms. I showed what I saw onsite: policies were the thing people froze on. We agreed to move them to the cart and seller catalogue.”
Keep the familiar vertical list from V1. A horizontal scroll is more work and can hide slabs.
The quantity input and Add To Cart were already fixed at the bottom, but a vertical list still meant scrolling through every slab at once. That's extra scrolling and a higher cognitive load, which slows decisions. Sideways cards open the offers up gradually, so retailers explore slab by slab.
V3 shipped with sideways-scrolling slab cards, and the slab auto-selects as the quantity changes.
In one line“Dev preferred the vertical list. I showed how scrolling through every slab at once overwhelmed retailers and slowed their choices, so we kept slabs sideways and let them explore offers gradually.”
Use the phone’s default keyboard. A custom keypad costs more to build and test.
The keypad is where slab-add suggestions live, and it’s shorter than the old one, so slabs stay visible.
V3 keeps the custom keypad: shorter than before, with the slab-add suggestions built in.
In one line“Dev suggested the phone’s default keyboard, since a custom keypad costs more to build and test. I showed that the keypad is where slab-add suggestions live, and that it’s shorter than the old one, so slabs stay visible.”
123
123Swipe sideways to see the whole screen
Feel free to tap through the actual Figma prototype, right here.
The live prototype loads on my portfolio site.
Open prototype in Figma (opens in a new tab)Tip: tap the keypad and the slab buttons. Press R to restart.
Here's the whole flow in motion, from typing a quantity to MAX SAVER.
Products can have two or more price slabs, so the modal adapts to each case.
Swipe sideways to see every screen
To explore ideas, validate directions and iterate faster. It led to solutions like the progress indicator.
Aligning stakeholders on what truly mattered sharpened visual priority and put focus on the key decision-making elements.
Continuous feedback helped refine and successfully deliver the final design.
Thanks for reading!
Thank you for making it to the end, that's Max Saver unlocked. If you have a tricky flow that needs untangling, I'd love to hear about it.
— Papori