Sobeys partnered with IBM to redesign its website and introduce an online product catalog. As part of this effort, 100+ food inspiration pages across Sobeys were migrating over to the new website to promote product discovery and cross-selling.
We collaborated with Adobe to integrate a CMS solution to standardize content and web elements across Sobeys. Within the design team, I contributed to the design of personalized recipe recommendations, and recipe pages with ingredient-to-cart functionality.
2 UI/UX designers
3 service designers
IBM + Adobe development team
IBM + Adobe business analysts
Sobeys merchandising team
Sobeys marketing team
Salvaging underperforming recipe content
Despite Sobeys investing time and resources in producing 100+ recipe articles and instructional content, these pages had historically seen low engagement—doing little to improve site stickiness. Our challenge was to give existing Sobeys customers a reason to engage with recipes.
Sobeys was not a go-to source for food inspiration
In an interview study, shoppers preferred seeking external sources for inspiration, such as food influencers, chefs, or trending cooking blogs. Web analytics showed that ~80% visited Sobeys.com primarily for deals.
Recipes weren't compelling in the context of where they appeared
Most articles and instructional recipe pages lived in their own sections of the website, while some were either difficult to find or did not align with Sobeys’ seasonal campaigns on the homepage. As a result, recipe content didn't tell a compelling story that resonated with shoppers.
Inconsistent page layouts caused disjointed browsing experiences
Recipe-related pages had inconsistent layouts because they were manually produced by different marketing teams. I hypothesized that inconsistencies created jarring browsing experiences for online shoppers.
Cross-selling through personalized recipe design
With the website redesign and product catalog integration, we saw an opportunity to reimagine the recipe experience—using content contextually to inspire seasonal shopping, increase basket size, and drive cross-sells. We designed personalized recipe recommendations as pathways to recipe pages with ingredient-to-cart functionality.
01
Setting personalized preferences
Once customers sign-in to Sobeys.com, they can set preferences for recipe and product recommendations based on lifestyle choices and dietary needs.
02
Navigating the site and directed searches
I redesigned the dropdown navigation and advised on the search tool. As users type, results update in real time with products, recipes, and articles on one sheet, encouraging discovery and cross-engagement.
03
From browsing to viewing specific pages
Product pages and landing pages featured dynamic content recommendations. These components could be either manually customized by Sobeys or automatically generated through AI.
04
Adding recipe ingredients to check-out
We integrated an add-to-cart feature on recipe pages to reduce friction between inspiration and purchase. Shoppers can easily swap products from the ingredient list and discover more from Sobeys’ catalog.
Making sense of messy data, information flows, and people
I led the research, information architecture, and design system development for Sobeys’ new website. During the CMS migration, I established core building blocks within the design library to align teams and designed a more personalized shopping experience by scoping opportunities to improve existing content and features.
Research
Information architecture
Content & systems design
How can online recipes bring value to Sobeys shoppers?
At the start of the project, we were unsure how recipes fit into the new website experience. To get a sense of direction, I conducted 20 contextual inquiries to understand customer meal-planning practices and their opinion of Sobeys recipes.
I discovered that shoppers were willing to engage with recipe content in moments when it adapted to their needs. We applied the following principles to our solution:
Reduce the mental load of meal planning decisions
Participants often swapped items for deals or alternatives, which left them uncertain about what meals to prepare, which prompted them to figure out a new plan.
"What can I cook with the different products I picked up?"
Inspire ways to use products of interest
Participants enjoyed coming across useful information while looking for something else. For example, recipe ideas on physical packaging, which are often omitted online.
"How can I spice up the high-protein yogurt I usually buy?"
"I found an interesting new product but don't know what to do with it."
Cater to individual preferences and dietary needs through AI
Social media was the most common source of recipe inspiration. Participants often discovered recipes by chance. These encounters were effective because AI-driven recommendations catered to their preferences.
"My son sends me recipes that he finds on Instagram... They are quick and easy meals."
Using service blueprints to map end-to-end journeys
I supported service designers in understanding recipe touch-points across a personalized online shopping journey for Sobeys customers. Our blueprints reflect information flows between user and backend processes.
Developing a site map
I reorganized the entire website to establish a universal scheme that maintained consistency and governance across content for Sobeys and its five subsidiaries—especially with the addition of a new product catalog.
Defining components & page layouts
On a page level, I collaborated with the Adobe Experience Manager team to enable non-technical Sobeys staff to easily customize and publish content. While they handled technical implementation, I defined component composability, layout standards, and usage guidelines for hand-off.
Responding to user and business feedback
To align on layout and priorities, I facilitated collaborative review sessions with stakeholders. I also collaborated with researchers at Sobeys’ Research Centre in Halifax to validate early wireframes, concepts, and final designs through eye-tracking and brainwave testing. These insights informed key design revisions:
Article template change
Conversations about which was the best layout. Needed to standardize article page and ads.
Component changes
Collaborations with stakeholders across 5 other subsidiaries. Realized we needed to make adjustments to the main nav
Search tool update
Included an interactive preview to the search function.
The redesign of articles resulted in a big win for our team. Standardized CMS templates empowered marketing teams to scale and manage content efficiently across Sobeys, as well as Safeway, IGA, Foodland, and Frescho.
Other accomplishments:
My work laid the groundwork for a new meal-planning function with GenAI capabilities.
I mentored two designers and one intern, fostering skill development and collaboration within an agile, cross-functional environment.
I helped establish a culture of design system maintenance early on, despite the growing pains of working within a small product team. Developing a workflow required trial-and-error and open communication between teammates. In the long run, this made it far easier to implement changes and scale to across other grocery retail websites.
