We’ve Been Krogering

My Role: Conducted heuristic evaluations to identify usability issues and suggest improvements; created personas and scenarios; analyzed data; carried out user testing; and recommended design enhancements for the prototype redesign.

Summary
Study Objectives: 
The study aimed to improve the usability and efficiency of the Kroger online grocery shopping experience, focusing on three key tasks: searching and adding items to the cart, applying coupons, and managing shopping lists. The goal was to address usability challenges, enhance navigation, and streamline the checkout process.

Methods Used:
Task Analysis & User Research: Observations, interviews, and heuristic evaluations were conducted to understand how people use the system to achieve their goals and identify pain points and inefficiencies in the system.
Usability Testing: A prototype was developed and tested using moderated remote usability testing with a think-aloud protocol and the System Usability Scale (SUS) to assess improvements.
Image of a desktop displaying the Kroger webpage prototype
The redesigned home screen of the Kroger website
Solution & Impact:
The redesigned prototype introduced several improvements, including:
● Enhanced shopping list and cart integration for a more seamless experience.
● Early selection of fulfillment options (delivery or pickup) to streamline the shopping process.
● A more flexible and intuitive checkout process, allowing users to modify their carts effortlessly.
● Better coupon visibility and application, making savings clearer and easier to use.
These enhancements significantly improved task efficiency, reduced cognitive load, and optimized the user experience, making online grocery shopping more intuitive and user-friendly. The impact of these changes was evident in the usability testing, where the prototype achieved SUS scores above 70, significantly surpassing the Kroger website design. This indicates that users found the prototype a more effective and intuitive solution for completing the specified tasks.
The Challenge
Online ordering of groceries has been increasing in recent years but the landscape underwent a profound transformation when COVID-19 hit. The pandemic had a substantial impact on online grocery shopping, catching some businesses unprepared for the sudden shift.
The Kroger website, as one of the platforms that provides online grocery ordering for delivery and pickup was analyzed to improve overall customer experience.
The team focused on three frequently used functions during online grocery shopping: 
1: Shop for groceries (searching and adding items to shopping carts)
2: Add coupons to an account
3: Create a shopping list
Research and Design tools
Adobe CC (XD, InDesign, Photoshop) | Google Forms & Sheets | Zoom
Design Process
An image of the steps in the design process, with an arrow progressing from Customer Needs Analysis to Design, Prototyping, and Evaluation, in a continuous loop.
Customer needs analysis

Information Gathering & Task Analysis
During this phase, the objectives were to understand and document the steps and tasks customers perform to achieve their goals. It helped us learn about the challenges they face when performing certain tasks, discover sources of errors, and highlight potential pain points in the user's journey. 
This examination also helped us identify opportunities that can adapt to individual user preferences and needs, streamline the workflow, improve efficiency, and enhance the overall online shopping experience.
Task analysis for online grocery shopping. It outlines the steps from logging into a Kroger account to completing the order.

Figure 1: Task analysis - Shopping for groceries online

Task analysis for creating a shopping list. It outlines the steps from logging into a Kroger account to adding items to the list.

Figure 2: Task analysis - Create a shopping list

Task analysis for adding coupons to the account. It outlines the steps from logging into a Kroger account to applying the coupons.

Figure 3: Task analysis - Add coupons to account 

User Experience Testing
I guided the team through implementing the following research methods to identify system issues and gather data.
 ● Observations
 ● Interviews
 ● Heuristic evaluations. 
While observing users and evaluating the interface based on interaction concepts and usability principles, I reached the following conclusions:​​​​​​​​​​​​​​
A. The grocery pickup and in-person touchpoints were well designed, but the website's more complex functions confused users.
B. Users encountered issues when searching for and adding items, applying coupons, and navigating carts during checkout.
Task analysis for online grocery shopping. It outlines the steps from logging into a Kroger account to completing the order. The steps where users face issues are marked with a red border.

Figure 4: Usability issues completing Task 1

