Safeway Case Study and Design Iteration
Enhancing limited functionalities and optimizing usability for a more seamless experience.
Context Safeway's app is highly ranked among food and drink apps in the US, but I noticed several things that could have been more consistent with the user experience. These issues prompted me to focus on designing a smoother checkout process in the cart, especially for specific use cases.
As the designer, I led the design iteration and created a more seamless cart flow while conducting user testing to ensure its effectiveness.
Role Product Designer: UX research & Product design
Team 1 Product manager, 2 UX Researchers, 1 Product Designer
Timeline Sep 2023- Nov 2023
Tool Figma, Lucid, Google survey, in-person interview
Constraints We conducted user research with 8 participants; however, this sample size may not fully represent the diversity of our target user group, potentially limiting the generalizability of the findings.
What did I learn? I've learned to balance differing opinions and user insights, synthesizing them into a cohesive design through iteration. The most rewarding part was how this process improved the product while fostering deeper reflection and strategic thinking.
Summary
Say goodbye to the frustration of uncertainty
Through two design iterations and rounds of user research, I identified critical points of confusion in the cart and coupon processes. By refining these areas, the final design ensures a smoother, more intuitive experience, so users always know where their actions lead.
Final Design
Effortless Cart and Coupon Management for Enhanced Usability
Buying and checking out should be quick and easy, but confusion arose in the cart, especially with the 'Meal Plan,' which allows users to add recipe ingredients to the cart and check if a coupon was applied. I addressed this by simplifying cart management and improving the coupon clipping process, ensuring clipped coupons remain visible with a 'clipped' status for a smoother experience.
Solution 1. How to manage your cart with ease
Before
There was no option to empty the entire cart at once, forcing users to manually remove items individually, and the swipe-to-delete function was hard to discover.
Adjusting item quantities and deleting them using the quantity button felt unintuitive and added unnecessary steps.
It was unclear whether a coupon had been successfully applied, causing confusion during checkout.
Final
A "Select All" checkbox enables users to easily manage items and empty the cart with a single action, enhancing efficiency.
The quantity button now allows users to add or remove items with just one click, improving usability.
A "Coupon Added" indicator clearly notifies users when a coupon has been applied, eliminating uncertainty.
Granular Design Decisions for Solution 1
Product Card Usability Improvements
Focus: How might we help users access more information from the item card?
Design Changes: I added a checkbox to the top left of the item image and moved the price below the quantity button for better alignment with real-time price adjustments. This makes interactions more intuitive, allowing users to see price changes as they adjust quantities. Previously, the quantity button’s extended design obstructed the price. I also reduced the item name's font size (17pt to 16.5pt) to accommodate the coupon notification.
Trade-offs:
Benefit: Users can instantly see price changes when adjusting the quantity.
Drawback: The layout might appear slightly more complex.
Extending Cart Header for Improved Item Management
Focus: How might we add new features without causing confusion?
Design Changes: Clicking the checkbox or 'Select All' selects all items, and the Delete button next to it indicates users can delete them in one step. The sorting dropdown has been added to the right to differentiate its function, and the gray color helps visually separate unrelated features. The line under 'Cart' was removed, as the design remains clear without it.
Trade-offs:
Benefit: Users can now utilize the cart with more functionality, simplifying item management.
Drawback: The additional buttons and sorting feature could slightly complicate the interface for users unfamiliar with these functions.
Solution 2. How to seamlessly track items from your meal plan
Before
It was difficult to delete items from a recipe. Users had to remember what they added themselves.
Final
A sorting dropdown now categorizes items into two groups: Product and Meal Plan. This allows users to delete items from the recipe, either removing all of them at once or just a portion if they already have some of the ingredients.
Granular Design Decisions for Solution 2
Adding sorting feature
Focus: How might we help users easily find items from Meal Plans?
Design Changes: I added a dropdown for sorting, with two simple options: Product and Meal Plan. This makes it easier for users to find items in the cart based on where they came from. The clear label, 'Sort by,' helps users quickly understand the feature. The dropdown keeps the design clean and organized, so it doesn’t clutter the cart while still adding useful functionality.
Trade-offs:
Benefit: The sorting feature helps users manage and locate items in the cart more easily, especially when dealing with multiple ingredients from the Meal Plan. This improves efficiency and reduces the time spent searching for specific items.
Drawback: Not all users use the Meal Plan feature, so the sorting option may feel unnecessary for those who primarily manage individual products. It could add a small layer of complexity for users unfamiliar with this feature.
Showing new category with new function
Focus: How might we reduce confusion when adding a new function?
Design Changes: I added a recipe-specific checkbox, enabling users to remove all items from a recipe in one step. The addition of a meal plan icon helps visually distinguish recipe ingredients from standard products, streamlining cart management and enhancing clarity for a more efficient user experience.
Trade-offs:
Benefit: By clearly differentiating meal plan items, users gain more control over how they manage their cart. They can easily remove or adjust entire recipes, reducing time spent editing the cart and preventing errors when trying to remove items.
Drawback: The additional functionality may require some initial learning for users who are new to managing recipes, as they might not be familiar with the new sorting options or icons.
Solution 3. How to confirm your coupons with confidence
Before
The 'Clipped' category in the top menu didn’t display clipped items, and its location made it hard to find, being far from the 'All deals' section.
Item cards disappeared immediately after clicking 'Clip deal,' creating confusion about what was clipped.
The 'Clipped' button in the bottom right corner was easily overlooked due to its location and design.
Final
A red dot now appears on the 'Clipped' menu to give users immediate feedback when a deal is clipped, enhancing visibility and user awareness.
Instead of vanishing, the item card changes to 'Shop Coupon' after clipping, creating a smoother transition and guiding users to the next step without losing context.
The 'Clipped' button was enlarged, and its color contrast was improved for better visibility.
Granular Design Decisions for Solution 3
Different status at a same location
Focus: How might we make the state change clear and intuitive?
Design Changes: I understand the use of the paper coupon style, reflecting traditional flyers, but it showed low affordance and looked like it had already been clicked. I updated the button for better affordance, and once clicked, it changes to 'Shop Coupon,' retaining the paper style for continuity. The ‘Clipped’ notification confirms the action, encouraging users to move to the next step.
Trade-offs:
Benefit: By keeping the deal item card visible and consistent, users are less likely to feel frustrated or confused.
Drawback: May cause visual clutter for users clipping multiple deals.
Button style changing
Focus: How might we help users to find multiple ways to reach their goal?
Design Changes: Many user testing participants couldn't find the 'Clipped' button due to its bottom-right location. I improved the button's readability by increasing its size, adding stronger contrast, and applying a shadow to make it appear more clickable. The font has also been bolded for better visibility.
Trade-offs:
Benefit: Enhanced user visibility and interaction.
Drawback: This design may not fit within the current app’s design system, which uses a red background with white font for buttons.
The Problem - Where did I start from?
Lack of functionality and Hidden affordances
I observed that the main confusion arises when users try to delete items, particularly when the items are added through a feature called ‘Meal Plan’. Another issue is when users apply a coupon, as it doesn’t clearly indicate where the discounted items are located.
Task flow 1: Deleting Items
What made this process difficult?: Users struggled to find the delete button and couldn’t delete items all at once.
Why?: The delete button was a hidden feature, only accessible by swiping the item card. Additionally, there was no option to empty the cart in one action.
How did I solved this: I introduced features that clearly indicate how to delete individual items or empty the cart.
Constraints?: The app’s design leans toward minimalism, which posed challenges when adding visible functionality.
Before
Pros Minimal and simple visual design.
Cons Novice users struggle to find the delete feature. Even familiar users must manually delete each item one by one.
Final
Pros Improved usability, with clearer access to the delete function.
Cons The addition of this feature introduces more visual elements, which may reduce the minimalist appearance.
Task flow 2: Applying Coupons
What made this process difficult?: Although the task flow was simple, users struggled to find where to go for the next step.
Why?: Once a coupon was applied, there was no notification or clear indication, as the coupon moved to the end of an extensive deals list. This wasn’t an issue with a limited number of items, but with an endless list of coupons, it caused confusion.
How did I solved this: I adjusted the design so that clicked coupons appear at the top of the list with a distinct status on the card. This allowed me to decrease the number of clicks and task time while maintaining the same task flow, making the process more efficient.
Constraints?: If too many deals are clicked, users may need a sorting button to manage them more effectively.
Before
Pros the 'All Deals' tab always starts with new coupon deals.
Cons It’s hard to find clipped deals because the 'Clipped' section is not easy to access, and the button to view them is difficult to notice.
Final
Pros The clipped deals are now much easier to notice through multiple access points.
Cons The 'All Deals' tab now starts with clipped coupons, pushing new deals further down the list.
User research - User Experiment 1
Find where people are suffering from
Research Goals
Gain a better understanding of the needs of the user
Observe where users get stuck or frustrated
Find areas of the app that could be improved
Methodology
Task-based: Provide 4 tasks
Time recording during the tasks
Post-test surveys
Questionnaires
Participants
Participants are novice users of a grocery store shopping app.
4 participants are college students from the ages 20-25
4 participants are adults ranging from the ages 47-56
Usability test result
For our Usability Metrics, we focused on 4 separate measures.
- Time spent on task
- Success on task
- Number of clicks
- User satisfaction
- Not Good 😔
- Okay 😐
- Good 😁
Pain points
Identified Challenges
From the data collected, we identified multiple areas where users experienced confusion, and in some cases, task failure. Below are a few key pain points we uncovered.
“Hmm, where's the delete?”
— Female, 20 years old
“Where did the coupon go? I thought I just applied it.”
— Male, 40 years old
The usability testing helped highlight the following pain points:
Clipping
Users were unaware that they could tap on the product for more details.
Applying Coupons to Subtotal
Coupons were not applied to the subtotal automatically.
Users had to take extra steps for them to be applied.
Emptying the Cart
Users were unable to delete meal plans all at once.
They had to remove items one by one.
Product Goal
Complete tasks with ease and confidence
Reducing confusion and improving overall satisfaction.
Visual Design Ideation
Deleting feature
My initial goal was to minimize visual changes to preserve the app's original concept. However, I soon realized this approach wasn’t effective for achieving the needed usability improvements.
How did they turned out at the end
Delete button
During user testing, participants hesitated to click the 'All' checkbox in Iteration 1 because they were unsure of its function. The design was refined in Iteration 2 for clarity.
Amount button
In Iteration 1, I extended the quantity button to display the decrease and increase options, reflecting how the Original button behaved when clicked. In Iteration 2, the minus icon became a trashcan when the quantity was 1 for clarity, and I lightened the button's stroke to emphasize its content
Switching button
To implement the ‘Meal Plan’ category, I created a toggle to switch between All items and Meal Plan items. After testing different placements, I positioned it near the top right, aligned with the Safeway logo, as I determined it should have higher priority than other features.
How did they turned out at the end
Meal plan sorting button
After the second round of testing, users found the labels ‘All’ and ‘Meals’ confusing, and many didn’t understand the toggle's purpose. In Iteration 2, I replaced it with a dropdown menu to clarify its sorting function and moved it, swapping places with the price amount, since sorting wasn’t the highest priority.
Meal plan category in the item list
In Iteration 1, the ‘Meal Plan’ category had a darker gray background, but it didn’t convey the new category well. In Iteration 2, I matched the background to existing categories and added an icon to clearly distinguish it.
Checkboxes for items
After adding checkboxes in Iteration 1, they were revised in Iteration 2 with transparency to allow for a larger item image.
Applying Coupon
A flexible and efficient system isn’t just about helping users transition from novice to expert use; it’s also about allowing users to approach tasks in multiple ways to suit their working style.
How did they turned out at the end
Meal plan sorting button
Originally, the 'All deals' and 'Clipped' sections were separate, which made it hard for users to navigate smoothly. I changed the design to put these sections next to each other, which made the flow better and added a red dot to the 'Clipped' section to make it more noticeable. Even with this change, users still found the red dot hard to see during testing. Based on this feedback, I made the red dot bigger in the next version, which really helped make it stand out and got users more involved.
Clip deal button
Initially, clicking on a deal caused the card to vanish, creating confusion. I updated it so the card remains but changes to 'Shop Coupon' after being clicked, leading users to related coupons. A new green "clipped" notification was also added for more precise recognition.
‘Clipped’ button
Participants initially missed the 'Clipped' button due to its placement. I chose not to move it since I had already added a notification above. Instead, I changed the icon's color to make it more visible. Later, realizing the gray clashed with their design system, I reverted to the original style but reversed the text and button colors for better contrast. I also made the button larger and the text bolder for clearer visibility.
User research - User Experiment 2
Unexpected finding
What did we miss?
The results showed an increase in task ratings and a significant decrease in the number of clicks. However, the time taken to complete the task of adding a coupon increased. Was there a design issue? Did something increase user frustration?
After reviewing the user research recordings, I discovered that the phrase 'Apply the coupon' caused confusion. Participants were looking for 'coupons,' but the interface used 'Clip deal' instead.
By remeasuring the task time after users understood the actual task, it decreased from 28.3 seconds to 6.52 seconds.
This experience taught me the importance of precise wording in user evaluations. The confusion caused by 'Apply the coupon' versus 'Clip deal' highlights how small language choices can significantly impact user comprehension and task efficiency, ultimately influencing the success of the design.
The results showed inconsistencies compared to other findings, largely due to the choice of language.
Key Outcomes
The devil is in the details
1. Visual Changes Can’t Be Avoided for Usability
Insight: My initial goal was to minimize visual changes, but it became clear that significant adjustments were needed to address usability issues, such as adding a trash can icon and reworking buttons.
Lesson Learned: Sometimes, sticking to the original design compromises functionality. Visual changes may be necessary to create a more intuitive and effective user experience.
2. Button Affordance and Discoverability
Insight: In earlier iterations, users struggled to locate key functions like the toggle for the Meal Plan. Buttons lacked affordance, leading to hesitation and frustration.
Lesson Learned: Making interactive elements visually distinct and intuitive can significantly reduce user friction and improve overall usability.
3. Improved Task Efficiency
Insight: After design iterations and adjustments, task completion times, especially for deleting items or managing the cart, were significantly reduced. The addition of clearer icons and a streamlined button design helped improve user efficiency.
Lesson Learned: Simplifying design elements and aligning them with user expectations leads to smoother interactions and reduced task completion times.
4. Wording and User Confusion
Insight: One of the most significant findings was how the phrasing of actions, such as "Apply the coupon" vs. "Clip deal," led to confusion. This resulted in users searching for the wrong feature, increasing task completion time.
Lesson Learned: Small language changes can have a substantial impact on the user experience, underscoring the importance of clear, intuitive language in the UI.
5. Iterative Design Is Key
Insight: Each design iteration, backed by user testing, revealed new insights into how users interact with the app, leading to continuous refinements. For example, the switch from toggle buttons to dropdown menus clarified actions for users.
Lesson Learned: Iterative design, driven by user testing, is essential for uncovering and resolving deeper usability issues.
Reflection
I’m just getting started here...
My first case study was a pivotal learning experience. It showed me that design is more than aesthetics—it's about understanding users and refining based on feedback. Working with a team from different backgrounds taught me the value of new perspectives, and I developed ways to clearly convey my ideas. While we all had the same goal, I learned to embrace diverse interpretations, strengthening our collaboration. This experience helped me grow as a designer, showing that even small changes can create big improvements in user interactions.