Grocery shopping made easy
KROGER
Improving the in-store and online grocery shopping experience.
OVERVIEW
Kroger's app poorly addressed customer needs due to a cluttered interface and lack of user experience.
I had an opportunity to solve customer needs by creating a user experience informed by customer needfinding.
The outcome helped customers save, easily find items in-store, and curate items through recommendations.
MY ROLE
Prototyping, UI/UX Design
User Research, User Testing
Visual Design, Wireframing
IN A NUTSHELL
RESEARCH
Initial research focused on customer needfinding through user surveys, interviews/tasks, journey mapping,
user personas, and a storyboard.
IDEATION
Research insights framed the app as a shopping companion. It needed to solve customer problems for both the in-store and in-app shopping experience.
OUTCOME
The outcome was an in-store and app experience that saved customers'
time and money through curated and customized coupons and shopping lists.
PIECING THE PUZZLE
DISCOVERY
At the outset of the project I lacked pre-existing insights so I created a survey, conducted user interviews, and created user journey maps in order to better understand customers' grocery shopping habits and grocery store app usage.
SURVEYS | INTERVIEWS
EARLY INSIGHTS FROM USERS
The surveys inquired about the grocery shopping experience, and grocery shopping apps usage.
I conducted in-person interviews and app tasks
to gain qualitative insights in order to test my assumptions on grocery shopping habits.
What is your "Job to Be Done"?
“Getting healthy, cheap food quickly”
“Get my stuff and get out”
“Getting the food I need"
What are your pain points?
“Can’t find an item…”
“Not knowing where items are”
“Inventory running out”
From in-person interviews
“Shopping apps have missing items”
“I downloaded it once but deleted it”
“Much easier to plan ahead for budget”
USER TASK JOURNEY MAPS
DISCOVERING APP PAIN POINTS
I proceeded to gather objective user data by conducting user tasks within the app. The results showed how users struggled to navigate the app and easily find items.
Find organic popcorn > locate the in-store aisle section for the item
Find a recipe > add all of the needed recipe items to cart > checkout
Making a list > adding eggs, milk, ginger to list
Find organic popcorn > locate the in-store aisle section for the item
“Suggested coupons would be nice”
“Do they even have recipes on here?”
“Difficult to find the aisle section”
User Tasks Gallery
SOURCE-OF-TRUTH JOURNEY MAP
CONVERGING THE INSIGHTS
The summary journey map compiles five user journey maps with user interview data. It helps identify similarities across user experiences.
"Source-of-Truth" Journey Map
Peeling back the layers
Grocery shoppers are inconvenienced when they realize they're running low on food and need to go to the store. If they shop online, they worry about an inaccurate representation of the store's stock.
No matter if they shop online, or in-store, it’s a frustrating and time consuming process to take home inventory of groceries, decide on recipes
or items to purchase, and budget accordingly.
“Suggested coupons would be nice”
Room for improvement
The different stages, touchpoints, and emotions
of customers helped identify opportunity areas.
It’s important to focus on the emotion and desired outcome first, then explore how to achieve that outcome within the local and broader context.
Some opportunities were improving the real-time inventory of stores, locating items in store, and curated shopping lists based on customer interests.
STORYBOARD | USER PERSONAS
SOLIDIFYING PERSONAS
With the user journey well defined, I created asimple storyboard and two user personas in order to have reference points as I moved towards ideation.
STORYBOARD
User journey maps can be incredibly detail orientated. It’s easy to get lost
in the weeds. I created a storyboard to remember the larger context a user’s journey fits within.
Customer storyboard
-
Customer needs groceries
-
Creates a list based on their stock
-
Seeks coupons based on their list
-
Navigates to the store
-
Navigates store based on list
-
Returns home with groceries
USER PERSONAS
The first user persona is a ‘Speedster’. They want to spend as little time as possible in the store. They view it as
a hassle and obstacle. They put in minimal effort while still achieving their grocery shopping goals.
The second user persona is called ‘Delightful’. They enjoy the grocery shopping experience and create detailed lists based on researched recipes. They will visit other stores in order to find their desired items.
Emotional States, User Personas, Storyboard
REDEFINING | IDEAS
REFRAMING THE PROBLEM
After synthesizing data from the needfinding process, I redefined the problem to help the 'Speedster' and 'Delightful' personas.
REDEFINING
A deeper understanding
Users faced bigger issues than poor interface design. Among other things, customers need a shopping companion to remedy the pain of list and coupon gathering, as well as navigating the store.
Three questions informed the ideation process
-
How do you design for both in-store and online?
-
How do you appeal to both user personas?
-
How can curate and customize the experience?
“Positioning the app as a shopping companion before, during, and after the shopping process”
Ranking Ideas
IDEATION
Your shopping buddy
The solutions set out to solve for the in-store shopping process and app user experience. Some ideas were mutually exclusive while
others solved for both experiences. I narrowed them down based on the size of the impact.
Seven impactful solutions
-
Keep previous shopping list
-
Provide custom shopping lists
-
Share aisle location of items
-
Arrange screens based on usage
-
Automated ordering
-
Larger and higher quality imagery
-
Digital receipts
COMPETITIVE ANALYSIS
DON'T REINVENT THE WHEEL
The competitive analysis compared Whole Foods, Walmart, and Publix. I tried to identify the ways they solve customers needs. Each app was unique so there was a wide range of features to explore.
Turning the competition's apps in to wireframes helped identify the featues and flow to support each strategy.
How they stacked up
Whole Foods focuses on the in-store experience. There’s no support for pickup or delivery. Their app focuses on coupons and checking out.
Walmart focuses on pickup and delivery more than in-store features. It heavily promotes online ordering with ability to fully explore inventory.
Publix focuses on pickup, delivery, and in-store experiences equally. Customers can order online as well as organize lists and coupons for in-store.
Competitive Analysis
PROTOTYPING
PERFECTING THE USER EXPERIENCE
Nearing the end of the human-centered design process, I built prototypes in Keynote, on paper, and Sketch to test assumptions from discovery.
INITIAL PROTOTYPE
TESTING ASSUMPTIONS
Keynote was my first prototyping tool. It's a great way to quickly test assumptions without added complexity of a design program.
Keynote Prototype
A bump in the road
Unfortunately, the initial prototype was flawed. Users tried navigating the prototype as if it were fully functional because the hi-fidelity screenshots were confusing when paired with the low interactivity level. They were unable to look beyond those differences so feedback focused more on functionality than the assumptions I was testing.
PAPER PROTOTYPE
BACK TO THE BASICS
Paper served as my next medium for user testing because it was lo-fidelity and allowed for quicker testing and iterations with users.
Shaping the app through co-creation
The feedback from the paper prototypes was positive. Users gravitated towards the in-store item locator, simplified interface, and curated shopping lists. Some critiques centered around the ability to search from any where in the app and adding coupons to a list.
Paper Prototype
SKETCH PROTOTYPE
BRINGING IT TOGETHER
The final prototype was created in Sketch. It implemented everything from discovery, and the two previous prototypes.
Frequently purchased items are easily accessible. Exclusive app coupons promote engagement.
Easily add coupons to a list. Larger images and clearer type hierarchy help identify coupons.
Recently searched items appear first.
Frequently purchased items are easily accessible. Exclusive app coupons promote engagement.
Your grocery shopping sidekick
Rapid decision making can be mentally taxing. The sketch prototype revolved around favorite items, curated lists, and recommended recipes in order to ease the decision making process.
The app is intended for both in-store and online shopping so adding coupons or items
to a list or cart are only one touch away. Search is accessible on every page as well.
KROGER
Easing the pain of grocery shopping through curation
and customization.
CONCLUSIONS
The Kroger app redesign was a month-long process involving many deep dives and prototype iterations.
It was a great opportunity to meet grocery shoppers' needs by helping with the heavy lifting that is finding items or coupons in-store or online.
The outcome helped customers complete their "job to be done" while saving them both time and money through a curated and customized grocery shopping experience.