Task analysis for creating a shopping list. It outlines the steps from logging into a Kroger account to adding items to the list. The steps where users face issues are marked with a red border.

Figure 5: Usability issues completing Task 2

Task analysis for adding coupons to the account. It outlines the steps from logging into a Kroger account to applying the coupons. The steps where users face issues are marked with a red border.

Figure 6: Usability issues completing Task 3

issue 01:  Aesthetic and minimalist design was violated​​​​​​​
The menu was cluttered and disorganized, making it hard to navigate. Key information was not highlighted, and the design lacked clarity. The interface needs to show information as needed and limit unnecessary details. Organized pages can reinforce brand identity, improve user experience, and reinforce brand quality.
Cluttered hamburger menu on the Kroger website

Figure 7: Issue 1 - Aesthetics & design

Kroger webpage highlighting redundant information and tabs that may lead to confusion

Figure 8: Issue 1 - Aesthetics & design (redundant information and tabs)

issue 02:  Flexibility and multithreading were not supported; user control and freedom were limited
The system did not allow users to add the same item to both Delivery and Pickup carts, forcing them to complete one checkout before starting another. 
This lack of flexibility undermined task efficiency and negatively impacted the customer experience.
Yogurt detail page showing that the item can only be added to the Delivery cart

Figure 9: Issue 2 - Multithreading and user control

issue 03:  Forcing function and error prevention were not always available
Customers could accidentally remove items from their cart by adjusting the quantity, as there was no separate option to delete items. The system lacked proper error prevention and handling.
Delivery cart containing a can of tuna and a package of salmon fillet. The second column shows item quantities that can be changed with small minus and plus buttons.

Figure 10: Issue 3 - Forcing function and error prevention

issue 04:  In some cases, the system did not support visibility and did not provide clear feedback
Cart updates were not visually communicated to the customer. Providing feedback when items are added or removed helps confirm changes, saving users from having to check manually. 
Image of the Kroger website checkout cart that has five grocery items. The columns next to the items display the item quantity and total price. Changes made to the cart are not visually communicated.

Figure 11: Issue 4 - Visibility and feedback

issue 05:  The website design did not reduce short-term memory load and knowledge in the world
Customers had to repeat the same steps when switching between purchase options, like reselecting their store or entering their delivery address each time they switched from Pickup to Delivery.
This process could cause frustration if users accidentally select a different store or forget their previous choice. Setting the last selected option as the default would save time and prevent extra steps.​​​​​​​
Three screens: Screen 1 prompts the user to select a shopping mode from the list; Screen 2 prompts the user to select a pickup address from the list of shops; Screen 3 prompts the user to select a store from the list for online browsing.

Figure 12: Issue 5 - Short-term memory load and knowledge in the world

issue 06:  The website design did not support familiar icon metaphors
Users could add the product to a cart or shopping list, but the shopping list icon was unclear, causing users to guess its function.
The system did not provide clear feedback after clicking the icon, causing confusion and frustration, especially for new users.​​​​​​​
Item detail page showing a pack of strawberries on the left, with a list of purchase options and item price on the right, and a small icon and an Add to Cart button on the bottom of the image.

Figure 13: Issue 6 - Familiar icon metaphors

issue 07:  Coupon application mental models
The website did not distinguish between physical and digital coupon mental models.
 The system required the customers to clip and apply digital coupons similar to how they would use physical coupons.​​​​​​​


Collage of various coupon page screens

Figure 14: Issue 7 - Coupon application mental models

Design Implications
● Simplified and Clear Interface 
Design iterations should focus on organizing content to reduce clutter, highlighting key information, and enhancing navigation. 
● Support for Flexibility
Enable users to manage multiple carts (Delivery and Pickup) simultaneously.
● Error Prevention
Implement safeguards to prevent accidental actions like item removal and ensure clear modification options. 
● Enhanced Feedback
Provide real-time visual feedback when items are added or removed from the cart for better user clarity. 
● Reduce Cognitive Load 
Retain user selections (store, address) to minimize redundant actions and improve efficiency. 
● Familiar Iconography
Use familiar and easily recognizable icons.
● Couponing Mental Models
Simplify coupon application to better align with user expectations.
Personas & Scenarios
Personas helped us stay focused and keep the needs and preferences of different customer groups in mind during the design process. 
​​​​​​​persona 01

