PERKS Rewards Experience
UX / UI Design
Client: Macey's Grocery Store
Programs used: Procreate, Figma, Adobe Illustrator & Photoshop
the Goal: Streamline the existing customer rewards experience across the grocery store's website and app.
Project Research & Discovery
Identifying the Pain Points
At the start of the project, I consulted with the Rewards Program manager and other stakeholders to better understand the structure of the program and project limitations. As a team, we identified current pain points within the existing app and website experience by analyzing customer feedback.
The main issue for users was lack of clarity on how the program worked. Rewards points accrued differently depending on whether customers were enrolled in the Grocery Rewards program or Fuel Rewards program. Points would reset monthly if users were enrolled in the Grocery program, whereas points earned through the Fuel Rewards program would carry through to the next month. Users needed more effective communication as well as the opportunity to switch between Grocery and Fuel programs as desired.
Pain Point 1:
Users express confusion over how point accrual works.
Pain Point 2:
Users need the ability to switch between Grocery Rewards and Fuel Rewards.
Pain Point 3:
Rewards program branding is inconsistent across the app and website experiences.
Pain Point 4:
Seldom-used features add clutter to the app interface.
I was tasked with a review of the existing app experience and identifying possible ways Pain Points 1-3 might be addressed in the redesign (Pain Point 4 would be addressed by removing app features entirely).
I turned my attention to creating a distinction between Grocery and Fuel Rewards and the ability to switch between the two programs.
App User Flow
Project Hurdle:
Limited resources and a quick deadline.
This would have been a great opportunity to conduct user testing. There would have been richer insights from observing user action directly, noting differences between how customers utilize the app when shopping for groceries vs. while fueling their car. Those observations could then be analyzed through a customer journey map.
For this design cycle, however, I created an immediate solution for the four client pain points.
Design Process
Design System Updates
The design relied upon creating two separate interfaces for Grocery Rewards and Fuel Rewards. I used color to differentiate these two experiences. I gave the existing app a few updated style guidelines with reusable components for consistency and quick editing.
Two Interfaces
The user's account defaulted to the Grocery Rewards program interface upon account creation. The user saw one of the banners below depending on their PERKS enrollment:
User will get the Grocery PERKS Experience.
User has switched to the Fuel PERKS Experience.
The user also saw a different Rewards banner with a progress indicator depending on their program.
Switching Between Interfaces
The key to switching from the Grocery PERKS Rewards program to Fuel PERKS happened when the user tapped "Switch to Fuel PERKS". An informational screen appeared, giving the user a chance to learn about differences in the program and decide whether or not they wanted to stay enrolled in the Grocery program or to switch their enrollment to Fuel.
Streamlining the Experience
After finalizing the app design, I was able to reuse elements and rework the desktop experience to match the app.
Outcomes
Current Status: the app and desktop experiences are in development.
This quick redesign created differentiation between two distinct sections of the program: Fuel Rewards and Grocery Rewards.
Refreshed UI and with less clutter from features made notable improvements to the existing app, and rebranding the web interface to match the new app design helped streamline the overall experience.
