How a Single-Page Experience Improved Add to Cart
This case study covers how I worked through the problem, what worked, what did not, and the design decisions that ultimately moved the numbers.
Introduction
JioMart is one of India’s largest digital commerce platforms, serving customers across a wide range of categories with a strong focus on convenience, value, and seamless shopping experiences.
This project focused on creating a high-energy “New Launch Alert” experience for JioMart, designed to help customers quickly discover new products, explore relevant categories, and engage with featured brands which increased conversion rate.
Problem
The New Launch page was helping users discover new products, but it wasn’t translating that interest into product clicks and add-to-cart actions. It lacked a clear path from discovery → consideration → action, an opportunity to improve the experience while increasing cart additions.
Solution
When Raj landed on the New Launch page, he could see plenty of new products, but it wasn’t immediately clear where to start. The experience helped with discovery, but it wasn’t effectively guiding him toward adding products to his cart.
To solve this, I redesigned the page with a conversion-first hierarchy. Categories were surfaced early to help Raj quickly find relevant products, while brand-led sections made browsing feel more familiar. I also made pricing, discounts, delivery information, and CTAs more prominent to reduce decision-making effort.
Finally, I introduced a bolder visual style with stronger contrast and clearer sectioning. This helped Raj scan the page faster, discover products more easily, and move smoothly from exploration to add-to-cart.
Why I choose to have this layout of single page experience to help conversion?
My hypothesis was: If users can quickly understand what the page contains, they can reach relevant products faster.
So my first direction was to organize the experience around categories.
See how competitors are approaching
I briefly studied how competitors are handling the conversions into the cart directly
Creating the layouts
- Banner- users needs to discover the new launch alert page
- Categories- to show what is launched
- Loved brands- show product specification
- Brand in focus- show product specifications
A constraint: After telling the whole rationale to my manager, there was one constrain between this, as there were different brands it was important as a business point to show brands upfront and then categories.
Next: I did reverse engineering to know again how the competitors are promoting brand products.
How competitors promote brands
I then again looked into competitors and presented the layout to my manager and we discussed upto the business point
Brands are surfaced through “Most Loved Brands” / brand-led sections, making them discoverable before users start browsing products. Instead of treating brand promotion as a standalone banner, I explored how we could integrate brand visibility into the existing shopping journey while keeping product discovery and conversion as the primary goals.
We also aligned with product and business teams to understand different perspectives
Improve conversions
Drive product & brand visiblity
After having conversation with my manager we figured out that...
I decided to move forward with brand focused and adding the product directly to the cart.
Final
Why this order?
The order was intentional.
I didn’t want to start with secondary information such as brand lists or promotional messaging. I wanted the page to answer the user’s most important question immediately:
“What’s new that I might want to buy?”
Then, as the user scrolls, the page provides more ways to discover relevant products according to brands.
So instead of: Promotion → Brand → Category → Products
I moved toward:
- 1Newness
- 2Products
- 3Relevance
- 4More products
- 5Action
Connecting the design to the metric
Every design decision was connected to the goal of improving conversion.
I made the products more prominent so users could notice and click them more easily, helping improve Product CTR.
I grouped products by category and brand so users could find something relevant faster, increasing PDP visits and product engagement.
I reduced the number of products shown at once so the page felt less overwhelming and individual products got more attention.
Finally, I made the offers, product information and CTAs more visible so users had a clearer reason and opportunity to take the next step.
All of these decisions ultimately pointed toward one goal:
More users discovering a product → clicking it → adding it to their cart.
How I approached the design theme of the single page experience?
Before getting started with the visual theme, my manager gave me one clear direction “Don’t play in pastels.” The challenge was to explore a bolder, more energetic visual direction that could make the New Launch experience feel more prominent and attention-grabbing, while still fitting within JioMart’s ecosystem.
Secondary Research
I also explored visual attention principles.
Users don’t read a homepage from top to bottom.
Instead, they:
This reinforced an important insight.
The launch section shouldn’t blend into the rest of the interface.
It should intentionally create a visual interruption.
- scan
- notice contrast
- recognize shapes
- then decide whether something deserves attention
Colors used
I mainly used complementary and warm-cool contrast. Blue is a cool color, while red, orange and yellow are warm, so placing them together creates strong visual separation. Saturation and brightness set the hierarchy: key launch elements get stronger color contrast, while product information stays on a neutral white surface.
Placed against warm colors to create strong visual separation.
Stronger color contrast for the important launch elements.
Warm-cool contrast with the blue.
Warm-cool contrast with the blue.
The surface where product information stays.
Evolution of the visuals
Visual Exploration- Banner
Visual Exploration- category
Card Section Exploration
IMPACT
Following the launch of the JioMart single-page experience, we observed a 0.92% increase in user conversion and a 0.28% increase in average basket size. These were post-launch observational results.
CONCLUSION
This project taught me that the placement matters at the same time the visual herirachy. I’m glad I stuck with it and learned a lot along the way.
Contact
For whole design process walkthrough, contact me