GOALS
● Save money when possible.
● Quickly search for items and check out knowing that all the discounts are automatically applied during the checkout.
● Easily see or get notified if there are coupons for some of the items she is frequently purchasing.
A middle-aged Filipino woman sitting on a couch, engaged in a phone conversation. She is divorced, a mother of two, and currently living with a partner. The image includes text outlining her goals, lifestyle, and the daily challenges she faces as a professional and a mother who needs to stay organized and ensure the family has ready meals.

Figure 15: Persona 1 - Elizabeth

scenario 01: During the pandemic, Elizabeth transitioned primarily to online grocery shopping. Kroger, a favored store of hers, offers the convenience of ordering and having groceries delivered or ready for pickup. Recently, she started actively exploring coupons and promotions to maximize savings. While searching for items, she prefers a seamless experience where she can quickly view the value and terms of applicable coupons without navigating to additional pages. She also appreciates the convenience of just adding an item to her shopping cart and the coupon is automatically applied if it meets the specified terms and conditions. This eliminates the need for her to manually enter coupon codes or attach coupons to her orders.​​​​​​​
persona 02

Goals
● Enjoy the flexibility to share and easily modify grocery lists with others
● Access real-time product availability and see immediate updates on shopping lists.
A young Black man standing with his arms crossed against a gray background. The image features text detailing his goals, lifestyle, and the daily challenges he faces as a graduate student living with a roommate, balancing personal and academic responsibilities.

Figure 16: Persona 2 - Liam

scenario 02:  Liam is planning a small gathering at his place, and arranging food and snacks is on his to-do list. Typically, he and his roommate share grocery responsibilities, taking turns purchasing items. He likes to create weekly grocery shopping lists which he then shares with his roommate. In preparation for tomorrow's gathering, he needs to add a few more items to the list before he shares the grocery list with his roommate to get the necessary items. Liam quickly browses various food categories, adding one by one necessary items to his shopping list. Once completed, he shares the list with his roommate with just a few clicks. His roommate can access the list, and Liam has the flexibility to make last-minute adjustments if he forgets something or has a change of plans. Liam can now shift his focus to studying for his upcoming exam and not worry about the party.​​​​​​​
 persona 03

Goals
● Safe and effortless grocery shopping and delivery experience
● Trust that the store will deliver carefully selected and fresh produce
● Receive orders without being offered substitutes for unavailable products.
An elderly couple dressed in fall outfits, walking in the park with arms crossed and gazing at each other. The image includes text describing their goals, lifestyle, and the daily challenges they face as they care for each other and try to stay healthy during the pandemic.

Figure 17: Persona 3 - Jerry and Susan

scenario 03: Jerry and Susan decide to try ordering food from the Kroger website. Jerry opens the webpage and starts typing in the search box “apples.” He scrolls up and down to select the desired type from the search results and adds them to his cart. Interested in trying something new, he then searches for items by the department, adds all necessary items to the cart, and proceeds to check out. He then realizes that he needs to create an account to log in. After completing this step, he returns to the shopping cart to review and finalize the order. He checks out selecting the delivery option. A few hours later, Susan receives a call from the store, informing them of the unavailability of a bag of beans and suggesting canned beans as a substitute. Additionally, the selected milk brand is out of stock, so the store offered to deliver an alternative brand. Susan accepts the milk substitution but declines canned beans. A few hours later, the doorbell rings, and their groceries have been successfully delivered. ​​​​​​​
Design & Prototyping

Initial Sketches
A collage of images showing the Kroger website checkout page alongside sketches of the redesigned checkout page with three distinct columns.

