Redesigning the Safeway Mobile App

This project focused on evaluating and redesigning the Safeway mobile app to improve key grocery shopping experiences. We began with a heuristic evaluation and competitive analysis to identify potential usability issues and understand how similar grocery apps support common tasks.

We then conducted usability testing to examine how users interacted with core features, including coupons, the shopping cart, and the member card. Findings from the research informed our redesign and final design recommendations.

The Safeway app supports a wide range of grocery shopping tasks, but its complex interface can make common actions less intuitive and efficient. This project aimed to identify usability barriers within key shopping flows and explore opportunities to create a clearer and more seamless experience.

We conducted a heuristic evaluation to identify potential usability issues across key Safeway shopping flows. Three team members walked through the app and evaluated the interface using the guidelines below, then prioritized the identified issues based on their level of importance. These findings helped us determine which areas required further investigation during usability testing.

Seven prioritized findings, each documented with annotated screens, the guidelines they violate, and a corresponding recommendation.

01 Priority 1 Rewards QR code is buried at checkout +−

Assessed Issue & Guidelines / Principles Review

The rewards QR code to apply coupons for in-person purchases (Figure 1) is difficult to find. Users must dig into the app at checkout to ensure they receive their discounts and points. Couponing and rewards systems are a primary function of many grocery apps.

Violation of Fitts’ Law: The UI element is small and placed at the bottom of the screen. Scanning rewards should be larger and quicker to access.

Strive for Consistency: The app does not demonstrate consistency in making one of its primary features prominent, unlike its competitors.

Figure & Ground: The barcode is visually minimized at the bottom, so it does not appear to be the main object of attention.

Recommendations

Make the rewards QR barcode more visually prominent so users can easily recognize and identify the feature.

Elevate its placement in the menu hierarchy to ensure quick access at checkout, reducing frustration, time on task, and unnecessary clicks.

02 Priority 1 Two QR codes in different places for the same function +−

Assessed Issue & Guidelines / Principles Review

This app displays two QR codes in multiple locations (Deal page and Wallet) but serves the same function, which is to apply coupons. The visual treatment and the contexts differ, which may confuse users into thinking they are separate features. (Figure 2)

Consistency: This design violates the principle of consistency by displaying the member QR code on different pages with different visuals and contexts. Although both serve the same function, the inconsistent display makes users think they are different features, leading to confusion.

Reduce Short-Term Memory Load: Users must remember at least one path to access this QR code. Instead of visually surfacing a direct entry point, this design increases memory demand. During checkout, users need a fast and stress-free way to access the QR code.

Recommendations

Move the QR code from the Wallet to the Member page, so users can access it with fewer clicks and without switching between multiple pages.

Unify the visual design and context of the QR code across the app to ensure users clearly understand it is the same function.

03 Priority 1 Clipping a coupon gives no confirmation or next step +−

Assessed Issue & Guidelines / Principles Review

When users clip coupons, the process creates uncertainty and confusion, disrupting their shopping experience (Figure 3). The system does not provide clear feedback to confirm that a coupon has been successfully added.

Offer Informative Feedback: The interface fails to notify users when their action is completed, leaving them unsure if the coupon was clipped.

Recognition Rather than Recall: Users must remember how many coupons they had clipped before in order to notice the counter update. Without explicit confirmation, they cannot easily recognize that the action was successful.

Design Dialogs to Yield Closure: Clipping a coupon is only the first step in obtaining discounts, yet the system provides no guidance or sense of completion to help users understand what comes next.

Recommendations

Provide clear, immediate feedback when users tap “Clip Deal” by displaying a confirmation state.

Surface a contextual next step to guide users through the couponing process.

04 Priority 1 Cart mixes à la carte items with meal plans +−

Assessed Issue & Guidelines / Principles Review

Identifying items in the shopping cart increases cognitive load and frustration for users when they add both à la carte items and meal plans (Figure 4).

Reduce Short-Term Memory Load: The design forces users to hold in memory which ingredients belong to which meal, instead of showing it visually. This is especially problematic when some plans include 8+ ingredients, exceeding the limits of short-term memory.

Gestalt Principle of Proximity: The cart groups items by type (grains, fruits & veggies, meats), which misrepresents the mapping users expect. Based on their previous actions, users anticipate seeing items grouped by à la carte selections or by meal plan.

Error Prevention & Flexibility and Efficiency of Use: Users may accidentally remove the wrong item from a meal plan or à la carte selection due to the confusing organization. There is also no efficient way to manage meal plans within the cart; users must backtrack to identify items manually or restart the entire process.

Recommendations

Introduce a tabbed view that allows users to toggle between à la carte items and meal plans. This layered organization preserves the existing grouping by type while adding a higher-level distinction that aligns with user expectations.

By surfacing meal plans as clear groupings, users can more easily manage, review, or remove items without unnecessary cognitive load.

05 Priority 2 Quantity control lacks affordance +−

Assessed Issue & Guidelines / Principles Review

The quantity adjustment control (Figure 5) is represented only by a numeral, which lacks clear affordance.

