7-Eleven · Mobile product design
One App: making several services feel like one product.
The winning entry in an internal design competition across 7-Eleven UX teams, with the alternatives and interaction decisions behind it.
- My role
- UX Product Design Lead · R&D Innovation Lab
- Period
- Jan 2019 – Sep 2019
- Designed for
- Mobile retail customers
AI leadership noteTest competing concepts against the same trips
Original approach
Explored several navigation directions for the internal One App design competition: a circular service selector, an Earth-themed treatment, sliding panels and a service home with green navigation and blue actions.
What could change today
Give each concept the same customer missions: redeem a reward, start a fuel purchase and recover from a checkout error. Have an agent draft test cases from those missions, then observe people using the prototypes.
Workflow excerpt. The numbered steps show the same part of the journey in each version. The full project includes work beyond this comparison.
Original workflow
- Choose a service
- Understand the task
- Take the action
- Review or recover
Proposed workflow with AI
- Choose a service from suggested and browsable options.
- Review the task, location and required details.
- Confirm the action against the chosen service.
- Check the outcome and offer recovery if it fails.
How to test the change
Verify reach, gesture conflicts and recovery on current phones. Use task completion and observed failures to choose a direction.
01 / Customer & problem
The need behind the work.
Who needed this.
Customers need to reach fuel, rewards, delivery and checkout without learning a separate navigation model for every service.
The problem to solve.
Fuel, rewards, delivery and mobile checkout solve different customer needs. Bringing them into one app creates a navigation problem: the customer needs to find the right service without losing account or rewards context.
Give the services a shared home and make each next action understandable, from selecting a service to scanning an item or finding the rewards barcode.
02 / My ownership
Responsibilities.
Created the design directions and winning competition entry at 7-Eleven. The competition result is distinct from the R&D lab’s cashierless-store prototype.
The constraint to work through.
The shared service home must remain easy to scan while individual tasks need focus. Navigation ideas also have to survive changes in device hardware.
- Choose a service
- Understand the task
- Take the action
- Review or recover
03 / Actions & delivery
How the work came together.
Explored several navigation directions for the internal One App design competition: a circular service selector, an Earth-themed treatment, sliding panels and a service home with green navigation and blue actions.
The winning direction uses the green bottom navigation and blue action treatment. The work includes home, service introductions, account access, scan-and-checkout, rewards and network recovery.
The explorations also exposed a hardware dependency in the circular interaction as iPhone navigation moved away from the physical Home button. Reviewing the alternatives together makes that tradeoff visible.
04 / Decisions & judgment
What carries through the design.
Keep service choice understandable.
The shared home introduces distinct services while rewards progress stays visible. Individual task screens then focus on the action being taken.
Separate alternatives from the final direction.
The circular, Earth and sliding-panel concepts are design explorations. The selected blue-action, green-navigation family carries the competition result.
Design beyond the ideal path.
Scanning fallback, account access and network recovery are part of the experience. A service chooser alone would leave the customer journey incomplete.
The experience in detail
The winning direction: one home for everyday services.
The selected competition design gives fuel, deals, delivery and checkout a shared home. Blue actions and a green bottom navigation connect the different tasks.
01 / Enter
A recognizable launch state introduces the app.
02 / Choose a service
The home view brings services and rewards progress together.
03 / Start checkout
A focused introduction explains the mobile-checkout task.
04 / Scan and review
A barcode scanner and basket keep product and price in context.
Related interaction states
Different tasks, a common navigation model.
Fuel, delivery and rewards are branches from the same home, rather than sequential steps in a purchase.
Fuel
Explain the pay-at-pump proposition.
Delivery
Connect the customer to a delivery task.
Rewards
Keep the rewards barcode accessible.
Recovery
Provide an explicit retry path when the network fails.
Related interaction states
Explore the navigation before committing to it.
The alternatives test different ways to move between retail services: a circular selector, an illustrated Earth theme and sliding service panels.
Circular selector
A service wheel explores direct movement between tasks.
Earth theme
A consistent scene connects the service destinations.
Sliding panels
Layered panels explore a more explicit service menu.
The circular concept exposed a hardware dependency as iPhone navigation changed from a physical Home button. The winning direction used the blue-action, green-navigation treatment shown above.
05 / Results & business value
What changed through the work.
My design won the internal competition across 7-Eleven UX teams. The selected direction connects multiple retail services through a shared home, consistent navigation and task-specific screens.
Why it matters.
The selected direction resolves service discovery within a shared mobile structure, while the competing explorations make the navigation and platform tradeoffs visible.
06 / Reflection
Lessons for future projects.
The circular exploration reinforced a concrete design lesson: validate an interaction against platform navigation and hardware changes before making it foundational.
Let’s talk about your next chapter.
Exploring Senior Director, Head of Design and VP opportunities.