Figure 18: Initial sketches of the redesigned checkout pages

A collage of eight checkout pages highlighting three distinct columns, each designed for a different shopping mode that can be completed simultaneously.

Figure 19: Early sketches of the checkout pages showcasing three columns for different shopping modes: pickup, delivery, and shipping.

A collage of Kroger webpages with hand sketches. The sketches aim to enhance feedback and provide users with the flexibility to manage multiple carts when items are added or updated.

Figure 20: Early sketches of redesigned interfaces to support user flexibility and enhance visibility while adding items to different carts

Design Mockups​​​
To address website functionality issues, the team brainstormed design solutions for a more streamlined shopping experience. The goal was to simplify online grocery shopping by improving clarity and aesthetics while enhancing functionality with greater flexibility, error prevention, and reduced mental load, ultimately improving the customer experience.

Old problems and new solutions:
Aesthetics and design: Eliminate unnecessary repetition of information, confusing labeling, and clutter. 
Error prevention and forcing functions: Prevent unwanted cart modifications by minimizing errors and providing a recovery option.
Multithreading and task conformance: Allow users to easily browse and add products to their desired carts or lists. Make moving items between shopping carts and lists easy eliminating unnecessary steps.
Visibility, observability, and feedback: Provide clear action confirmations and streamline simple changes with features like drag-and-drop, pop-up windows, and clear information on total savings.
Memory and mental models: Streamline the process by removing unnecessary steps, avoiding mode switching, and eliminating the need to remember addresses, clip coupons, or check weekly savings. Redesign shopping, list creation, and saving concepts to be quicker, more logical, and enjoyable.
Series of design mockups for an online grocery shopping platform showing how the new designs allow to move items between carts.

Figure 21: Moving items between carts

Moving items between Carts

1.  Move an item to a different cart

2. Divide the screen to see both carts

3. Check out separate or together
A mockup of Kroger webpage showing the improvements to the new design. The enhanced sections are labeled with numbers 1 to 4, accompanied by descriptions in the panel next to the image.

Figure 22: Improvements in searching within the List

Improvements in searching within the List

1. Visibility of the active tab to help with the navigation

2. Active List is indicated

3. Relevant coupons are visible in the List search

4. List options are shown in summary, active when applicable
Kroger webpage mockup showing a Weekly Meal Prep list. Items like strawberries, chicken breast, and bananas are displayed with quantity adjustments and checkboxes for selection. The enhanced sections are labeled with numbers 1 to 4, accompanied by descriptions in the panel next to the image.

Figure 23: Improvements in List functionality

Improvements in List functionality

1. Ability to select items from the list individually or use "Select All"

2. Users can easily return to the List homepage

3. The List can be shared with others via email or phone number

4. Selected items can be added to the Cart or removed from the List
Kroger webpage mockup showing a pop-up to select the cart type: Pickup, Delivery, or Ship. The background displays a list of selected grocery items.

Figure 24: Selecting where to move items

Selecting where to move items

1. Users can choose the cart to add their selected items
Kroger shopping list interface with three items: strawberries, chicken breast, and granola bars, each with a checkbox to select, quantity tab, price, and remove option. The banner notification on the top says, "4 items moved from Weekly Meal Prep lit to Delivery Cart."

Figure 25: Feedback panel

Feedback panel

1. Banner notification provides feedback
Kroger webpage shows coupon-eligible products which include bananas, Nutella, strawberries, Yakult, Dove shower gel, orange juice, Kleenex tissues, and granola bars. Each item displays a coupon savings label, price, and options to add to Pickup, Delivery, or List carts.

Figure 26: Coupon-eligible product filtering

Coupon-eligible product filtering

1. Visibility of the active tab

2. Easily recognize and differentiate coupons

3. Consistent menu to select and add an item to any of the Carts

4. Immediate feedback when a coupon is selected and activated 
Kroger interface displays detailed coupon information for Dove chocolate, showing a $3 price with savings of $1. Below the product image, qualifying product flavors are listed with options to add to Pickup, Delivery, or List carts.

