Meijer Coupons
How can we improve customer loyalty by helping them save?
Scope: Redesign native and web Coupons experience
Tools: Figma
Duration: 9 months
Partners: UX researcher, Acres lead designer, L&E Lead Designer, Program Designer, Product Owner, Scrum team (Scrum Master, QA, and engineers)
My Role: Scrum designer taking program handoff to production
The L&E program designer handed off program level designs, and from then on, I owned the final UI and UX decisions, carrying the work to production.
Made the calls on questions program design left open
Worked with iOS, Android, and web engineers through build testing and launch
Aligned with Meijer's enterprise design system (Acres) lead and lead L&E designer to pioneer broader Meijer design pattern changes
The Problem
Shoppers struggle to find relevant coupons because the default coupons page is overwhelming, and the tools to filter through are overlooked.
Amidst a platform change to a new CMS with a new one month deadline with an impending code freeze.
The Solution
The Impact
The 40.6% lift in HPO customer engagement tracked closely to the rollout timeline, representing a real shift toward more personalized, relevant engagement, not just more activity. Overall clip volume per user kept declining, a trend that predates this redesign and reflects a broader shift in shopping behavior, not something the redesign caused or failed to fix. Rather than getting "more clicks," shoppers had improved engagement with products that mattered more to them.
Initial rollouts have been released but measurement is still ongoing.
How can we bring personalized savings out of hiding?
Remembering the problem…
It's overwhelming for shoppers to dig through hundreds of coupons to find what's actually relevant to them.
Categories existed, but shoppers had to manually toggle on the category header view, so many never knew it was there.
More than half* of interview participants scrolled the list by default relevance order, and only 22% of real users clicked on the 'Sort By' dropdown. The default path meant wading through 300-500 coupons just to fill a 125-coupon clip limit.
"It's pretty overwhelming, and it feels kind of random"
"I look until I get bored […] I will run into 10 in a row that I'm not interested in, then I'm done."
Meijer already had "Just For You" offers, high-value coupons personalized to purchase history, but they were hidden in a "Special Offers" carousel at the very bottom of the home screen, then buried in the full coupons list.
Aesthetically and functionally, the coupons list was long, dreary, and monotonous, and clipped coupons sat in a tab besides available ones, making it easy to overlook and finding value a chore.
*5 of 9 interview participants did not apply any category filtering or sorting options when looking at their coupons list, sticking with the default sort option (Relevance) for all categories.
22% of real Meijer users in a 30 day range, measured in FullStory
1 in 3 participants selected their "Just For You" category right away
1 in 3 IDI participants described the coupons list as overwhelming
Although my program designer was not yet given the go ahead from business to officially hand off her designs, I was approved to start my own exploration. I regularly partnered with Leah, our dedicated L&E UX researcher, throughout the design process.
I wondered… what is going on in accounts? Subscriptions? How could we update the look, make space for RMN ads, and keep it from looking too busy?
Although my program designer was not yet given the go ahead from business to officially hand off her designs, I was approved to start my own exploration. I regularly partnered with Leah, our dedicated L&E UX researcher, throughout the design process. One of the explored changes to the coupons experience was to add a floating action button for the clipped coupons.
Upon completing usability and preference testing, results showed a large preference towards the static button.*
*In unmoderated user testing and preference testing, 33% of 102 UserZoom panelists preferred the static button on web, and 38% in mobile, winning against the FAB (a close second at 23% web / 28% mobile), Carousel, and Tab designs (~16%). Clipped coupons in a tab performing poorly validated our intentions to redesign this experience, confirming that Meijer was beyond function was the bare minimum. With the research data compounding against the new platform constraints, the static button was the clear winner. The current coupons experience was designed multiple years prior and hadn't been touched since its inception, a functional experience thrown together amidst the Covid online shopping rush.
Around this time, news came in that Meijer would be changing CMS. This came with new constraints that the design would need to be exactly the same across iOS, Android, and mobile web, and it meant that the initial platform-specific designs would no longer work. There would now be an impending code freeze at the start of the new year, and any new development had to be completed fast.
A tradeoff…
Our coupons team wanted to create a smooth in-context line search experience, but development was restricted to maintain the legacy search experience. I worked with the developers to design a UI change they could complete before the code freeze.
With the new expectation to handoff completed designs in one month, the product owner and I decided to first focus on prioritizing the new personalized offer experience, as this would be the biggest impact felt.
Bringing personalized savings out of hiding
Hand-Picked Offers are high-value coupons personalized to a shopper's purchase history, but these offers were buried at the bottom of the home page and then nestled in a long list of hundreds of coupons, making some of Meijer's most relevant savings easy to miss.
I redesigned the experience to make those offers easier to discover and browse, redesigning the carousel for the home and coupon pages with an updated HPO destination page. I also helped in defining banner styles, dimensions, and content requirements, and helped develop responsive coupon cards for the Acres design system to keep the experience accessible, fresh, and consistent.
The new Coupons experience is now live on Meijer.com and the native Meijer app. The Hand-Picked Offers experience is exclusively available to customers with a shopping history.
How shoppers now encounter their saving opportunities
Meijer shoppers with a shopping history now get an exclusive "Hand-Picked Offers" Carousel that appears at the top of their Coupons page at the beginning of every month. Users can also see this carousel pop up amidst their new Home grid. Choosing to "View All" leads the user to its destination page. Users can still see their full list of available coupons in the "All Coupons" section, with the ability to filter and select categories to hone in on what they want to spend their money on.
Once the user clips a coupon, the coupon card displays a clipping animation, a successful clip (or error state), and after a short delay, it transitions to the shop button, directing users to add items to their cart to actually get the most out of their savings. Hand-Picked Offers are a one time use coupon, so once they have been applied and used in a cart, the coupon card changes to a redeemed state, telling users that it's already been applied.
Designing Hand-Picked Offers with the larger system in mind
During this time, Meijer had been undergoing a design overhaul. With new marketing directives and home page design patterns being established, I worked closely with the home page lead designer and the head designer for Meijer's enterprise design system Acres, David M, to ensure consistency and harmony in the visual story. This was an exciting time, as I could feel my work starting to have a larger impact on the Meijer experience.
Design exploration around the Hand-Picked Offers banner
The HPO list page was designed for the coupon grid to mirror pre-existing PLP experiences for familiarity. In designing the HPO carousel and list page background banners, my largest concern was accessibility. How could we keep the fun and fresh Meijer flair without impeding readability? I established background banner styles that matched the new marketing direction with rules for the HPO context, to ensure the assets would be designed to meet WCAG contrast requirements, no matter the screen size.
Examples of the default background image and marketing handoff
Designing coupon cards for flexible layouts
David M and I used the existing mPerks rewards cards as a starting point, redesigning the borderless coupon layout as a contained card that could adapt to screen width, larger accessibility text sizes, and different placements. Working within the existing system helped maintain consistency, while the coupon card explorations also informed widespread updates to mPerks rewards and shopping product cards.
Giving the clipping action its own identity
The existing “Clip Coupon” button shared its styling with actions on shopping and mPerks rewards cards. We explored a distinct treatment to help shoppers distinguish coupon savings from points-based rewards and products. Following exploration and testing (click test and preference test), we selected a dashed-outline button. It balanced familiarity with differentiation: the dashed border evoked the cut lines of paper coupons while giving the clipping action a recognizable identity within Meijer’s broader design system.
The newly designed responsive coupon card in its 4 variable sizes. Now live on Meijer.com and in app.
Validating design with research
I regularly partnered with Leah, Loyalty and Engagement's dedicated UX Researcher, to help make data-driven decisions.
One of the explored changes was to add a floating action button for the clipped coupons. Because of the way the CMS development within Meijer was moving, we would need to design something that would consistently work across iOS, Android, and mobile/desktop web. Leah conducted usability and preference testing on a few different designs, specifically highlighting the clipped coupons in a carousel, FAB, tabbed (already existing experience), where results showed a clear user preference towards a static button. Interestingly, the clipped coupons sitting in a tab performed very poorly, which only backed up our intentions towards redesigning this experience.
✍🏻
Move forward with a static "Clipped Coupons" button.
I moved forward with more design iteration that involved a static button in the coupons page banner. We followed up this study with unmoderated user testing to validate the new design changes.
I later looped in our UX team's dedicated illustrator to help create new illustrations to augment the new modernized experience.
Preserving the design through development
I partnered closely with developers to refine the responsive coupon cards in both grid and list layouts. Through regular build testing on web and physical iOS and Android devices, I checked how the new designs adapted across breakpoints and larger accessibility text sizes.
Because this responsive behavior was new, we iterated together to resolve issues as they surfaced. One implementation challenge was rendering the dashed-outline button and its interaction states on web. Chuong and I worked through potential approaches in extended working sessions, including an image-based treatment. The web implementation wasn’t ready for the alpha launch, so we shipped all three platforms with the existing blue buttons rather than the intended dashed-outline treatment. The coupons team had to redevelop the new coupons work for the new CMS, and by this time, they were able to figure out the dashed-outline border. This highlighted the need to validate unfamiliar component treatments with engineering earlier, including how they would behave across interaction states.
Reflections
What the project taught me
The timeline was compressed further by Meijer’s move to a new CMS, so speed forced real tradeoffs. With iOS, Android, and web developers all needing to finish the same work in sync, an ambitious idea that only one platform could build in time wasn’t realistic, and I learned to trade the ideal design for the one that could ship. I started bringing developers into the process earlier and checking in regularly with them and our product owner, who advocated hard for the team to put out our best work. Even through the constraints, we built real trust in each other. Engineering is a design partner, not just a handoff step.
A tradeoff I'd love to revisit
The tradeoff I’d revisit is wayfinding. The program designer had designed adding categories to the coupons page, but we didn’t yet know which categories were in use, which blocked progress for a while. In the meantime, I explored beyond a static category section and into a wayfinding carousel that would sync users vertical scrolling with a horizontal navigation. I brought developers into the conversation to check feasibility, and iOS confirmed it was doable, but with three platforms that had to ship in sync, it wasn’t enough on its own. David M and I also discussed bringing the pattern to the wider shopping experience, not just coupons. Between shifting priorities and a multi-month code freeze, it was set aside for a later iteration. It was the right call for the deadline, but I’d go back to it first. Browsing by category is where I believe the next gains are in helping shoppers feel more in control of their coupon clipping, and I wish I’d taken it past exploration.
Next measures and tests
I was partway through designing additional personalized and partner carousels with our product owner when my contract ended, so this is where I’d pick up. He already had a clear sense of what to build first and was a strong advocate for the work, so we were aligned on direction. I’d test whether the new carousels increase redemptions, not just clips, comparing engagement per carousel, clip-to-redemption rate, and scroll depth so they aren’t buried. I’d partner with our UX researcher to understand why users favor certain carousels, and with developers to confirm what we could track across iOS, Android, and web.
