Collect & Save

Duration

2024.4 - 2024.10

Team

PC Express
PC Optimum

My Role

Product Designer

Responsibilities

UI/UX Design, User Research, Accessibility

about the project

What is Collect & Save?

Collect & Save is a brand new loyalty program by Loblaw Companies Limited (LCL) that rewards customers 1 stamp for every $20 spent on eligible products. With 20 stamps, customers can redeem a 75% discount on select cookware. Stamps can be collected digitally for PC Optimum (PCO) members with a PCid or through a physical stamp card in stores. On PC Express, customers can opt into the program, earn stamps while shopping, track their balance, and redeem rewards seamlessly within their grocery pickup or delivery order.

My Contributions

As the sole designer for this project, I led the end-to-end design process—from ideation and wireframing to final UI, user testing, and launch. I advocated for an integrated rewards experience, where customers could opt in, track, and redeem rewards directly in their online grocery flow. Working within a tight timeline, I balanced scope and priorities, iterated on designs through user testing, and collaborated closely with developers on accessibility and implementation. On launch day, I helped resolve production issues with cross-functional teams, ensuring a smooth and engaging customer experience.

Project Objectives

Business Objectives

The primary business objective of the Collect & Save program is to enhance customer engagement by driving higher AOV (Average Order Value), encouraging increased shopping frequency, and fostering continued purchasing during the holiday season.

User Objectives

From a user perspective, the goal is to allow customers to easily engage with the Collect & Save program on PC Express, earn rewards, and redeem stamps as part of their online grocery shopping experience.

This dual focus aims to create a win-win scenario for both the business and its customers, boosting loyalty and satisfaction.

Challenges

Navigating Project Complexities & Risks

Communicating Complex Program Rules

Effectively communicating the intricacies of the Collect & Save program was crucial to customer opt-in. The complex details needed to be presented in a way that was appealing and easy to understand, as overwhelming customers with too much information too early could discourage participation.

Balancing Diverse Stakeholder Needs

As a major enterprise-wide initiative, Collect & Save involved collaboration with numerous internal stakeholders from various teams, such as PC Optimum and enterprise legal marketing. Each stakeholder brought different priorities and expectations, creating a complex environment where balancing these diverse needs was challenging.

Risks from External Dependencies

Another challenge of Collect & Save was dependencies on systems we didn’t own, such as SWEDA which is used for order processing in our stores. This reliance introduced risks, as any changes on their end could significantly impact the customer experience, complicating decision-making and project direction.

Navigating Styling Ambiguity

The initial ambiguity around the visual design language for Collect & Save posed a slight challenge. With no clear direction on how icons, colours, and art direction would evolve, it was challenging to envision how the final UIs would look once styling was applied. This meant the designs had to remain adaptable to accommodate any potential visual language.

User Advocacy

Identifying UX Opportunities & Gaining Leadership Alignment

Before diving into the specifics of individual features, I focused on translating the business requirements document into actionable design goals that fulfill the needs of both the business and the customers.

Initially, opt-in and redemption on PC Express were not a part of the enterprise project scope. Recognizing the importance of creating a seamless and effective loyalty experience, I advocated for including these functionalities directly on PC Express and proposed solutions that could be technically feasible based on my expertise.

Through these efforts, I successfully gained leadership alignment to incorporate opt-in and redemption, ensuring an integrated and cohesive end-to-end experience for customers.

Design Explorations

Designing for a Delightful & Engaging Experience

To effectively encourage customer engagement, I leaned into gamification as a powerful strategy to translate the Collect & Save program into an enjoyable experience on PC Express. I centred my design explorations on making the program fun and exciting, gamifying the shop, earn, and redemption experiences on PC Express. With this gamification approach in mind, I focused on several key steps in the customer journey for deeper design and UI exploration.

Gamification

Key Focus 1. Program Discovery

I first focused on places where we can introduce the Collect & Save program to customers who may be unfamiliar with it. To effectively surface the program, I identified touchpoints where we can capture customers' attention, highlight the program's benefits, and encourage opt-in, ultimately motivating customers to opt into the program.

Website Masthead

Showing a stamp component next to the existing PC Optimum one in the website's top navigation for convenient program discovery and opt-in.

PDP for reward items

Since the rewards are exclusively cookware, I explored adding a component to the Product Display Pages (PDPs) of reward items to highlight the program benefits and encourage participation.

My Account

Another opportunity to showcase the program is the PC Optimum page where customers might already be checking their loyalty program details & rewards.

Post Opt-in Onboarding

After the customer opts into the program, I explored ways that connect them seamlessly to start tracking their progress. These overlays highlight program details and point directly to where customers can check their stamp balance.

Key Focus 2. Progress Tracking

The second key area I focused on was communicating customers' ongoing progress with the Collect & Save program. I identified key areas within PC Express where customers naturally look for their stamp balance, ensuring progress towards rewards is shown at relevant points in their journey. I also explored ways to emphasize that rewards could be earned repeatedly to encourage continued participation and create a sense of accomplishment.