Figure 27: Coupon details

Coupon details

1. After adding a coupon-eligible item, the user will be able to see that the coupon has been automatically applied to the shopping cart

2. Coupon details are listed

3. Selected flavor can be added to a preferred shopping cart (pickup/delivery)
Kroger online grocery order page shows two sections. On the left, the Pickup Cart lists selected items, quantities, prices, and options to modify or remove items, along with a coupon discount and total estimated cost. On the right, the Schedule Your Order section allows users to choose a delivery date, time, and provide delivery instructions, with a button to confirm the order.

Figure 28: Displaying savings overview

Displaying savings overview

1. View all activated and used coupons in the shopping cart

2. The shopping cart summary shows how much the customer is saving with the coupons
Design Improvements

01: Visibility/Observability and Feedback
The updated design is responsive and provides immediate feedback and confirmation for actions such as adding, removing items, or modifying carts and lists. 
A clear presentation of information enhances users' ability to locate the necessary information and feel in control of things, subsequently improving the overall interaction with the website. 
Prototype of Kroger shopping list interface. The left image shows three items in the Weekly Meal Prep list, with a message indicating items were moved to the Delivery cart. The right image displays a confirmation pop-up that the Weekly Meal Prep list has been sent to a phone number, with options to Share Again or Return to List View.

Figure 29: Visibility and feedback

02: Multithreading and Task Conformance
The redesigned interface introduces increased flexibility, enabling users to seamlessly browse and add items to different carts and shopping lists without the need to browse in a specific mode. Users are no longer required to pre-select a cart (delivery/pickup) or a shopping list before browsing and adding items. 
The design is flexible enough to minimally disrupt user tasks. It allows the user to see the carts side by side, modify them as needed, and even check out all carts at the same time. The streamlined task execution not only reduces shopping time but also enhances overall efficiency.
The Kroger website and a prototype for grocery orders are displayed next to each other. The Kroger site shows a Delivery Cart in the center of the page, while the prototype combines Pickup and Delivery options on one page with an option to easily move items between carts.

Figure 30: Multithreading and task conformance (comparing the Kroger website and the Prototype)

03: Forcing Functions and Error Prevention
In the process of modifying carts and shopping lists, the new design protects users from inadvertent item deletion. This feature shields users from unintended modifications in their carts, preventing simple slips and errors. 
Reversing an action while modifying the cart is a default option and the user is warned with the pop-up windows. 

The Kroger website page and a prototype for managing grocery orders are displayed. On the left, the Kroger website shows Delivery Cart details with the option to adjust item quantities. On the right, the prototype introduces a pop-up feature asking, "Move Banana to Delivery Cart?" with Yes and No buttons, making it easier to switch items between pickup and delivery options.

Figure 31: Forcing functions and error prevention (comparing the Kroger website and the Prototype)

04: Aesthetics and Design; Icons and Labeling
The updated design eliminates clutter, redundant information display, and confusing labels and offers clear, step-by-step guidance for task completion. 
This enables the clear representation of information (without the need to guess), optimizes the layout, makes navigation simple and easy, and improves performance. 

A comparison between the current Kroger website interface and a proposed prototype for purchasing bananas. Both interfaces feature a banana image and product details. The prototype organizes Pickup, Delivery, and List options clearly and in a more streamlined design.

Figure 32: Design & labeling (comparing the Kroger website and the Prototype)

05: Memory and Mental Models
The updated design streamlines the user experience by eliminating the requirement for additional steps and mode-switching. Users no longer need to remember to select their address each time, clip coupons, or check weekly savings, as this information is prominently displayed and automatically added to shopping carts. 
This simplification reduces the time spent on shopping and adding items to various carts and lists, making the process less time-consuming, more logical, and more rewarding. The new design not only decreases cognitive load but also enhances user attention and focus, reinstalling trust in the company and brand.​​​​​​​
Comparison of the Kroger website (left) and a prototype (right) for selecting grocery items. The zoomed-in sections highlight how the prototype improves mental models by clearly displaying information, eliminating the need to search for or clip coupons.

