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 ArchitectureWhen 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”
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:
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.
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:
My starting approach was two-fold:
- I worked with the 7-Eleven loyalty researcher to test the various deal nomenclature used throughout the app: Coupons, Promotions, Deals, Bonus Offers, etc.
- 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:
With this information in mind I created an experience flow for the new, consolidated “Deals” section:
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:
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:
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. |