Bringing the Aisle Experience Online

A UX/UI case study focused on enhancing online grocery shopping by bridging the gap between physical and digital retail experiences.

This project was for a UBC Computer Science course (CPSC 344: Human-Computer Interaction).

project overview

Team Size: 5
Duration: 14 Weeks
Tools Used: Figma, Miro, Qualtrics, Canva
My Role: UX Researcher & Interaction Designer

As part of a college UX/UI course, our team was tasked with redesigning an existing interface. We selected Save-On-Foods, a Canadian online grocery platform, and explored how to bring the tactile, exploratory aspects of in-person grocery shopping into the digital space.

Our research showed that users preferred in-person shopping due to the ability to physically handle products, visually compare items, and feel more in control of their purchases.

My role

I contributed to the project in the following ways:

  • Led user surveys and pilot testing

  • Developed low-fidelity wireframes for the Comparison Basket feature

  • Co-created the Conceptual Design 1 system and logic

  • Participated in brainstorming, cognitive walkthroughs, and mid-fidelity prototyping

  • Supported the final Figma prototype and interface flow refinement

How might we replicate the experience of browsing grocery store aisles and comparing products within an online shopping interface?

Research conducted:

  • Surveys (10+ participants)

  • User interviews (5 users)

  • Heuristic evaluation of Save-On-Foods' current UX

  • Affinity diagramming & persona development

Key takeaways:

  • 62% of users prefer in-store shopping due to hands-on product interaction

  • Users want to “compare similar products visually and quickly” like they do in physical aisles

  • Current online interfaces lack transparency, comparison tools, and shopping guidance

Problem Statement & User Research

design process

We followed a Double Diamond framework:

Discover → Define → Develop → Deliver

As a team, we explored two design concepts:

design concept I: Comparison Basket

A metaphorical recreation of the physical act of picking up and comparing items in-store:

  • A sticky ‘Comparison Basket’ icon appears on the product page

  • Users can drag or select items into the basket (e.g., different brands of 2% milk)

  • Clicking the basket opens a side-by-side swipeable modal, showing details like nutritional info, price, and quantity

  • An intelligent dropdown filter suggests the best-matched product based on user preferences (e.g., lowest sugar content)

→ Mirrors the physical shopping experience by allowing users to “hold” and compare products — just like being in a grocery aisle.

design concept II: AI Chat bot ‘Ask Darrell’

Inspired by in-store clerks, this AI assistant:

  • Accepts comparison requests via chat (e.g., “compare oat milks by price and sugar”)

  • Suggests the best-fit product

  • Accepts full recipe inputs and generates a shoppable ingredient list

  • Allows direct cart addition from chat

Note: I supported concept brainstorming but my primary design contributions were to Design Concept I.

lo-fi + med-fi prototyping

We began with hand-drawn sketches and moodboards to quickly explore layout ideas and visualize the user journey for the Comparison Basket. These sketches helped us align on core interactions and refine the structure before committing to digital tools.

From there, we translated the sketches into low-fidelity wireframes, focusing on user flow, placement of the basket icon, and the logic of selecting and comparing multiple items.

Next, we built a mid-fidelity prototype in Figma, where we refined:

  • The swipeable modal that reveals side-by-side product comparisons

  • A filterable dropdown that dynamically highlights the best-matching item (e.g., lowest in sugar or fat)

  • Visual consistency with Save-On-Foods’ existing interface for a seamless user experience

Interaction Highlights:

  • Sticky Comparison Basket UI → always visible, intuitive drag or click interaction

  • Swipeable pop-up modal → mimicking the act of holding products in-hand

  • Dropdown filter → personalized comparison based on user preferences

  • Smooth transitions → animations enhance discoverability and realism

These prototypes were the foundation for usability testing and informed further design iterations based on real user feedback.

user testing

We conducted moderated usability testing with 5 users to evaluate our mid-fidelity prototype.

Some positive feedback we received:

  • “This feels like how I compare items in-store.”

  • “I like that I can clearly see differences instead of clicking between tabs.”

Based on the feedback, we made the following iterations to our prototype:

  • Made the basket more visible with a pulsing animation

  • Clarified product detail text in the comparison cards

  • Added swipe cues to enhance discoverability

outcome / reflection

impact

Our prototype improved product comparison speed and satisfaction, and we received high marks and praise from course instructors for metaphor-driven design and user-centered thinking.

At the end of the term, we won the “Metaphor Masters Award” for demonstrating an impressive understanding and use of conceptual models.

takeaways

  • Real-world metaphors (like "aisle browsing") are powerful tools for digital UX.

  • Users crave control, clarity, and context when shopping online.

  • Designing for familiarity helps bridge the gap between digital and physical experiences.

next steps

  • Expand the Comparison Basket to support dietary or allergy flags.

  • Integrate into a live prototype with real Save-On-Foods inventory API (hypothetically).

Previous

Design