Figure 33: Memory and mental models (comparing the Kroger website and the Prototype)

Task Flow Redesign and the Prototype
Recognizing the importance of seamless navigation and user efficiency, our team undertook a comprehensive task flow redesign. 
By refining the task flow, we aimed to eliminate unnecessary complexities, ensure logical progression, and reduce cognitive load in completing tasks. 
The redesigned task flow for online grocery shopping at Kroger consists of six key steps: selecting a location, searching for items, adding them to a cart or list, reviewing the carts, completing the checkout process, and submitting the order. Each step includes subtasks that guide users toward checkout and order completion.

Figure 34: Redesigned Task 1 - Shopping for groceries

A video demonstration of the prototype in action, showing how a customer adds items to different carts and checks out.
The redesigned task flow for creating a shopping list at Kroger includes six main steps: choosing a location, searching for items, selecting a shopping list, adding items, modifying the list, and sharing it. Each step contains subtasks that list the steps of creating and sharing their shopping lists.

Figure 35: Redesigned Task 2 - Creating a shopping list

A video demonstration of the prototype, showcasing how a customer creates a shopping list, adds items, and shares the list with someone.
The redesigned task flow for shopping coupon eligible items if shopping online or adding coupons to an account if shopping in the store. Each task and subtask list the steps of shopping with coupons.

Figure 36: Redesigned Task 3 - Adding coupons to account

A video demonstration of the prototype, illustrating how a customer purchases coupon-eligible items and views the total savings.
Evaluation

Usability Goals
The following usability goals guided the design process to support interactions that align with users' expectations and foster a positive user experience.
• Improve user interaction with the website
• Prevent slips and errors
• Optimize the layout, make navigation simple and easy, and improve system performance   
• Decrease mental load and improve user mental focus while interacting with the system.

Testing Methods
• Think aloud method.
• System Usability Scale (SUS) questionnaire with a 5-point Likert scale using Google Forms. ​​​​​​​
Procedure
• Participants were directed to perform the same task on the Kroger website and the prototype. Tests were conducted in different order to avoid bias.
• Participants were asked to verbalize their thoughts and answer questions while completing the tasks.
• SUS questionnaires were shared to be completed after each task.
• The testing was conducted via Zoom.
Data Analysis
The SUS scores for the Prototype were above 70 compared to Kroger website scores that ranged between 33-50. This signifies that the developed prototype surpassed the existing Kroger website in terms of usability for the specified tasks. It also implied that users found the prototype a more effective and user-friendly solution for the specified tasks. 
These results demonstrate the team's success in identifying and eliminating pain points associated with completing the tasks.
This image shows a comparison of average System Usability Scale scores between Kroger's existing website and a prototype for the three selected tasks, displayed alongside an interpretation scale. The scores for the Kroger website are significantly lower compared to the prototype, indicating the prototype is perceived as more usable.

Figure 37: Kroger and Prototype SUS scores

Quantitive data also numerically displayed and backed up the feedback from the think-aloud protocol. 
Users agreed that overall the prototype was easier to use to complete the three tasks compared to the Kroger website. Thus, the goals to improve user interaction with the website, optimize the navigation, and improve system performance were met.

goal 01:  Improve User Interaction with the website
User feedback: "Much fewer clicks than on the current website! Which means it is way more intuitive."
"I liked that you can move items easily from delivery to pickup, and vice versa."
Results of the survey regarding the ease of use of the Prototype. The first chart shows that 55.6% of respondents strongly agree that the new website was easy to use for shopping groceries. The second chart indicates that 44.4% strongly agree it was easy to create shopping lists, followed by 27.8% who somewhat agree. In the third chart, 55.6% agree the site was easy to use with the coupon system, while 27.8% strongly agree.

