Grocery Website overhaul

Facilitating omni-channel grocery shopping experiences

Client
Large Grocery Retailer
Role
Design & Research Lead (Merchandising Stream)
Duration
Mar 2023 – Sep 2024
Solution
Desktop & Mobile Web App
Content Management System
B2B & B2C

Note: to ensure client confidentiality, some details have been redacted. Please get in touch if you would like to learn more!

Overview

IBM led the website overhaul of a grocery retailer—I tackled B2B challenges of fragmented user experience from siloed content management across retail brands, and B2C issues of low engagement due to limited e-commerce functionality. We collaborated with Adobe to implement a bespoke CMS solution.

Design Challenge

1) Design a web structure adaptable to subsidiary sites
2) Design a product catalog and shopping list feature
3) Engage users online to drive in-store foot traffic
4) Develop a new design system from scratch

Responsibilities

I led design and research efforts that drove project innovation and direction, while also defining the information hierarchy and component specifications

Product Team

Shannon MacDonald, Cassandra Husband, Lydia Brian, Mariel Lopez, Ruzbeh Irani, Serena Tran

01 // PROBLEM SPACE

lack of engagement

The platform lacked core e-commerce functionality, such as a product catalog or checkout, and instead relied heavily on content to deliver value. To compensate, the strategy focused on driving in-store foot traffic through stronger online engagement.

1. Lack of personalized content

For example, users rarely sought out deals or recipes unless they discovered them incidentally. This revealed opportunities for cross-sell and up-sell strategies.

2. Users did not keep track of their loyalty points

Less than 20% of our users actively engaged in the loyalty program. Users did not feel actively incentivized throughout the online browsing experience and did not keep track of their points.

3. Hidden services and cluttered product catalog

Users struggled to find in-store services, buried in a cluttered dropdown menu. The product catalog overwhelmed them, making navigation difficult and hindering the discovery of new or sale products.

02 // PROCESS

laying the foundation

I focused on establishing a baseline for design work. This began with balancing the marketing needs of stakeholders across 6 banner retail brands with user research.

Process ›

"Marie Kondoing"
website contents

Before diving into any redesign or content migration, we needed to know exactly what we had — and what was not "sparking joy" for our client. I led a content inventory and audit on what to keep, update, or retire.

Documented components, content types, and files (e.g. APIs, iFrames, etc.)

Conducted content and accessibility audits (e.g. alt text, colour contrast, etc.)

Identified mismatching visual elements, UI patterns, use of language, and IA

Collaborated with Adobe to align on content migration strategy

Stores across the country

Recruiting participants from across regions was crucial to understanding food culture nuances and complying with provincial alcohol and marketing regulations for the promotional strategy.

Process ›

UX Research

I designed and executed research plan that was tailored to fit our client's scope and timeline. The research insights paid off, guiding the overall direction of the information architecture and design.

Usability audit using Jakob Nielsen's 10 general principles

User interviews with 14 participants

Open card sort with 5 participants

Monitored tree test with 10 participants

Two rounds of biometrics testing (eye-tracker and EEG data) with 7 and 8 participants

Standardizing website layouts across different retail brands

We ran a card sorting exercise where users grouped labeled cards—each reflecting webpage titles and content across the client’s different grocery banners—to inform a consistent site structure.

Biometrics data helped align stakeholders on design decisions

For example, testing results confirmed that all participants focused on prices and loyalty points first, regardless of socioeconomic background. This guided decision-making for the design of key components.

Process ›

Information
Architecture (IA) development

I developed iterative drafts of the site’s information architecture, using research and audit insights to guide stakeholder walkthroughs. I then collaborated with Adobe to develop a bespoke CMS solution.

Designed CMS templates for pages and residing components

Defined component specs and rules for CMS template customization & composability

Developed a website structure that supports existing and new content across 6 banners

Collaborations with stakeholders to ensure designs reflected business goals

Co-designing a versatile IA scheme for multi-brand use

I facilitated cross-functional conversations with stakeholders from the marketing teams of various retail banners brands. My goal was to strike a balance between user and business needs.

Logos (blurred to maintain confidentiality) indicate which banners the IA categories or webpages would be relevant to.

CMS governance and component composability

I collaborated with Adobe to establish CMS rules and guardrails, as well as authored specifications on page and component composability. I created a resource guide for internal marketing teams.

03 // SOLUTION

Changes at a glance

The website serves as a personalized flyer. Shoppers see curated content—from recipes and past purchases alongside seasonal picks and sales. They can also track their loyalty points throughout the experience.

We considered form factors for different use cases. For example, a loyalty card is more likely accessed via mobile at a cash register.

Solution ›

Shopping lists for online to in-store customer journeys

To address the lack of an e-commerce checkout, we designed a 'shopping list' feature as a workaround solution.

Before

Our goal was to have users track deals but initial designs were not interactive nor did they account for the different contexts users could be using the features.

After

I redesigned the shopping list to distinguish online from in-store user behaviours. I created a view for curating a shopping list that transitioned into a view for users to check off in-store purchases.

Solution ›

Recipes: where meal planning meets cross-selling

We transformed recipes from a standalone section into an interactive feature that enhances the online grocery experience by supporting users with meal planning. My research helped inform the following designs:

01

Discover recipes from browsing and viewing product descriptions

02

Add ingredients directly from the recipes page to your shopping list

03

Choose your own products to substitute in the recipe
Solution ›

Improved navigation and department-specific services

I redesigned the navigation to make grocery shopping more intuitive, supporting a range of user behaviours—from directed searches to casual browsing of products and content.

04 // OUTCOME

ongoing efforts

While still in development, the new website offers a more personalized customer experience while also simplifying content management for marketing teams. We are proud of our progress!

Projected Impact
  • 23% of revenue growth attributed to digital experience transformation

  • 20% revenue growth attributed to customer personalization transformation

Accomplishments
  • Successfully influenced the strategy of 10 product areas, including meal planning, shopping lists, personalization, etc.

  • I led the 0->1 development of the design system from the ground up, comprising of 100+ components

  • I designed 10+ web templates adaptable for use by marketing teams of 6 banner websites

(NEXT PROJECT)

AI for healthcare
policy & pr