How to read these studies
Each “before” is a composite of problems that turn up repeatedly in real stores, not a specific business. Each “after” was built on a real ZenBasket theme, using features that exist in the builder today.
Each study states what the change is designed to fix and links to the research behind it, which is more useful to you anyway.
The six studies
Checkout: a restaurant ordering online
Food & Beverage · Built on Tasteeva · Illustrative redesign study. The “before” is a composite of common problems.
The store
A restaurant taking orders online for delivery and collection. Most orders come from phones, most customers are hungry, and most are ordering the same few dishes they ordered last time. Speed isn’t a nice-to-have here; someone who gives up at checkout doesn’t come back later. They order from somewhere else, now.
Before
The checkout was built for a clothing store and never adapted. Every problem below comes from that mismatch.
- An account was required before ordering. A first-time customer wanting a single dinner had to create a password first
- Delivery or collection was chosen at the very end, after the address had been entered, so collection customers typed an address they didn’t need
- The delivery fee appeared only on the payment step, which is where the total first changed
- Payment options were cards only, in a market where most people expect to pay by UPI or wallet
- No estimated time was shown anywhere. The customer had no idea whether dinner would arrive in thirty minutes or ninety
- The form was long and on one narrow column, asking for a company name and a second address line on a food order
After
- Guest ordering by default, with the option to create an account offered after the order is placed, when the customer has something to gain from it
- Delivery or collection chosen first, so the form only asks for what that choice needs
- The full total shown before payment, including the delivery fee, with nothing arriving at the last step
- Local payment methods offered alongside cards; cards and wallets through the payment integration
- An estimated time shown clearly, so the customer knows what they’re committing to
- Only the fields a food order needs
Why it works
Forced account creation is one of the most consistently cited reasons people abandon a purchase. On a food order it’s worse than usual, because the customer’s intent is immediate and the cost of leaving is zero, the next restaurant is one tap away.
The total should never change at the last step. Surprise costs appearing at payment are the single biggest fixable cause of abandonment, and in food delivery the delivery fee is exactly that surprise. The principle is covered in trust and clarity.
Asking the delivery-or-collection question first is a small change with a large effect on how long the form feels, because it removes an entire section for anyone collecting.
What this is designed to improve
Fewer customers abandoning between the basket and payment, particularly first-time customers, and particularly on phones.
Build it in ZenBasket
- Tasteeva theme — the restaurant theme this study was built on. Preview it at the link.
- Delivery & Pickup — offering both options and letting customers choose.
- Payments — accepting UPI, cards and wallets. One of the payment integrations available through the plugin library.
- Abandoned Cart — following up with customers who leave before paying.
Read next: Cart drawer or cart page?
Product page: a hair and skin care brand
Beauty and Care · Built on Glowique · Illustrative redesign study. The “before” is a composite of common problems.
The store
A hair and skin care brand selling serums, cleansers and treatments. Customers care about two things before buying: will this suit my skin or hair type, and what’s actually in it. Many are cautious, skin reactions are a real concern, and most check reviews before committing.
Before
- No ingredient list anywhere on the page. The only mention was a line in the description promising “a blend of nourishing ingredients”.
- Nothing said which skin or hair type a product was for, so customers had to infer it.
- Sizes were in a dropdown, hiding the fact that other sizes existed.
- Reviews sat behind a tab, with no rating or review count anywhere near the price.
- A sold-out size simply disappeared from the dropdown, so customers assumed it wasn’t made.
- The gallery showed the bottle and a texture swatch, but never the product on skin.
After
- “Suitable for” stated directly under the title; skin type, in plain words.
- Ingredients first and open by default, so the full list is visible without a click, with everything else collapsed below it.
- Sizes as visible buttons, so every option is seen at a glance.
- A sold-out size shown greyed out, with availability stated in words and “Notify Me” replacing Add to Cart.
- Rating and review count beside the title, with the full reviews in their own counted section.
- A gallery showing the product in use and on skin, alongside the product shots.
Why it works
The deciding fact is open; everything else waits. In product page testing, content behind horizontal tabs is routinely overlooked because shoppers scroll past the tab strip without registering what it holds. Expandable sections avoid that, every heading stays in view as the shopper scrolls, and opening the ingredients section by default puts the deciding fact on screen when the page loads. It’s the default recommended in tabs or accordions?
The rating belongs near the title, not only lower down. A review count shown up top tells a cautious shopper that others have bought this, without asking them to go looking. The reviews section then holds the detail for anyone who wants it.
Dropdowns hide how many options exist. A shopper can’t see that other sizes are available until they open the menu. Visible buttons show the full range at a glance.
A sold-out size that disappears reads as “not made”. Shown greyed out with a notify option, it tells the customer the size exists and may return, and captures the highest-intent email address on the page. Stating availability in words as well as greying it out matters too: color alone doesn’t carry the message for every shopper.
What this is designed to improve
Fewer customers leaving to look up ingredients elsewhere, fewer returns from products that didn’t suit, more confident first purchases, and more demand captured for sizes that are temporarily out of stock.
Build it in ZenBasket
- Glowique theme — the hair and skin care theme this study was built on.
- Product Details Page — laying out the product page itself.
- Adding Options & Variants — setting up sizes and their availability.
- Waiting List — letting customers ask to be notified when a size returns.
- Product Specification — entering ingredients as structured data rather than a paragraph.
- Reviews — collecting and displaying product reviews.
Read next: Tabs or accordions on product pages?
Mobile navigation: a furniture store
Furniture and Interior · Built on FurniRix · Illustrative redesign study. The “before” is a composite of common problems.
The store
A furniture and interiors store with a wide range; sofas, tables, lighting, storage, rugs, outdoor furniture. Customers discover it on their phones, often from social media, and browse extensively before buying, frequently finishing on a laptop.
Before
- Every category was hidden behind a single menu icon, with nothing visible on arrival
- The drawer was one long flat list of eleven categories mixed with collection names: “Bestsellers”, “Murano”, “Planters”, “Decor”, “Gifting”
- Search was hidden inside the drawer rather than in the header
- No indication of which category you were in once you’d tapped into one
After
- Three top categories visible in the header without opening anything, chosen by what sells
- The drawer shows top-level categories first, revealing subcategories one level at a time with a clear way back
- Search visible in the header at all times
- The current category marked once a customer has tapped into it
Why it works
Hidden navigation reduces discoverability. A customer who doesn’t know what’s behind an icon has no reason to tap it, and navigation taps are one of the clearest predictors of whether a mobile session goes anywhere. The current guidance is a hybrid: a few visible, the rest behind the icon. Covered in hamburger menu, visible items, or both?
Mixing collections with categories confuses the structure. “Murano” is a collection; “Lighting” is a category. A flat list containing both forces the customer to work out which is which, the principle behind structuring your catalogue.
Level-by-level beats everything at once. A drawer showing every subcategory in one list is a wall. One level at a time, with a way back, keeps the full depth without the overwhelm.
What this is designed to improve
More mobile visitors reaching a category page instead of leaving from the homepage, and more of them finding the department they came for.
Build it in ZenBasket
- FurniRix theme — the furniture theme this study was built on, and one of the free themes.
- Navigation Menu — the hamburger display type, submenu levels, and the active item color.
- Header Customization — arranging the header, including what’s visible on mobile.
- Search Bar Customization — placing search where customers can see it.
- Stepper — presenting category paths as a tree view, one route to a level-by-level drawer.
Read next: Hamburger menu, visible items, or both?
Collection page: an electronics retailer
Electronics · Built on Devicea · Illustrative redesign study. The “before” is a composite of common problems.
The store
An electronics retailer selling headphones, speakers, chargers and accessories. Customers arrive knowing roughly what they want and decide on specifications; battery life, connectivity, compatibility, price. Many products look almost identical in photographs.
Before
- No filters. Sixty headphones in one grid, sorted only by “Featured”
- Product cards showed an image, a name and a price, nothing distinguishing one near-identical black headphone from the next
- Names began identically; “Wireless Headphones —”, so the distinguishing word was cut off
- A quick view overlay that showed the same three facts as the card, and nothing more
- Out-of-stock products at the top of the default sort
- No result count after sorting, so customers couldn’t tell whether a sort had filtered anything
After
- A filter panel with the facts that decide it, connectivity, battery life, price range, brand, each showing how many products match
- One key specification on every card, “30-hour battery · Bluetooth 5.3”, so products are distinguishable without opening them
- Names restructured to lead with the distinguishing detail
- No quick view. For a specification-driven product, the overlay couldn’t hold enough, so the card was strengthened instead and clicks go to the full page
- Out-of-stock items moved to the end of every sort
- A result count beside the sort control, so a sort visibly doesn’t change it
Why it works
Quick views help visually driven products and hinder specification-driven ones. Electronics is the second kind, the overlay can’t hold enough, so shoppers open it, find it doesn’t answer their question, and open the product page anyway. Strengthening the card helps every shopper instead. Covered in quick add or quick view?
Filters work only when the data behind them is consistent. A filter on battery life needs every product to state its battery life in the same way. That’s covered in filters and facets.
Out-of-stock products at the top waste the most valuable space on the page. Pushing them down in every sort is a small change that improves every visit.
What this is designed to improve
Customers finding the right product faster, fewer clicks into product pages that turn out to be wrong, and less time spent comparing items that look identical.
Build it in ZenBasket
- Devicea theme — the electronics theme this study was built on, and one of the free themes.
- Product Filter — setting up filters on your product attributes.
- Product List Page — what each product card displays in a listing.
- Product Specification — entering specifications consistently, which is what makes filters work.
- Bulk Product Editor — filling specification fields across many products at once.
Read next: Quick add or quick view?
Homepage hero: a fashion label
Clothing and Fashion · Built on FuFashia · Illustrative redesign study. The “before” is a composite of common problems.
The store
A fashion label selling womenswear and menswear, with a new collection each season. Most visitors arrive from social media and advertising. The homepage has one job: tell a stranger what the brand sells and get them into the right section quickly.
Before
- A five-slide rotating hero, advancing every four seconds, each slide a different campaign
- The hero took the entire first screen on a phone, so nothing else was visible without scrolling
- No category names anywhere above the fold. A slogan and a “Shop now” button, but no indication of whether the brand sold dresses or trainers
- No pause control on the rotation
- The “Shop now” button went to “All products”, four hundred items in no particular order
- Text sat over busy photography, unreadable on two of the five slides
After
- One static hero carrying the season’s single most important message
- A shorter hero on phones, so category entry points appear in the first screen
- Category tiles immediately below: Women, Men, New In, Sale, each with an image
- The two secondary campaigns moved to their own sections further down the page
- Short-lived news moved to an announcement strip above the header, instead of a slide
- The hero’s button goes to the new collection, not to every product
Why it works
The first slide of a rotating hero takes most of the attention, and later slides take very little. A five-slide hero is one chance plus four images of page weight. The research is in static hero, slider or video hero?
Rotation without a pause control is an accessibility failure at the most basic level, not only a usability one. Covered in autoplay or manual?
A homepage that doesn’t say what you sell is the single most common homepage problem, and the one that costs most for visitors arriving cold from social media.
What this is designed to improve
More visitors reaching a category page from the homepage, and fewer leaving without understanding what the brand sells.
Build it in ZenBasket
- FuFashia theme — the fashion theme this study was built on, and one of the free themes.
- Adding Image as Background — the static hero.
- Featured Categories — the category tiles below the hero.
- Attention Banners — the announcement strip that replaces extra slides.
- Slider — if you keep a slider, where rotation is controlled.
Read next: Static hero, slider or video hero?
Cart: a neighborhood grocery
Grocery · Built on Dailfresh · Illustrative redesign study. The “before” is a composite of common problems, not a specific business.
The store
A neighborhood grocery taking orders for home delivery. A typical basket holds fifteen to thirty items, most bought every week. Customers shop quickly, often on their phones, and add several of the same item at once.
Before
- Every “Add to cart” sent the customer to the cart page, so a twenty-item basket meant twenty round trips
- Quantity could only be changed on the product page, not from the listing
- No indication of which items were already in the basket while browsing
- The cart page didn’t show the delivery slot until checkout
After
- Adding an item keeps the customer on the listing, with a brief confirmation and the cart count updating
- The add button becomes a quantity control after the first tap, so a second or third is one tap each
- Items already in the basket are marked in the listing
- The delivery slot shown in the cart, before checkout
Why it works
Navigating to the cart after every add is the most expensive pattern for multi-item stores. Each round trip is a chance for the customer to decide they’re finished. The decision is covered in cart drawer or cart page?
In grocery, the add button should become a quantity control after its first use. Customers frequently want two or three of something, and sending them to the product page to change quantity defeats the purpose.
What this is designed to improve
Larger baskets, faster shopping sessions, and fewer customers dropping off.
Build it in ZenBasket
- Dailfresh theme — the grocery theme this study was built on.
- Add & Switch Pages — the prebuilt cart page and how to edit it.
- Product List Page — how products and their controls appear in a listing.
- Abandoned Cart — recovering baskets left behind.
Read next: Cart drawer or cart page?
Want this for your store?
Every study above was built on a theme you can use today; three of the six are free.
- Browse all themes — filter by your industry
- Moving from another platform? — our team can help transfer your store
- Start a free trial — build and preview before you commit