8 Golden Rules of Interface Design: Strive for Consistency is violated by failing to follow standard UI patterns for quantity adjustment. Prevent Errors is also violated, as the remove button is placed very close to the quantity control, increasing the risk of accidental item deletion.

Gestalt Principle of Proximity: The placement of the remove button directly beneath the quantity control visually groups them, implying a functional relationship that does not exist and potentially misleading users.

Recommendations

Replace the standalone numeral with clear quantity adjustment controls, such as + / – buttons, to align with established interaction patterns and affordances.

Integrate an X icon for item removal or a checkbox to support multi-item deletion. This reduces ambiguity, prevents errors, and creates a more intuitive and efficient cart management experience.

06 Priority 2 Store address cannot be changed from the cart +−

Assessed Issue & Guidelines / Principles Review

Users cannot change the store address directly from the shopping cart. Clicking the address redirects them to the home screen, forcing them to adjust the address there and then navigate back to the checkout (Figure 6). This workflow inefficiency violates several of Nielsen’s heuristics and one of the golden rules.

User Control & Freedom: Users are unable to change the store address directly in the cart view, so they are forced to leave the checkout flow, adding unnecessary steps.

Flexibility & Efficiency of Use: Changing store location is a common action in a shopping experience. Instead of having the functionality accessible at any moment, users have to backtrack to proceed with the action.

Cater to Universal Usability: The system fails to design for a wide range of users. Shoppers who are new or under time constraints will become frustrated and possibly abandon their shopping goal at checkout.

Recommendations

Enable users to update their store location directly within key points of the checkout flow. Providing in-context address controls ensures a seamless shopping experience, reduces unnecessary navigation, and supports task completion without disruptions.

07 Priority 3 Health and Pharmacy icons are redundant +−

Assessed Issue & Guidelines / Principles Review

The Health and Pharmacy icons (Figure 7) are redundant, as they lead users to the same destination, differing only by a tab.

Violation of Consistency & Standards: Users expect different functionalities from different icons. Having Health and Pharmacy direct to the same page creates confusion and breaks consistency.

Aesthetic and Minimalist Design: Redundant entry points increase complexity and add unnecessary clutter to the interface.

Similarity: Users naturally group elements they perceive as alike. Here, the icons break expectations by presenting visual differences that do not correspond to functional differences.

Recommendations

Consolidate the functionality into a single icon and relabel it as Wellness, creating a unified entry point that clearly represents both pharmacy and health services.

We compared Safeway with Whole Foods and Walmart to understand how similar grocery apps organize key shopping features and support common user tasks.

Whole Foods provides quick access to its in-store QR code through the Home screen, while Walmart uses clearer navigation and more structured product organization. In comparison, Safeway offers strong features such as digital coupons, meal planning, and shopping lists, but several key functions require more navigation or lack clear interaction feedback.

The comparison highlighted opportunities for Safeway to improve feature discoverability, navigation clarity, and interaction consistency.

Based on our initial evaluation, we defined four usability goals to guide the study:

To investigate these goals, we focused on three research questions:

We conducted usability tests to further evaluate the Safeway app across three core experiences: applying a coupon, managing the shopping cart, and accessing the member card. Participants were asked to think aloud while they performed the tasks.

The following usability performance measures were utilized to focus on our key goals — effectiveness, efficiency, and ease of use. The team also collected qualitative data during the sessions to build a comprehensive understanding of each participant's experience with the app.

Two personas grounded the study in the shoppers we were designing for.

To complement our usability testing, we surveyed 25 Safeway users to better understand their shopping behaviors, feature usage, and common pain points. The survey reinforced the importance of coupons as a core part of the Safeway experience while highlighting recurring friction around search, coupon interactions, cart management, and feature discoverability.

Based on the usability evaluation and overall findings, we identified several opportunities to improve the Safeway app and reduce friction across key shopping tasks.

The first phase of the study identified Safeway's core usability challenges, including unclear feedback, inefficient task flows, and inconsistent interface patterns.

By combining interface evaluation, usability testing, and survey findings, we identified opportunities to improve clarity, efficiency, and user control across key shopping experiences. These insights informed the redesign in the next phase of the project.

Guided by the recommendations, we redesigned the Safeway app's coupon, cart, member card, and search experiences into a high-fidelity prototype.

To evaluate whether the redesigned experience addressed the issues identified in Phase 1, we conducted a second round of usability testing using the redesigned prototype.

We followed the same overall testing procedure and usability metrics, with minor adjustments to the task scenarios to reflect the redesigned flows.

The validation study showed clear improvements across all three redesigned flows. Participants completed every task successfully with substantially less time, fewer interactions, and fewer errors.

The second round also revealed smaller usability issues around feedback, control visibility, and icon clarity, providing direction for further iteration.

The study found that Safeway’s core usability challenges were driven by unclear feedback, inefficient task flows, and inconsistent interface patterns. By combining interface evaluation, usability testing, and survey findings, we identified opportunities to improve clarity, efficiency, and user control across key shopping experiences.

In future research, we would conduct a cognitive walkthrough to further examine the learnability of key tasks and strengthen our understanding of users’ decision-making processes.