Safeway

Safeway users struggle with applying digital coupons while shopping. I aim to smooth their navigating experience intuitive, allowing them to enjoying deals with delightful minds.

Safeway Flow re-design

Timeline

Sept. 2023 - Nov. 2023

Type

Application (iOS), Self-initiated

  1. Conducted Survey and user interviews to find out the in-depth pain points of users.

  2. Created wireframes and prototypes that align with both user and business goals and express design principles.

  3. Designed animated components and prototypes to perform usability testing and iteration of the design based on feedback.

  4. Usability testing average 70% of finding buttons for initial action to apply digital coupons.

  5. 100% preference on redesign main page

  6. 75% re-directed performance with animated components

What I accomplished

Problem arise

My curiosity was triggered when my husband struggled for 15 minutes to apply a digital coupon to get ice-cream at Safeway. After that, I started observing customers at Safeway when we went to the store. One day, there was a customer in his 60s complaining about not finding a way to apply a coupon, and the casher applied the deal from the paper ad she was having right next to her. I asked her if it happens often. She said, “Yes, I get a lot of questions about digital coupons and I have to explain how to use it.”

Research 1 -survey

I conducted a simple survey within our local Nextdoor community, considering it’s a place that our neighbors are actively involved.

In order to get optimal response rates, I focused on shaping a question to ensure easy of answering.

60 people participated and shared their thoughts. The result was different from what I expected it to be. There were only 13% or difference between the digital app being intuitive vs difficult.

I looked into comments on my post along with the reviews on Safeway App store in order to look into feedback from users. One interesting thing was that users who were positive on their experience highlighted the benefits they gained from using the digital coupons, not its intuitiveness, while dissatisfied users pointed out their inability to use it. This made me think of a phycology term called “Cognitive Dissonance Theory” as they may have initially experienced discomfort with the interface but eventually downplayed it in light of the significant benefits they enjoyed.

💬 I love extra savings.
💬 Save save save!
💬 Great savings!
💬 It didn’t work.
💬The barcode doesn’t work 1/2 the time.
💬Barcode scanner didn’t work.
💬I take a screenshot of posted label with code and show to checker.
💬Certain items didn’t reflect the price promised.

Research 2 - User testing

After analyzing user feedback from survey, I found a 13% difference (8 people) between positive and negative experiences with the current app flow. While acknowledging the importance of each users’ opinion, I had to consider the limitations of resources and efficiency. In order to gain a deeper understanding and identify clear users’ pain points, I decided to conduct in-person testing

I interviewed 6 participants, who have not used Safeway app in the past. Below are the most valuable insights gained from user testing:

1. 🔍 5/6 users struggle finding barcode scanner on the home screen. Despite of age difference, most of the users expressed the inconvenience of finding the button.

2. ⚡️ 100% scanned the wrong same barcode as their first attempt. After finding the scanner, there was another hurdle for the users. it was to find right barcode to scan in order to apply the coupon deals.

3. 😕 50% of users mentioned in the first place how design elements were too small. Especially for two elders in their 60s had to adjust their glasses as they were looking around the main page.

One user mentioned avoiding digital coupons, even when they offer savings, due to usability issues. This quote reveals that the evaluation of discount value against the inconvenience of use is a shared concern, not exclusive to my experience.

Problem define #1

Before

Users couldn’t find a scanner easily in a non-store mode, which is automatically set for those who don’t agree on location service setting.

🔴 Pain points #1 :

Considering more than 60% of iOS users don’t want to turn on their locations, it became apparent that a re-design of the homepage screen was necessary to enhance its usability.

The main page gives the impression of being from complex and outdated because it contains too much information at once. The font and icons are too small, making it overwhelming and hard to understand its purpose.

🔴 Pain points #2 :

After

I initially updated the scanner icon used on the button. To ensure users easily recognize the button’s purpose, I refined the button image to make it appear more realistic.

⚪️ Solution #1 :

I concluded that establishing a clear hierarchy would be a highly efficient solution to facilitate easy navigation for users — especially in locating the scanner button. Recognizing that users may find it overwhelming when multiple elements are cramped onto one page, I enhanced the user experience by increasing font sizes, refining icons, and introducing 3 main buttons by adding primary color. This approach allows users to naturally follow the sequence of key buttons in order, minimizing confusion and overwhelm.

⚪️ Solution #2,3,4 :

Problem define #2

Before

🔴 Pain points #1 :

Users experienced uncertainty about which barcode to scan while on the scanning screen, as they encountered three different barcodes: two on the price tag and one on the product. Surprisingly, all users initially scanned the barcode on the digital coupon — that was on the price tag. It wasn’t the correct one for applying coupons. This particular barcode leads users to the app store instead.

After

⚪️ Solution #1 :

My primary focus was on re-designing the paper digital coupon by replacing app installation barcode into product barcode — considering the speed of users to apply the code. However, after reflecting on Safeway’s intention, it was likely that the designers placed the installation barcode in its current location for users who don’t have the app and maybe unsure where to start.

I instead decided to enhance user guidance by adding a short animation on the scanner. As indicated in the testing result, compared to the previous version, users quickly grasped what actions they needed to take to reach the goal of applying coupons.

Usability testing

Test Intro

A usability test was performed once the re-design prototype was completed. This allowed me to identify improvements made compare to the previous version as well as any areas of opportunity. This test helped me to determine if it is helpful for customers who buy products, using digital coupons over the phone.

I used three different method in this user testing: Card sorting, A/B testing, and Performance testing. Each method was chose based on what I wanted to see from users.

Scenario

You went to Safeway to get this salad dressing, and you need to apply deals that Safeway offers. You can use my phone to navigate this task.

What I have found from this testing

👉 Users described the re-designed main page as easy to use, eye-catching, and attractive. One user even mentioned feeling a sense of “high quality” from the page.

👉 The average time for users to locate the scanning button significantly improved, decreasing from 30 seconds to just 3 seconds (10 times faster). However, two users mentioned that the floating button on the side felt unnatural despite the improved speed.

👉 Users demonstrated improved recognition of what to scan after viewing the animation prototype introduced in the re-design.

The results from usability testing were utilized to make improvements to my re-design. The final design was created with careful consideration of user feedback, needs, and pain points from research. A key aspect of this design iteration involved addressing the user discomfort associated with the floating button — scanning button. I determined that the discomfort stemmed from a confusing hierarchy between buttons.

Making revisions

Scanning button was in the same visual hierarchy as CTA buttons. Having two main buttons in one page confuses users.

The use of distinct colors on the buttons not only signifies their different functions but also communicate the unique characteristics
of each.