Bizz | B2C Mobile eCommerce UX | Reducing Cognitive Load in Product Browsing

Streamlining mobile product cards to reduce friction and help B2C shoppers browse and compare items more easily within Shopify’s theme limitations.

En Crème’s mobile storefront was visually engaging but made product discovery harder than it needed to be. Overloaded product cards and aggressive CTAs added friction to what should have been a smooth, exploration-first experience. I led a UX redesign to reduce visual clutter, streamline the browsing flow, and align the interface with user intent—helping B2C shoppers explore more intuitively and convert with confidence, all within Shopify’s theme constraints.

My Role

Product Designer (Mobile UX)

Collaborators

Shopify Developers, Ecommerce Marketing Manager, Content/Brand Team

CONTEXT

Duration

3 Weeks

Tools

Figma, Shopify, Notion, ChatGPT, Perplexity, Maze, Hot Jar

Bizz, Inc. is the parent company behind En Crème, a women’s fashion brand known for its elegant, timeless styles. As mobile traffic continued to grow, the brand realized that its product listing experience, built on a default Shopify theme, was creating friction for everyday shoppers trying to browse and compare items with ease. Overloaded cards, aggressive CTAs, and visual clutter were getting in the way of smooth exploration. The project was initiated to reimagine the mobile experience with a focus on clarity, reduced cognitive load, and a more intuitive shopping flow tailored to B2C behavior.

PROBLEM STATEMENT

How might we reduce cognitive load on mobile shoppers so they can browse and evaluate products more effortlessly?

DESIGN SOLUTION

PROJECT OBJECTIVES

Simplify mobile product cards to reduce visual clutter and cognitive load.

➔

Improve product discoverability and browsing efficiency for B2C shoppers.

➔

Enhance the overall shopping flow within the limitations of Shopify’s theme system.

DISCOVER & RESEARCH

Initial Behavior Analysis

To better understand user behavior on the original mobile product listing page, I conducted click tracking and created a heatmap visualization. This helped identify interaction patterns before any design iterations began.

On the mobile product listing page, showing both “Add to Cart” and “View Options” buttons led to unintended friction. While the goal was to encourage quicker decisions, the two CTAs often diverted attention away from browsing.

Users frequently tapped CTAs before fully evaluating items—sometimes adding products prematurely or navigating to detail pages unintentionally. This disrupted the exploration flow, made it harder to compare options, and resulted in repeated backtracking or drop-off.

Failed User Flow

Synthesis & Insights

  • Visual hierarchy drives attention—bolder visuals get more engagement.

  • Users scan details before acting, highlighting the need for clearer microcopy and UI cues.

  • Text-only color labels caused hesitation; visual indicators work better.

  • CTA clicks didn’t always reflect intent—many users weren’t ready to commit, suggesting a need for better pacing in decision-making.

High Engagement Zones

  • Product titles and prices

  • “Add to Cart” button

  • Left product image (visually vibrant)

Medium Engagement Zones

  • “View Options” button

  • Color label (“1 color available”)

  • Right product image

Low Engagement Zones

  • Secondary products below the fold

  • Sticky button

  • Logo and top nav icons

SOLUTION

To create a smoother shopping experience on mobile, I restructured the product listing page with a focus on clarity and user intent. This involved:

  • Streamlining each product card to highlight only core details

  • Removing duplicate CTAs that previously disrupted browsing flow

  • Enhancing visual spacing to support easier scanning and comparison

ITERATION & DESIGN

Prototype Testing

I used scripted task flows in Figma to test early design concepts before development. These lightweight prototype sessions revealed how users interacted with the layout, helping me adjust the visual hierarchy and CTA placement for a smoother browsing experience.

Participants

  • 6 US-based participants (6 female, aged 27-50)

  • All regularly shop online using mobile devices

Tasks & Goals

Scan & Compare

Find and compare 3 products you like

Observed scanning flow and visual clarity

➔

Locate Key Info

Look for an item under $60 in a neutral color

Tested info prioritization (price, color options)

➔

Take Next Step

Decide what to do after finding a product

Evaluated impact of removing CTAs from list view

In the first iteration, I removed the “Add to Cart” button and kept only “View Options” to reduce visual noise. The goal was to create a calmer browsing experience and give users space to explore without feeling rushed to decide.

In the second iteration, I replaced “View Options” with “Add to Cart” to test whether a more decisive CTA would improve conversions. I also introduced color chips in place of text labels to reduce visual clutter. While the layout felt cleaner, users still hesitated to act without enough product context.