Redesigning a B2C Ecommerce Homepage: What We Changed and Why

We were migrating a food ecommerce brand from Magento to headless. Next.js on the frontend, SAP OCC on the backend. The brief included a full site redesign alongside the replatform. I was the Frontend & UX Architect on the project, handling both the architecture and the UX decisions.

The homepage was the first thing we audited. This is the first post in a series on the redesign. Checkout and loyalty follow.

What we were solving for

Going in, we aligned the redesign around four business objectives:

• Help customers find products faster
• Increase visibility of high-value categories
• Strengthen trust
• Create more opportunities for the brand to start a conversation

And underneath all four was the same customer asking the same set of questions on every visit:

• Is this fresh?
• Is this high quality?
• Can I trust this brand?
• Is delivery reliable?

The old homepage had answers to all of these somewhere on the page. They just weren't easy to find.

The homepage before

The old homepage had everything: hero banner, deal of the week, best sellers, categories, featured brands, customer reviews, newsletter. Nothing was missing.

What was missing was hierarchy.

Every section competed at the same visual weight. The deal, the categories, the reviews, all sitting at equal volume. When there is no visual hierarchy, the eye has no default entry point. Users have to scan the entire page to decide where to start, which is cognitive work they should not have to do. The page was expensive to read before it was even interesting.

And red was everywhere: the Shop Now button, the Add to Cart button, the Secure Checkout badge, the Contact Us link, the newsletter JOIN US button, the footer Call to Order. Six different contexts, one color.

This is a CTA hierarchy problem. On any given viewport, there should be one primary action, one secondary, and supporting elements that do not compete. Using the same high-attention color for commerce CTAs, trust signals, and utility links collapses that hierarchy entirely. Every element reads at the same urgency level. Nothing stands out because everything is trying to.

From the discovery presentation: "Red everywhere made all elements seem equally important, causing confusion."

On mobile it was worse. The header held a hamburger menu, a search icon, the logo, an account icon, and a cart icon in one bar. Cart and account were reachable only by stretching to the top right corner. No bottom navigation. One-handed use was an afterthought.

The Deal of the Week, which heatmap data showed was the highest-intent section on the page, sat below the fold on mobile. Users were scrolling past three other sections to find it, then clicking through to the product detail page, then adding to cart. Four steps for an impulse buy on a premium product.

The category section used small circular thumbnails of raw product. Cuts of meat on a white background. Accurate. Not the kind of image that makes someone want to cook dinner.

The review cards had quotes and aggregate star ratings but no connection back to specific products. A strong review about a particular cut had no product thumbnail, no link, nothing to close the loop. The trust signal existed but it wasn't doing any work.

The design philosophy

Before we touched the layout, we needed to agree on what the homepage was actually for.

This client sells premium meat. They are not competing on price. That means the homepage has a different job than a discount storefront. It cannot just be a catalog. It has to make someone want to buy something before they have decided they want to buy something.

The principle we kept coming back to: desire first, product second, CTA third.

When a user lands on the homepage, they may not be in buying mode yet. The homepage needs to put them there. Think about the difference between seeing a raw potato on a website versus seeing a finished burger. Nobody gets hungry looking at a raw potato. The potato makes you think of twenty different things you could do with it, which is a decision, which is friction. The burger makes you want a burger right now. That's the conversion flow.

We mapped the redesign around three things we wanted the user to feel on landing:

• I can taste this right now (sensory impulse from lifestyle photography)
• I know exactly where this came from (brand story and trust indicators)
• I know what I want to order (guided path from deal to cart, not a catalog dump)

This also shaped how we thought about information density. Hick's Law describes what happens when you present too many equal choices at the same moment: decision time increases, and so does the chance the user makes no decision at all. The old homepage was a direct application of this problem. Every section at the same weight, every category equally prominent, every CTA in the same color. We reduced the number of choices at each scroll depth and gave each section a single job.

What we changed

The guided journey

Before touching individual sections, we restructured the page as a sequence. Each section has a role in moving the user forward, and they are ordered deliberately:

