The final screen of the Wallet.
About the project:
This was a new Wallet feature for the existing 7-Eleven app. We wanted to encourage
7-Eleven customers to download the 7-Eleven app,
add money to their wallet, and increase adoption and engagement.
Goal: Design and build a new digital wallet feature in the existing 7-Eleven iOS and Android app.
Role: Lead Designer - responsible for visual design, information architecture, interaction design, user testing, UX writing
Why did we do this project?
Business Opportunity: Usage of the Wallet would increase loyalty members,
decrease credit card fees, and operational costs related to handling cash.
Customer Problem: After the project began we found ourselves in a pandemic.
Contactless methods of payment were in demand, and the Wallet would offer this.
Also, 60% of our customers used cash only and preliminary research told us that many cash-only customers wanted to participate in the growing digital payment ecosystem,
but did not have credit cards or bank accounts. Wallet would let those customers load cash and then pay digitally.
Longer term goals were to open up more digital payment servicies to these cash customers.
From "7-Eleven answers pandemic payment concerns with mobile wallet", American Banker, Dec 2020
Process
I followed this standard user centered design process.
Empathize
Reviewed generative research done by an outside firm
Define
Synced with Product on business goals,
roadmap, user needs
Ideate
Created task flows, information
architecture,low-fi wireframes
Prototype
Created hi-fi mockups
and clickable prototypes
Evaluate
Worked with Researcher
on research plans
Iterated designs based on feedback
Rinse and Repeat
Repeat the process as needed as new information arises!
Design Foundations
After product, engineering, and I discussed the project goals and features roadmap for our MVP,
I started creating task flows, IA maps, and low fidelity wireframes to get sign off with leadership.
Task flows and low-fi wireframes
Aligning Across App and Store Systems
Research questions:
How does the Wallet work with store associates and store systems?
Method:
Contextual testing in corporate store with team members and store associates to see the current store associate experience.
Results:
The store systems designer and I suggested changes to align on terminology, reduce number of steps, and increase security.
Details:
During the Wallet design process the store systems were being redesigned.
The store systems lead designer and I collaborated so we could both learn about each other's areas.
I created a current state and future state map to show the process of loading cash and paying for items,
from the store system and the app view.
This helped us see the entire process from both sides in order to spot opportunities for how to improve
the current and future versions of our designs.
Current and Future states of the store systems and the customer app screens.
Design Explorations: Select Funding
During onboarding, the customer has to select what funding method to use for their
Wallet. This went through some iterations based on the insights from user interviews and stakeholders.
We used overlays, app store notes, and coachmarks to teach users that their 7-Rewards loyalty points were now located in the Wallet.
Users' Mental Model of Wallet Was Like a Physical Wallet
The User Researcher and I planned some remote user testing using UserTesting of some early designs.
During this we learned that customers’ mental model of wallet was the place that held their money,
7Rewards points, coupons, and rebates, like a physical wallet.
So as a result, we moved 7Rewards loyalty points into the Wallet hub.
Design Explorations: Auto Reload
Here are some examples of high-fidelity wireframes in setting up the Auto Reload option.
I was happy to get the opportunity at some UX writing here.
I tried different messaging to try to encourage customers to set up their
Auto Reload after they’ve set up their wallet.
Auto reload explorations and examples of written copy.
Confusion Over Funding Method
Research goal: Conduct usability testing during our soft launch
Method: Live app on team members' OS and Android phones
Results: Confusion on what payment method was used to fund wallet: User didn't notice funding method dropdown at the bottom of the screen while reloading their Wallet.
Design Changes: I moved the task of selecting the funding method to the first step, on its own screen. Then I added the selected funding method to the top of the next screen to make it more prominent. These changes tested well with users.
Before and After: Select funding method flow.
The Outcome
The 7-Eleven Wallet had its nationwide launch on November 9, 2020. It was deemed a success by stakeholders.
We surpassed our goal for the amount of money loaded to the wallet, and also increased new app users (76% of those Wallet users were new to the app).
Screenshot of the 7-Eleven website announcing the new Wallet.