Meijer Coupons
How can we improve customer loyalty by helping them save?
Duration: approximately 6 months
The 40.6% increase in HPO engagement year-over-year per-customer lift tracked closely with the rollout timeline. Overall clip volume per user kept declining, a trend that predates this work, so the gain is more relevant engagement, not more clicking. (FullStory)
Hand-Picked Offers (HPO) are personalized coupons based on purchase history. The redesign moved them from a carousel buried at the bottom of the home screen to the top of the coupons page and the home page, with a “View All” page behind them.
Early program designs established an ambitious direction for the Coupons experience. I built on that foundation and explored additional ways to improve navigation, discovery, and personalization and partnered with UX research to validate key decisions. As requirements rapidly evolved, the product owner and I narrowed the scope to an MVP that prioritized the core discovery and clipping improvements, balancing shopper value with delivery constraints.
I started with the coupons banner because the page needed a place to land, and it was a quick win. I mirrored the bento-style layout of the mPerks (Meijer's rewards points system) dashboard refresh I had prevously designed and shipped, so coupons and mPerks would read as one connected savings experience.
Next came the responsive coupon card, which I handed off with the Hand-Picked Offers carousel. David M led the design for the responsive grid behavior, while I drilled down to how they would actually work in context. I defined rules for the HPO carousel and list page background images so every asset would meet WCAG AA contrast ratios and overlap prevention requirements at any screen size, without flattening Meijer's playful marketing direction.
Once the clipped button research came back, I delivered the All Coupons grid and list together with the clipped coupons designs for native and web, reusing the new responsive grid completed for the HPO list page. Sequencing the components into smaller handoffs allowed engineering to build while the remaining designs were refined.
The bento style later showed up in accounts, shopping, and the new home page designs, improving harmony across experiences.
How can we get shoppers to their clipped coupons in one tap, especially while standing in line in-store?
How can we help users keep track of how many coupons they're clipping so they're not surprised when they hit their limit?
In preference testing, the static button won with 33% on web and 38% on mobile. The FAB proposed in program design came second (23% and 28%), and the carousel and tab trailed at about 16%. With the data and the one-design-for-three-platforms constraint pointing the same way, I put the button in the banner and pinned it to the top nav so it'd be readily available, even while scrolling. I reused the cart’s count badge so shoppers could track how many coupons they’ve clipped.
Meijer’s product and mPerks cards had moved on to newer components, but the coupon still had an outdated borderless layout, making it due for an update. David M, the lead designer of Meijer’s Acres design system, led most of the redesign. He started from the existing mPerks rewards card and rebuilt the coupon as a contained, responsive card in four sizes (small and large, horizontal and vertical).
My job was to make sure it worked everywhere. As the scrum designer working closely with developers, I thought through the details a static design file could hide, advocated for the context states, and helped refine the rules for how the card is used and built, such as:
Which card goes in a carousel, and how do cards look side by side when their content varies?
What happens when text runs long and has to truncate?
What happens when one card has tags and its neighbor doesn’t?
Does it hold up at the largest accessibility text sizes?
What do users see when something goes wrong and they hit an error?
The responsive behavior David designed informed updates to mPerks rewards and shopping product cards, and the card kept evolving through small iterations after its initial MVP build.
The newly designed responsive coupon card in its 4 variable sizes.
The “Clip Coupon” button shared its styling with shopping and rewards actions. We explored a distinct treatment to help shoppers differentiate coupon savings from points-based rewards and the "shop" action. Following click and preference testing, we selected a dashed outline. It evoked the cut lines of paper coupons and extended an existing pattern used on product cards with coupon offers, giving clipping a recognizable identity within the broader design system.
The dashed treatment required additional implementation work to support responsive layouts and interaction states on web. I partnered with engineering to explore alternatives and advocated for retaining the direction, drawing on the research and its consistency with existing coupon patterns.
For the initial release, we kept the existing blue button to maintain consistency across iOS, Android, and web while the technical constraints were resolved. The dashed-outline treatment shipped in a subsequent update and is now live.
Reflections
What the project taught me
The compressed timeline meant speed that 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 "perfect" 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 strong design partner, not just who I hand off designs to.
What I'd evaluate next
If continuing this work, I would evaluate whether personalized-offer discovery improves redemption, not just clipping, using engagement, clip-to-redemption rate, and discoverability measures.