Website Masthead

For opted-in customers, the masthead component is now used to track their stamp balance. They can still click to view program details.

PDP for reward items

The component on PDP is now used to track the customer's progress toward redemption. Different copies are used at different stages to encourage participation.

Cart Page & Order Dashboard

As customers shop and earn, the stamps earned on each order should be shown on the cart page, the order dashboard page, and in the order history.

My Account

The components in My Account offer more details on the customer's progress in the program than just stamp balance. I explored ways to emphasize that rewards could be earned multiple times as long as the customers keep on earning.

Key Focus 3. Redemption

The third key focus was clearly notifying and guiding customers to redeem their rewards once they have sufficient stamps. Transparency and moments of delight were central to this stage. I aimed to highlight the number of stamps eligible for redemption and the tangible savings customers could enjoy with the program.

To further drive engagement, I explored ways that the customers can receive visual confirmation of the stamps redeemed and the savings achieved as a moment of delight, encouraging them to keep collecting stamps and return for future purchases.

Website Masthead

Once the customer has earned enough stamps, the icon in the masthead component will turn into a checkmark, subtle but delightful.

Cart page

We want to encourage redemption once customers have earned enough stamps so they can actualize the value. I explored ways to explain how redemption works and encourage redemption.

Redemption Confirmation

For a loyalty program, demonstrating value to customers is essential. I explored ways to highlight dollar-amount savings as a moment of delight and peace of mind for customers during the redemption experience.

Order History

After redemption is complete, customers should be able to see the number of stamps redeemed as well as any stamps earned.

Scope Refinement

Scope Prioritization & Feature Refinement

As much as we would love to ship every feature we had envisioned, we had to define an MVP that emphasized essential program functionalities. Following initial design explorations, I collaborated with product managers and tech leads to assess technical feasibility, determined realistic estimations for each feature, and prioritized core elements that would maintain a seamless experience.

Resource Management

Assessing Project Needs & Delegating Tasks for Success

Descoping designs doesn’t always mean reducing the amount of work—sometimes, it means expanding it. Originally, the opt-in experience was expected to leverage pre-existing designs from the PC Optimum team built with our Helios Design System. However, integrating this design posed significant technical challenges. Given the project’s strict timeline, I brought in a fellow designer, Dak, to help create a dedicated, native opt-in experience for PC Express.

Original Helios Opt-in experience from PC Optimum

Through this experience, I learned how to assess a project’s needs and recognize when additional support was necessary. When the scope of the opt-in experience changed completely, I realized I had to reach out to Dak for help. This allowed the team to quickly develop a new opt-in experience while staying on track for other tasks, demonstrating the importance of knowing when to delegate and trust others to ensure the project’s success.

Dak’s initial exploration for the native opt-in page

User Testing

Identifying Areas for Improvement Amid External Constraints

I conducted two rounds of tests for web and app experiences, engaging 5 participants for each platform. Testers responded very positively to the discovery, earning, and progress-tracking part of the journey. While some participants initially found the program details confusing, they gradually gained a clearer understanding through information presented at key points in the customer journey, beyond just the onboarding phase.

5 Web Testers

5 App Testers

All participants understood essential actions—how to earn and redeem stamps, where to check their progress, where to see reward items, and how to redeem their stamps. However, the redemption experience presented a consistent challenge for testers due to limitations imposed by dependencies on external systems. This feedback highlighted areas for improvement in future states, especially in streamlining the redemption journey to meet user expectations.

Key Research Finding #1

Some testers were unclear on how this program relates to or works with PC Optimum.

Based on this feedback, I made two design changes to clarify the relationship between the two programs and improve user comprehension from the start.

Collect & Save page

I decided to create a dedicated Collect & Save page in My Account for tracking stamps, which helps visually separate stamps from points and helps customers understand their differences.

Collect & Save on the PC Optimum page

VS.

Dedicated Collect & Save page

Clearer Messaging

I updated the wording on the Opt-in page to clarify how the two programs worked together, including clear instructions on the ability to earn digital stamps in-store.

Key Research Finding #2

Customers were extremely frustrated by the inability to see the discounted price reflected in their cart.

9 out of 10 test participants said they would not redeem their stamps on PC Express if they couldn't see the discounted price in cart. This lack of visibility led to confusion and dissatisfaction, as users wanted immediate feedback on the rewards they planned on redeeming. This also doesn’t align with common e-commerce expectations.

Always showing original price

VS.

Showing discounted prices for redemption items

Although these capabilities weren't feasible in the initial MVP, the research findings provided strong evidence that can be used to advocate for this capability in future iterations. This experience also reinforced my responsibility as a designer to advocate for the users, even if my advocacy doesn’t always lead to immediate change.

Logic Changes

Managing Redemption Logic Amid External Dependencies

