Savings you can see —
no surprises
UI / UX Design / E2E Strategic Thinking / Journey Mapping / User Testing
Product Designer
Overview
Inflation is reshaping how people shop.
As prices rise and budgets remain tight, customers are becoming more intentional with their spending. They're using more coupons, focusing on weekly promotions, choosing sale items, switching to store brands, skipping non-essentials, and adjusting meal plans based on what’s affordable—often opting for less expensive proteins.
While inflation affects everyone, it hits hardest for customers who are already stretching their budgets. For these shoppers, staying within budget is critical. If they reach checkout and find they’ve gone over, they may be forced to remove items from their cart.
This behavior has real business impact. By making it easier for customers to save and stay on budget, we not only help them meet their needs—we also build trust, increase loyalty, and improve the likelihood they’ll choose us for their next shopping trip.
The Ask
Create a solution that increases customer trust by providing price transparency throughout the shopping journey—so there are no surprises at checkout. Ensure customers can confidently stay within budget, reducing the need to remove items from their cart due to unexpected costs.
The Question
How might we surface this information throughout the shopping journey without being too distracting?
The Goal
Make it easy to keep track of cost, fees, and savings throughout the shopping experience.
Discovery
How might we help customers stick to their budget?
At the start of this effort, the problem wasn’t clearly defined. We needed to conduct discovery work to uncover the core problem, identify its root causes, and gain a deeper understanding of the motivations and behaviors of budget-conscious shoppers.
The team used a LUMA technique called “Abstraction Laddering” to agree on a problem statement and begin to discover what might be the root causes of that problem.
Once the team agreed on a problem, we moved into storyboarding to empathize with the user and discover how they might be feeling along each step of the shopping experience.
Journey Mapping
At what points in the shopping journey does the customer need visibility into their running total?
After aligning on the problem and gaining a clear understanding of user motivations, we shifted focus to evaluating the overall shopping journey. Our goal was to identify the most impactful moments to introduce running total transparency. To do this, we created journey maps for two distinct user groups: those who shop first and save later, and those who save first and shop accordingly.
Journey Map for the Native platform where shoppers tend to save first and shop later
Journey Map for the Web platform where shoppers tend to shop first and save later
Designing Solutions
What if this experience functioned as a drawer—always accessible exactly when and where customers need it?
With alignment in place, we began by conducting a competitive audit and collaboratively sketching early concepts to explore potential directions for the experience.
We conducted a competitive audit by collecting and analyzing screens from similar experiences. This helped us identify common patterns, uncover best practices, and spot opportunities to differentiate our solution.
We held a sketching session using the “Crazy 8s” method—an exercise where each participant has one minute to sketch a screen in a user flow, repeating the process eight times to quickly generate and refine ideas toward a viable experience.
Design Prototypes to Test
Putting our designs to the test with real shoppers.
We created three experience prototypes and a discussion guide to conduct user testing sessions, where shoppers were asked to complete key tasks and share their feedback.
Concept 1: Cart Total on Icon
The simplest design in which the total for the cart simply appears below the usual cart icon.
Concept 2: Quick Cart
A cart total drawer that slides up for a user to reference when and where they need it.
Concept 3: Savings Center & Alert
This design leverages the existing savings center of Kroger’s app to show current order pricing information and alert the customer if they have coupons that can be clipped for extra savings. This design showcases both the total for the order and the amount saved.
User Testing
“My confidence would be 1000x better becaues they show me the cart total.”
Here’s what real users had to say about each of our concepts.
Recommendations based on Findings
What’s next for this project?
After gathering user feedback, we ranked the concepts and identified key areas for further discovery and unanswered questions. Ultimately, we presented our recommendations to the business to help prioritize future work.
Team
Angelene Langeslay, Product Designer
Nicola Cimino, Senior Product Designer
Mitch Reiber, Product Manager
Karen Hatfield, User Research
What I Learned
How to tackle End to End design opportunities
Working on an end-to-end design problem helped me see how every part of the user journey fits together. I learned to balance user needs with business goals while iterating quickly based on real feedback. Collaborating across teams improved my communication and problem-solving skills.
I also got better at breaking down complex challenges, designing scalable solutions, and maintaining consistency to build trust. Most importantly, it strengthened my empathy and focus on creating meaningful, user-centered experiences.