1. Rotating banner - promo, trust signal, seasonal context
2. Deal of the Week - immediate, high-intent offer
3. Best Sellers - social proof, low-friction entry
4. Categories and Shop by Cut - guided or expert product discovery
5. Brand Story and reviews - trust closure before a decision
6. Partners and footer - institutional credibility, no pressure

The old page had most of these elements. The difference is order and weight. In the old design, you could land anywhere depending on scroll speed. In the redesign, the page walks you somewhere.

Deal of the Week

The heatmap told us where user intent was highest. We designed the page around that signal. The deal moved above the fold, immediately after the hero carousel. On mobile, it is the second thing you see.

Above-the-fold placement matters because users spend the majority of their attention on content visible before scroll. Content that requires scrolling to reach is not guaranteed to be seen. For a section that heatmap data confirmed was the primary purchase trigger, keeping it below the fold was a direct conversion leak.

The path shortened too. Instead of clicking through to a product detail page, users can choose options or add directly from the homepage. Four steps became two. Each step removed from a conversion flow reduces the probability of drop-off. This is especially true for impulse purchases, where user intent is high but fragile. The longer the path, the more opportunities for hesitation.

The card also has a subtle animated gold border. Slow and smooth, not flashy. This uses pre-attentive processing: the visual system detects motion before conscious attention engages. The user does not need to be looking at the deal card for the animation to register. It draws the eye passively, reinforcing that this element is different without the page having to label it as important.

Best Sellers

Best sellers moved earlier in the page, right after the deal. Each card shows the product name, star ratings, and a BESTSELLER badge in gold, with a quick-add action on the card itself. Users who know what they want do not need a product detail page.

The placement is deliberate. Social proof works as a cognitive shortcut: when users are uncertain about a product's quality, they use other people's behavior as a signal. Showing what thousands of customers are already buying reduces the evaluation effort for a first-time buyer. Placing this early in the page means the trust question is partially answered before the user has consciously asked it.

The badges and star ratings on each card use pre-attentive attributes: visual properties the brain processes before focused reading begins. A BESTSELLER label in gold or a five-star rating registers as a quality signal in a fraction of a second, reducing the cognitive work needed to assess each product in the grid.

Categories

The small circular raw thumbnails were replaced with large rectangular tiles on mobile in a 2x2 grid, using cooked food and lifestyle photography. A grilled steak. A dinner spread. A seared wagyu cut.

The question the category section needs to answer is not "what cut is this?" It is "I want that meal." Raw product shots on a white background activate functional evaluation: the user has to decide what they want to make, which cut to choose, how to cook it. Lifestyle imagery bypasses that and activates desire directly. The purchase motivation here is emotional, not functional. Sensory marketing works by triggering that emotional response before the analytical brain gets involved.

We also reduced the number of featured categories to four. Applying Hick's Law here: a curated set of four high-value categories requires less decision-making effort than an exhaustive list of everything the brand sells. Users who want to browse more have the Shop by Cut section immediately below. But the first contact with categories should narrow, not overwhelm.

Shop by Cut

Shop by Cut stayed in the redesign. It serves the expert customer who already knows they want a filet mignon or a NY strip and wants to get there fast. Removing it in the name of simplification would have created friction for the highest-intent segment on the site.

This is a dual-mode UX pattern: designing for both the novice user who needs guidance and the expert user who needs direct access. The curated categories above serve the novice. Shop by Cut serves the expert. Both paths coexist without the page feeling cluttered because they sit at different scroll depths and serve different intents.

The visual treatment changed significantly. Circular crops on a dark slate background, placed after the rectangular category grid above. The shape and color contrast creates a Gestalt figure-ground break: the brain notices the visual shift, re-engages, and is more likely to interact with what comes next. Monotonous layouts produce scroll fatigue. Varying the visual rhythm at predictable intervals keeps users active deeper into the page.

Brand Story

This section did not exist in the old homepage. We added it.

Trust signals follow a stage-gate pattern in the user journey. Placed at the top of the page before desire is established, they read as marketing copy. Placed after the user has seen the deal and explored the products, they read as reassurance. The brand story and trust indicators sit in the lower half of the page deliberately: by that scroll depth, the user is already considering a purchase. What they need now is a reason to follow through, not an introduction.