The redemption experience faced some uncertainty well into the design process due to SWEDA, the external system for processing store orders. The challenge sounded simple: what happens when a customer adds multiple reward items to their cart but only has enough stamps for one?

Initially, SWEDA didn't build any logic for handling multiple redemption items. As a result, redemptions might be random or depend on which item was scanned first by store colleagues during fulfillment. Given the varying value of reward items, this would likely lead to customer dissatisfaction if their stamps were applied to a lower-value item.

Cart component for no redemption logic

To address this, the logic was updated to allow customers to select which item they wanted to redeem. Later, this approach evolved further to apply stamps to the highest-value item automatically, simplifying the process and reducing the burden on customers and store colleagues.

Cart component when we allowed customer selection

Each time SWEDA’s logic changed, I had to continuously revise the designs, making them flexible enough to accommodate new requirements while ensuring a smooth redemption experience. Reacting quickly to these changes was critical to delivering an experience that met both technical constraints and customer expectations.

MVP Designs

Delivering a Seamless Experience Under Tight Constraints

Despite scope changes and various limitations, the Collect & Save MVP delivered the core opt-in, earn, and redeem experience while setting the stage for future improvements.

Launch Day Challenges

Problem-Solving to Unblock App Customer Opt-In

As with any big project launch, issues and hiccups are inevitable. On launch day, the Learn More link on the PC Express mobile app collection page for reward cookware failed to work, preventing customers from opting into the program via the app. With product managers on vacation, I quickly stepped in to triage and resolve the problem. Recognizing that a last-minute app code change was not feasible, I explored creative alternatives using Contentful, our CMS.

The “Learn more” link that failed to work

Despite my limited experience working with Contentful or the merch team, I collaborated closely with them to understand system constraints and tested potential fixes. Ultimately, we redirected customers to the PCO app for opt-in, prioritizing functionality over perfection. While this workaround compromised the seamless experience, it successfully unblocked customer opt-in, the most critical piece during the early stage of the program.

Results

Measuring the success of the program

Despite the project challenges and scope limitations, the Collect & Save program has delivered impressive results. One of the primary business objectives for the enterprise was to increase the average order value and the results so far have certainly achieved this goal.

As of November 20, 2024

Program Level Metrics

3.7%

growth in enterprise-wide average order value*

*Launch week compared to 2024 baseline week

Over

1.5M

digital opt-ins at a

26.7%

opt-in rate

19.2M

digital stamps issued

15.3M

digital stamps redeemed

15.3M

in cookware sales

Specific Metrics

Over

187K

digital opt-ins at a

16%

opt-in rate

Session to Purchase Conversions is

8.32%

higher

for customers who opted-in to the program than those who did not

Lessons Learned

Adapting to Constraints & Strengthening Collaborations

Embrace Strict Constraints and Limitations

Advocating for the user is at the core of my role as a designer, but in fast-paced projects, it's equally important to embrace constraints out of our control. Simplifying and descoping part of the experience allowed us to meet firm deadlines while prioritizing core functionalities like opt-in and redemption. Working with external dependencies like SWEDA highlighted the importance of adaptable and flexible design to address ambiguity and constraints effectively.

Engage Production Teams Early

For a project that is centred around a specific set of reward items, it's essential to understand how the merch and production team are planning to present them. Throughout this project, the collection page of reward cookware items was largely a mystery to me. However, engaging business and production teams earlier to review, understand, and test the experiences they're building could have prevented many of the launch day challenges we had.

Clarify Ownerships and Manage Team Changes Early

The team transitioned from a "bullpen" model to a development "pod" model during this project which caused some collaboration issues but also presented opportunities to rethink how cross-functional teams collaborate. Splitting responsibilities across pods revealed the importance of setting clear communication channels and ownership. Next time, I would advocate for clearer cross-team collaboration guidelines, engage stakeholders onboarding to the project early, and create a unified process for addressing cross-platform development needs during reorganization.

Future Opportunities

Prioritizing Enhancements for the Next Iteration

Descoped features from the initial MVP aren't gone forever; it’s an opportunity to revisit and refine ideas when the time is right. After gathering customer feedback and tracking the program’s performance—here are the three main opportunities to enhance the Collect & Save program if it returns.

Show Discounted Prices in the Cart

Displaying the discounted price post-redemption aligns with e-commerce norms, encouraging redemption, reducing confusion, and building trust.

Display Redemption Confirmations

Highlighting dollar-amount savings and actual value for customers when they place an order that redeems their stamps creates a moment of delight and encourages ongoing participation.

Bringing Back the Onboarding Widget

A simple post-opt-in widget that not only highlights key program details but also points customers to where they can find their stamp balance can improve understanding from the start and link different parts of the journey.

Enhanced Opt-in Page

Showcasing reward items directly on the opt-in page can highlight the program's value early and help drive opt-ins. After customers opt-in, this page could also transition into a program overview page, reinforcing program benefits and rules,and encouraging continued engagement.