Meijer is a super center retail chain in the midwest. They approached our company, Razorfish to lead the design effort in seamlessly transitioning their credit card customers over to a new bank.
My team's focus was on their "rewards" module, which allowed customers to easily locate their credit card points and track progress towards their spending goals.
Create an experience that will allow shoppers to quickly and easily access their credit card rewards on the new website
My role was to research competitors for inspiration and to ideate the look and behavior of the rewards module using sketches & wireframes. I also helped to document the interaction design behavior and functionality for our development team.
The old rewards module needed to be redesigned and optimized for the right rail on Citibank's website. To accomplish this, we needed to figure out how to best optimize the content to fit into our new, modular, Razorfish framework.
Who are our users?
Understand the different use cases and identify alternative methods for messaging our users depending on how rewards are issued and redeemed.
Some of our users recieved their rewards digitally while others received them in the mail. We needed to design for both of these use cases while also incentivizing shoppers to use their cards when in the store. This raised a few questions:
We audited similar client brands where we had built existing documentation around rewards.
L.L. Bean used interaction design and copy that we could use for our Meijer rewards module. We were able to leverage some of this documentation in order to minimize the level of effort and cost in order remain within scope.
How might we redesign the rewards module for the new website within our existing framework?
We sought inspiration from other rewards systems used by popular apps such as Chase Bank, Starbucks, State Farm, and Soutwest Airlines. Each app used different types of data visualization to indicate progress towards an earning rewards.
The whiteboard helped our team think through the logic and scenarios of how the rewards module would work.
I collaborated with another designer to create some rough sketches and then refined them using InVision's Freehand tool.
To further refine our concepts, we used Sketch to create higher-fidelity wireframes to represent different design treatments. Ultimately, we decided that a single "arch" graph was the optimal solution for visualizing progress towards a goal.
High Fidelity Design
Surfacing the card "perks" was one of the asks from Citibank so we presented three different design options to our stakeholders. After some back and forth, we decided to go with the carousel (option 3).
Our MVP design was a tradeoff between being able to save real estate without having to sacrifice the most important information about rewards for our users. There were too many concerns around the length of the module, accessibility, responsive performance, & the level of effort required to support the perks section. Ultimately, it was removed and placed into the backlog. We also surfaced the T&C and FAQ links to be compliant with legal. A banner message and a tooltip were also used to communicate important information around rewards.
I wasn't around for the final launch of the Meijer Rewards Module but I learned a few valuable things along the way: