Grocery Website overhaul
Facilitating omni-channel grocery shopping experiences
.png)
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.
Applicable Links
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
I led design and research efforts that drove project innovation and direction, while also defining the information hierarchy and component specifications
Shannon MacDonald, Cassandra Husband, Lydia Brian, Mariel Lopez, Ruzbeh Irani, Serena Tran

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.
For example, users rarely sought out deals or recipes unless they discovered them incidentally. This revealed opportunities for cross-sell and up-sell strategies.
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.
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.
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.
"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.
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.

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.

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.
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.
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.
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.


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:
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.



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!
23% of revenue growth attributed to digital experience transformation
20% revenue growth attributed to customer personalization transformation
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