In-app coupon views tripled... customers became more aware of bonus offers and conversion increased 18%, significantly reducing the loyalty program's cost to the business.

7-Eleven Offer Architecture

When I started working at 7-Eleven, the coupons and promotions lived in four different places on the app. As my first major project at 7-Eleven, I redesigned the architecture and UI of the Deals section of the 7-Eleven app to solve for navigation, suggestive selling, and product categorization. I lead design thinking activities, designed from conception to handoff, and worked with a variety of stakeholders from Merchandising to Marketing.

As a result of my work, in-app coupon views tripled. The percentage of customers who purchased after viewing a coupon went from 30% to 48%.
Customer problems:
7-Eleven app users were presented with multiple confusing terms for saving money: “Deals”, “Coupons”, and “Bonus Offers”
  • ​“Deals” and “Bonus Offers” both lived in the bottom nav, and users didn’t know which to tap
  • When users tapped “Deals”, they were presented with promotions and sweepstakes rather than coupons, which is what they expected. They had to tap further to actually view coupons.
The list of bonus offers and coupons was too long and required a lot of scrolling. In Bonus Offers alone, there were close to 50 offers, and the merchandise team was planning to roll out many more. I was tasked with figuring out how users could navigate a large number of offers.

Business problems:Merchandise wanted to get vendors like Pepsi to sponsor Bonus Offers. However customers did not understand what bonus offers were and would more often tap “Deals”. Getting more customers to use Bonus Offers would allow 7-Eleven’s loyalty program to have greater funding from vendors, off-setting the cost to 7-Eleven.

When I started working at 7-Eleven, the coupons and promotions lived in four different places on the app:
One of the first things that was asked of me was to re-architect the way deals of all types lived in the app. Previously, some card-sorting research had been done that showed how 7-Eleven customers thought various types of products would be categorized: as drinks, hot foods, candy, etc. Other than that I was starting with a blank slate.

My starting approach was two-fold: 
  1. I worked with the 7-Eleven loyalty researcher to test the various deal nomenclature used throughout the app: Coupons, Promotions, Deals, Bonus Offers, etc.
  2. I began exploring design patterns and architectures that could accommodate the large number of planned deals. ​
Since these were the early days of the UX team, I was working without a Sketch license and ended up printing versions of the layout out and taking them to the cafeteria to get reactions from colleagues outside of the Digital department.

In the meantime I learned from research that customers:
  • Were most enticed by the terms “Deals” or “Coupons”
  • Had no idea what a “Bonus Offer” was
  • Didn’t care about “Promotions”

With this information in mind I created an experience flow for the new, consolidated “Deals” section:

​
And then started on some further low fidelity wireframes:
It was at this point I reviewed work with Product and Development teams who placed several features on-hold, including search and sort/filter. The basic architecture, which consisted of category tiles leading to list views, remained, and would be accommodating to new features later on.

A round of usability testing showed me that I was on the right track with the categorization. Some tweaking of category names and logic happened over a several week discussion between Merchandise, Product, and UX teams. 

Additional business opportunities presented themselves: 7-Eleven built an AI/Machine Learning team whose first task was to engineer a recommendations engine. Increasing the fidelity of my wireframes and incorporating the recommendation section led to my next iteration:

​
​At this point UX and Product decided that the first release was ready for development. Using research and rapid low fidelity prototyping I was able to solve the customer and business problems in these ways:

Customer problems:
  • I cleared up the confusion about “Bonus Points”, “Coupons”, etc by consolidating everything into one navigation item “Deals.” Customers did not see enough difference between these types of offers to warrant separating them. This also freed up additional space on the nav bar that we could use later on--I’m big on leaving myself room to add things later. Metrics told us that in-app coupon views tripled.
  • By separating deals into categories based on customer card-sorting exercises, we allowed users to browse faster and find relevant deals easier. The addition of a “smart” recommendation section top-and-center added further convenience.
Business problems:
By incorporating Bonus Offers and coupons in the same architecture, customers became more aware of bonus offers and conversion increased 18%, significantly reducing the loyalty program’s cost to the business.
© 2020 Raymond Weilacher