The section includes the brand heritage narrative and three trust indicators: hand-cut to order, family owned, fast safe delivery. These map directly to three of the four customer questions from the audit. Is this fresh? (hand-cut to order.) Can I trust this brand? (family owned, established heritage.) Is delivery reliable? (fast safe delivery.)

For a premium product at a higher price point, authority cues and provenance matter. Users making a considered purchase want to know the brand has a history, a standard, and accountability. That is harder to communicate with a product card than it is with a dedicated section that exists only for that purpose.

Customer reviews

The redesigned review cards add a verified checkmark, a review title, and a product thumbnail with the product name beneath each card. The total review count is shown as a number.

Social proof specificity is the key principle here. The closer a review is to the specific product a user is considering, the more it reduces purchase anxiety. A generic five-star average is easy to dismiss. A titled review with a verified badge next to a thumbnail of the exact cut the user is looking at is not. It closes a direct loop: someone like me bought this specific product and had this specific experience.

The verified checkmark also addresses a known trust problem in ecommerce. Users have learned to be skeptical of unverified reviews. A verification signal at the UI level, even a simple icon, shifts the review from "someone wrote this" to "someone who actually purchased this wrote this." That distinction affects how much weight the review carries.

Mobile navigation

We replaced the top-bar-only navigation with a fixed bottom nav: Home, Shop, Search, Cart, Account. All in the thumb zone. The Cart tab has a red notification dot when there is something in it. That is the only red on the nav bar.

The reasoning is Fitts's Law: the time and effort required to reach a UI target increases with distance from the natural hand position and decreases with target size. Navigation placed at the top of a mobile screen requires either two-handed use or an awkward stretch with the thumb. Research into mobile grip patterns consistently shows the natural reach area covers the bottom third of the screen. Placing Cart, Account, and Search in that zone aligns the interface with how people actually hold their phones.

The fixed position matters too. Persistent navigation removes the cognitive overhead of remembering how to get to cart or account while mid-page. The path to purchase is always visible and always reachable regardless of scroll depth. This also aligns with the mental model of a native mobile app, which matters for a site implementing PWA behavior. The bottom nav reinforces the "installed app" feel rather than "website on a phone."

The color system

This is the part that is harder to see in screenshots but more important than any individual layout decision.

In the old design, red was the primary action color, but it also appeared on trust badges, secure checkout labels, policy text, the newsletter button, and footer links. This is a CTA hierarchy failure. Red is a high-attention color that in most UI conventions signals urgency, error, or danger. Using it for commerce CTAs, trust indicators, and utility links simultaneously means it carries no specific meaning. The user cannot use color to understand what the interface wants them to do next.

The fix is semantic color: assigning each color a defined role and keeping it consistent across every surface. When colors carry consistent meaning throughout a product, users build a mental model of what each one means. Every new page that follows this system costs them less cognitive effort to decode. Break the pattern on one surface and the model breaks everywhere.

We defined explicit roles for each color across the whole site:

Red: Primary commerce CTAs on marketing surfaces only. Shop Now on the hero. That is the job. Nowhere else.

Gold: Premium highlights and selection states. The active nav indicator, the bestseller badge, the deal card animation, loyalty tier markers. Same family as the brand logo mark, used sparingly so it reads as premium rather than decoration.

Black: Commitment actions. Subscribe. Place Order. Footer anchors. High contrast, no ambiguity.

Green: Success and verification only. Verified review checkmarks. Free shipping confirmed. Applied voucher state. Never for primary CTAs.

This system carries into the checkout and loyalty redesigns. The homepage is teaching users what each visual signal means. Checkout and loyalty should reinforce that language, not introduce new ones.

The biggest shift was treating the homepage as a sequence rather than a surface. Once every section had a job and an order, most of the other decisions followed from that. The red overload, the buried deal, the raw thumbnails: those were all symptoms of the same problem. A page that was trying to show everything instead of taking the user somewhere.

If you are working through a headless migration or auditing a legacy storefront, let's talk about how I can help. Reach me on LinkedIn or at karishmagarg.dev@gmail.com.