Loblaw Digital – Engage Domain
At Loblaw Digital, we design, build, and operate the digital platforms that power Canada’s largest retailer. This includes over 40 websites and 4 mobile apps such as PC Express, PC Optimum, Shoppers Drug Mart and Joe Fresh. Serving millions of customers across grocery, pharmacy, fashion and loyalty experiences.
Role
Product Designer
Tools
Figma
Cursor
Replit
Token Studios
Miro
Platforms
iOS
Android
Web
Team
Product Designers
Developers
Project Managers
Technical Program Managers
The Team 💛
The Engage domain owns the end-to-end eCommerce customer experience, from the moment a customer opens the website or app to the point where they navigate to the cart.
Our team is responsible for key customer touchpoints including homepages, search results, product detail pages, and the overall product discovery experience. My work is focused on improving product discovery, engagement, and scalability across Loblaw’s digital ecosystem.
Focus Areas
Faster Product Discovery 🔍
Customers come to the platform with a goal in mind, and our focus was to help them find relevant products as quickly and intuitively as possible. This meant improving product listing pages, navigation, and homepage experiences so users could move from landing to product discovery with minimal friction.
Discovering Value with Confidence 💫
A key part of the shopping experience is helping customers easily identify promotions, deals, and product value. I focused on UGC, ratings and reviews so customers could make confident purchase decisions.
Engaging Shopping Experiences 🛍️
I explored more engaging and inspirational ways to shop through richer content such as user generated content, editorial style banners, gallery browsing, and more visual experiences across the platform
Scalable Foundations 🪄
I contributed to the evolution of the design system and scalable components to support multiple teams, brands, and platforms. This work helped improve consistency, accessibility, and speed of delivery across products.
Let's dive in!
01
Scaling Product Discovery Across the Loblaw Ecosystem
Homepage discovery
The Challenge
The homepage and browse experiences needed to balance business priorities with individual customer needs, but existing patterns didn't always surface the most relevant products at the right time.
The above-the-fold experience was heavily weighted toward marketing, limiting product discovery and underutilizing some of the most valuable real estate on the page.
Across Joe Fresh, Shoppers Drug Mart, and PC Express, the opportunity was to rethink how homepages could better connect customers with relevant products, promotions, and shopping journeys while supporting each brand's distinct customer needs and business objectives.
Approach
I contributed to the design and implementation of new homepage and browsing patterns across Joe Fresh, Shoppers Drug Mart, and PC Express, focusing on making product discovery more intuitive and engaging.
As well as introducing two flexible, modular components: Bento Cards and Gallery Scrollers. These patterns reimagined how content was organized and surfaced, improving visual hierarchy, creating more opportunities for product discovery, and helping teams balance promotional priorities with relevant shopping content.
By creating more adaptable layouts, we enabled richer browsing experiences across web and app while supporting the distinct merchandising needs of each brand.
Exploring the solution
01. Exploring content hierarchies and grid configurations
I began by evaluating existing homepage and browsing experiences across retail brands to understand how different content structures supported discovery and conversion. I benchmarked patterns across desktop web, mobile web, and app, looking at how retailers organized promotional banners, product collections, category entry points, and editorial content.
This exploration highlighted an opportunity to move beyond static, marketing heavy layouts toward more flexible, hybrid components that combined inspiration with shoppable content. I explored different grid configurations, content groupings, and module sizes to understand how products could become more visible without overwhelming the page or compromising the hierarchy of existing content.
I also considered how layouts should adapt to each screen size, beyond simply rearranging elements. The goal was to preserve the intended hierarchy and functionality while optimizing the experience for each platform.
02. Balancing product imagery, promotional content, and scannability
A key design challenge was balancing the need to promote campaigns with the need to help customers discover products quickly. The above the fold experience was valuable real estate, yet giving too much space to marketing content could delay access to relevant products and shopping journeys.
To address this, I explored a more balanced content strategy that accounted for both discovery and conversion. Discovery focused content could introduce customers to new products, categories, and brand offerings, while conversion focused content could provide direct access to familiar products, promotions, and purchase actions.
I used this distinction to inform the hierarchy and purpose of different homepage modules:
-
Discovery-focused content: Curated collections, editorial storytelling, and category exploration designed to encourage browsing and deeper engagement.
-
Conversion-focused content: Shoppable product collections and promotional content that help customers move more directly toward adding products to their cart.
Rather than treating these as competing priorities, the goal was to create a more intentional mix of content that supported different customer needs. I also explored how product imagery, content density, and visual grouping could make modules easier to scan and understand at a glance.
03. Designing flexible components for merchandising and personalization
From these explorations, I contributed to the design and implementation of Bento Cards and Gallery Scrollers modular patterns that introduced more flexible ways to organize and surface content across homepage and browsing experiences.
Bento Cards enabled curated product collections to be presented in more dynamic grid layouts, creating opportunities to prioritize content, emphasize key products, and support merchandising campaigns. Their modular structure offered greater flexibility in how products and promotional content could be grouped and presented.
Gallery Scrollers provided a more compact way to showcase multiple products or content items within a horizontally browsable layout. This allowed customers to explore a broader assortment while making efficient use of limited screen space.
Both patterns were designed to support a more adaptable content strategy, including strategic merchandising and personalized product collections. This created opportunities to tailor what customers saw based on campaign priorities and relevant shopping content, while maintaining a consistent underlying design framework across web and app.
The broader goal was to create reusable patterns that could flex to meet each brand's needs without sacrificing usability, visual hierarchy, or the connection between discovery and conversion.
Results & Impact 🚀
Together, Bento Cards and Gallery Scrollers introduced more flexible, personalized, and engaging ways for customers to discover products across the homepage.
Bento Cards: Driving measurable conversion
Bento Cards demonstrated a strong impact on product discovery and conversion, outperforming traditional homepage carousels in driving customers to personalized product listing pages.
-
17% conversion rate on Personalized PLPs, compared to the 0.77% site average
-
81 orders generated, up 81% week over week
-
514 visits to Personalized PLPs, up 62% week over week
-
$216 average order value, $44 above the site average for PLP orders
With a 17% conversion rate compared to 1% for homepage carousels, Bento Cards showed the potential of more contextual, visually engaging entry points to drive higher value shopping journeys.
Gallery Scrollers: Building a more flexible discovery experience
Gallery Scrollers introduced a more modular approach to homepage merchandising, allowing teams to combine high priority campaigns with personalized product and collection content within the same surface.
The new pattern created a more visual, editorial, and scannable browsing experience, giving customers more opportunities to discover relevant products beyond their initial shopping intent. It also established a scalable foundation for future homepage experimentation and personalization.
Performance measurement is ongoing following launch, with engagement and conversion data needed to quantify the impact.
Key Takeaway
These initiatives reinforced the value of designing beyond individual components and considering how content structure, personalization, and product discovery work together to shape the shopping experience.
Bento Cards demonstrated measurable conversion and order value gains, while Gallery Scrollers established a more adaptable foundation for future merchandising and personalization strategies. Together, they helped move the homepage toward a more relevant, dynamic, and customer centered shopping experience.
02
Improvement and evolution of Loblaws Design System
Improvement of Design Systems | JF App Enhancements
The Challenge
Loblaw's shared design system was primarily built around grocery shopping experiences, making it difficult to consistently support the distinct needs of other lines of business, including Joe Fresh and Shoppers Drug Mart.
As these brands evolved, existing components didn't always meet their needs for modern layouts, richer imagery, and more flexible shopping experiences. This created gaps between the design system's capabilities and the experiences teams needed to build.
The challenge was to evolve the system beyond its grocery-first foundations, creating a modern, reliable, and flexible design foundation that could support the unique needs of each brand while enabling teams to build more efficiently and consistently across the Loblaw ecosystem.
Approach
I contributed to evolving Loblaw's shared design system to better support the needs of multiple lines of business, including Joe Fresh and Shoppers Drug Mart.
Working with cross functional teams, I audited existing components, identified gaps across different shopping experiences, and explored opportunities to modernize layouts, improve visual hierarchy, and introduce greater flexibility.
Rather than creating isolated, brand specific solutions, the focus was on enhancing existing components and introducing new patterns that could accommodate different content, merchandising, and brand requirements while maintaining a consistent foundation across the ecosystem.
The Process
01. Auditing the system across LOBs
Evaluated existing components against the needs of grocery, apparel, and health and beauty experiences. Identified where existing patterns could be reused, where components needed to evolve, and where gaps limited the experience.
Desing Audit
Competitive Analysis
User Test Results
02. Exploring flexible, modern patterns
Explored how components could better support brand specific requirements through more flexible layouts, stronger visual hierarchy, richer imagery, and editorial content. Considered how to balance the needs of individual brands with the benefits of shared components.
Loblaw Before
After
Joe Fresh Before
After
SDM Before
After
03. Accelerating Design-to-Code with AI
We focused on more than modernizing components we also looked at how to make them faster and more efficient to build, implement, and evolve.
As part of this effort, our team became the first to integrate AI into the web component development workflow. By translating Figma designs into code using Cursor and GitLab, we established a design-to-code process that significantly accelerates component development. Instead of building every component from scratch, we use AI to generate the initial implementation from our designs, allowing developers to focus on code review, refinement, and integration into the existing codebase.
This approach has the potential to reduce development timelines from weeks or months to significantly shorter cycles, bringing design-system enhancements to life faster and enabling teams to respond to evolving business needs more quickly.
Combined with more flexible, reusable components, this workflow helps establish a stronger foundation for scaling design-system improvements across Loblaw's lines of business allowing us to deliver better experiences faster and stay ahead of the competition.
Solution
We evolved Loblaw's shared design system to support the distinct needs of Joe Fresh and Shoppers Drug Mart while creating a more scalable foundation for all lines of business.
By enhancing existing components and introducing more flexible layouts, richer imagery, and improved visual hierarchy, we enabled more modern, brand aligned experiences without sacrificing system consistency.
Beyond the components themselves, our team pioneered an AI assisted design-to-code workflow, translating Figma designs into web component implementations using Cursor and GitLab. This allowed developers to focus on reviewing, refining, and integrating generated code rather than building every component from scratch.
Together, these improvements transformed both what our design system could support and how quickly we could bring enhancements to life.
Previous PLP took 1 month to fully develop
New PLP took 5 days to fully develop
Outcomes 🚀
Scaling design-system development with AI
100+ components created in one month
By integrating AI into our design-to-code workflow using Figma, Cursor, and GitLab, our team accelerated the creation and implementation of web components at scale.
-
Accelerated delivery: Created over 100 components in just one month, demonstrating a faster approach to translating designs into working code.
-
Scalable design system: Expanded the library of reusable components to better support the distinct needs of Joe Fresh, Shoppers Drug Mart, and other lines of business.
-
Faster iteration: Enabled developers to focus on reviewing, refining, and integrating generated code, reducing reliance on building each component from scratch.
-
Competitive agility: Established a more efficient foundation for shipping design-system enhancements and responding to evolving business needs.
03
Building Trust & Confidence
UCG | Ratings & Reviews
The Challenge
Customers shopping online cannot physically see, touch, or try products, which makes it harder to evaluate quality, fit, and overall value. This is especially important in categories like beauty, health, and apparel, where customers rely heavily on feedback from other shoppers before making a decision.
This created an opportunity to build more trust and confidence in the digital shopping experience by making customer feedback and real customer content more visible, accessible, and integrated into the shopping journey.
Approach
I worked on integrating User Generated Content as well as Ratings & Reviews across key parts of the shopping experience, including product listing pages, product detail pages, and homepage modules. The goal was to ensure customers could quickly access social proof and real customer feedback while browsing and evaluating products.
This work involved collaborating with product, engineering, and business teams to define how and where this content should appear to support decision-making without overwhelming the shopping experience.
Solution
User Generated Content
We introduced and expanded UGC modules that showcase real customer photos and content. This helped customers better visualize products in real-life contexts and created a more authentic and engaging shopping experience.
Together, these features added social proof throughout the shopping journey, helping customers feel more confident in their purchase decisions.
Ratings & Reviews
We improved how ratings and reviews appear across the experience to make them more visible and easier to scan. This helped customers quickly evaluate products and make informed decisions without needing to search for reviews.
Outcomes
The introduction and expansion of Ratings & Reviews and UGC contributed to stronger engagement and purchase confidence across the platform.
Impact included:
-
Increased product engagement
-
Higher interaction with reviews and customer content
-
Improved conversion on products with visible ratings and UGC
-
Helped customers make faster and more confident purchase decisions
-
24,238 reviews have been collected since launch.
-
181M UGC visitors (customer who at least viewed UGC content)
-
2.0% conversion rate for customers who purchase after viewing reviews (2.8% is average conversion rate for sites that use PR UGC)
What I Learned ✨
Working across multiple projects and platforms taught me how to design not just for individual features, but for systems and end-to-end experiences. I learned how to balance business goals, user needs, and technical constraints while working within a large and complex ecosystem with multiple brands and stakeholders.
I also gained experience designing for:
-
Scalable design systems
-
Personalization and product discovery
-
Trust and decision making features
-
AI and conversational interfaces
-
Cross-platform experiences (Web, iOS, Android)
-
Collaboration with product, engineering, data, and business teams
This experience strengthened my ability to think in systems, design for scale, and measure success through both user experience and business impact.
Looking Ahead 🪄
As Loblaw continues to evolve its digital experiences, many of these initiatives are still growing and being optimized, particularly in areas like personalization, AI-assisted shopping, and design system scalability. I’m excited to continue improving how customers discover, decide, and shop across the Loblaw ecosystem, while contributing to more intelligent, personalized, and seamless shopping experiences.
This work reflects my focus as a product designer. Creating scalable, user-centered solutions that improve discovery, build trust, and drive measurable business impact.