Figure 38: Google survey - How easy it was to use the "new Kroger website" (Prototype)

goal 02: Optimize the layout, make navigation simple and easy, improve system performance
User feedback: "Design is clean and clear. The navigation flow is quite easy to follow."
"I liked being able to add items to my list directly without having to open it in a new window."
Three bar charts assess user confidence in using the prototype for different tasks. In the first chart, 33.3% of respondents felt very confident using the prototype to shop for groceries and 27.8% felt somewhat confident. The second chart shows 38.9% agreed, and 33.3% strongly agreed that creating shopping lists was easy. In the third chart, 50% agreed they felt confident using the coupon system and 27.8% strongly agreed.

Figure 39: Google survey - How confident the users were to use the "new Kroger website" (Prototype)

goal 03: Decrease mental load and improve user mental focus while interacting with the system
User feedback: "More structured with respect to using coupons - that is, the coupons are suggested upon search rather than require a separate step (coupon search) before searching for a particular item."
"I like that the items with discounts are clearly seen, I can see them right away with this bright green color text that says 'coupons' which is nice."
Three bar charts assess whether users needed to learn new things to use the prototype. The first chart shows 50% of respondents strongly disagreed, and 33.3% disagreed that they needed to learn new information to shop for groceries. The second chart indicates 55.6% strongly disagreed about needing to learn new information to create shopping lists. The third chart reveals 27.8% strongly disagreed, 38.9% disagreed, and 27.8% were neutral about needing to learn new things to use the coupon system.

Figure 40: Google survey - Learning new things to use the "new Kroger website" (Prototype)

The image displays two sets of bar charts comparing overall user satisfaction with the Prototype and the Kroger website design for various tasks: grocery shopping, creating shopping lists, and using a coupon system. In the prototype charts, most respondents express high satisfaction, with 38.9% to 66.7% selecting Extremely Satisfied or Satisfied. In contrast, the Kroger website shows lower satisfaction levels, with most respondents choosing neutral or dissatisfied options.

Figure 41: Google survey - Overall satisfaction with the "new Kroger website" (Prototype)

Redesign of the Prototype
After receiving valuable user feedback on the initial prototype, our team worked on incorporating the feedback into the design. 
The team analyzed the feedback to distinguish between individual preferences and those addressing usability issues to create a product that aligns with user expectations.
task 01:  Add items to a Cart
User feedback: "So I need, I think, just to remember that yellow is delivery, blue is pickup, which is not convenient."
"...you don’t know which color is for one, you need to get used to the website to know, it should be nice to have a reminder of which color is for what..."
The image compares the old and new interfaces, both displaying search results for items like bananas, banana yogurt, and banana juice. The primary difference is the visual design of the buttons, such as the Add and Delivery buttons, which are orange in the new interface.

Figure 42: Adding items to a cart

task 02: Easily recognize different carts
User feedback: "The yellow color was hard to see, maybe pick a darker color."
"For me when I’m checking out I personally would like to see just the cart that I'm just using, not two carts… there is a lot of information at once."
Two versions of checkout pages. The old interface (left) displays the Pickup Order and Delivery Cart side by side. In contrast, the new interface highlights the active shopping cart, with an option to view the Delivery cart as well.

Figure 43: Easily recognizing different carts

task 03: Proceed to checkout
User Feedback:  "Check out together button should be larger than the other two."
"I would like to have the option to select multiple items to move to another cart at once."
"When you move items around between shopping carts say, each line has its own wording, something like 'move to delivery cart' or 'move to pickup'… it's a little bit cramped."
"I mean, I wouldn't think to scroll down from the beginning, I would expect to see it [Check out All Carts] right away…"
Comparison of old and new prototype interfaces. The old interface displays the summary of Pickup and Delivery carts at the bottom of the page. The new interface consolidates both carts under My Shopping Carts and is displayed on the top of the page.

Figure 44: Proceeding to checkout

task 04: View "My Lists"
User feedback: "If there are no pre-existing lists present, I would expect a different wording for the action button. Also, the instructions on the left (press on button x to create a new list) with the actual action button on the right (which has a name different from what it did) was a bit confusing."​​​​​​​
Old and new interfaces for the shopping list feature. The new interface has additional functionality displayed on the page so the users can quickly complete frequent tasks, such as creating a new list or sharing the list with a friend or family.

Figure 45: Viewing Lists

task 05: View "List" options
User feedback: "I wish I could download the list to take with me."
"I think "back to all lists" would be better than '[user name's] lists' because account number is not very intuitive for me."
Old and new interfaces for the shopping list feature. The new interface has additional buttons such as downloading and deleting the list accessible quickly under the list summary column.

Figure 46: List options and appearance

task 06: Move items from a "List" to a "Cart"
User feedback: "When you add an item to the cart, I would also suggest showing a checkbox  (checked by default) with wording like "keep the item in the original list." That way, the users would be able to move items out of the list to the shopping cart but still be able to keep the item in the same list for future reference if needed."
"Didn’t like that it removed the bananas from the shopping list instead of marking it as purchased."​​​​​​​
Old and new interfaces for the shopping list feature. The interface shows a pop-up window to move items to a shopping cart. The new interface has an additional checkbox that allows the user to keep the items in the list for future shopping tips.

Figure 47: Moving items from a "List" to a "Cart"

task 07: Search for a coupon
User feedback: "...to see a separate area in the search results that shows only items with coupons."
" Wish I could filter by coupons ..." 
The old and new prototype screens are displayed side by side. The new interface includes additional functionality for filtering and searching specific coupon-eligible items.

Figure 48: Searching for a coupon

task 08: Add coupon-eligible items to the Cart
User feedback: "I also want to know the price before and after using my coupon..." 
"Still doesn’t tell you how much the coupon has in savings but also doesn’t have the new price..."​​​​​​​
The old and new prototype screens are shown side by side. The new interface highlights the coupon savings amount for the customer.

Figure 49: Adding coupon-eligible items to the Cart

task 09: Find out the total savings with the coupons
User feedback:  "When I look at this thing as a whole, I know how I save a total like $5 here and $10 here, but I don't see, for instance, for this $10 where did that $10 come from?… it probably matters because you want to see what you saved on each individual item."
"Usually, I'm used to seeing one additional line, something like price before coupons, then this is with a minus sign, minus $10, and then estimated total… so then extra line, even though it doesn't affect the total, it's sort of nice psychological thing that you should have paid this bigger number."
The image shows the old and new interfaces next to each other, highlighting improvements in the new interface. Specifically, it displays the coupon discount total and the item's discounted price.

Figure 50: Determining total savings

Conclusion
With every design, tradeoffs are inevitable, involving a delicate balance between the time required for task completion and the aesthetic appeal. Similarly, there was a tradeoff between visibility and feedback on one hand, and streamlining/simplifying the processes on the other, when I had to advocate for implementing additional steps to confirm actions and mitigate errors.
In making decisions, the team prioritized usability principles that could address a range of issues, even if it meant that some users could disagree with additional steps or the page could appear overwhelming to those who prefer a more focused, step-by-step approach.
Overall, the new prototype enhanced the usability of the Kroger website by:
 • Ensuring consistent treatment of the shopping list in alignment with the shopping cart.
 • Enhancing the visibility of savings and streamlining the couponing process.
 • Allowing users to select fulfillment methods earlier in the shopping process. 
 • Creating a more flexible checkout process.
wo sets of feedback comparisons. On the left, under Visibility/Observability and Feedback vs. Simplifying, users mention annoying pop-ups and suggest fewer steps. On the right, under Multithreading vs. Aesthetics, users express concerns about cluttered pages and excessive text.

Figure 51: Tradeoffs

Next Project

Cache for Gen Z
Otto System
Safe Medication Disposal Solutions
↑Back to Top