View all blog posts >

UX Design Case Study: How I redesigned Supervalu’s Real Rewards App

July 14, 2018

SuperValu is a major supermarket chain with stores right across the island of Ireland. Real Rewards is their loyalty programme that provides exclusive offers and rewards to their customers. Downloaded by over 100k loyal customers, their apps provide a positive user experience. But there’s still a lot of room for improvement.

A mockup of the RealRewards app.
This awesome mockup is by Super Crowds Inc. https://dribbble.com/shots/3802995-iPhone-X-Mockup-Dark

Understand

During this phase, we’ll understand what exactly the problems are and who we’re solving them for. From this, we can create proto-personas that we will use during later stages of the process.

Research

I conducted three methods of research to better understand users and the problems they face when using the app.

User Observation

I began by observing users interacting with the app at the store checkout — studying the user “in the wild”. Here are the findings:

  1. Users used the app to scan their real rewards barcode instead of a physical version of the barcode. But users fumbled with opening the app and blamed their phone.
  2. Users were unable to scan vouchers when at the checkout. This resulted in the cashier entering the code for each voucher which caused a delay at the checkout.
  3. Users were unable to distinguish whether vouchers are valid or not. This too caused a delay at the checkout as the cashier had to explain to the user which vouchers were valid. It’s worth nothing that the cashier also struggled with distinguishing them.

User Feedback

Their app store provides me with insight into what their users say about the app through user reviews. I’m interested in both the good and bad reviews as positive user reviews can also include recommendations.

Real Rewards App Store Ratings
Real Rewards App Store Ratings

The Good

“Great app. I love it that it has the vouchers all in the app, I always forget the vouchers at home but i have phone with me all the time so i can still use them.”
“Handy to use and keep track of my points to get free stuff or big discounts. Love it”
“Does what it says on the tin. Phone always keeps my vouchers etc on App, no more lost paper vouchers.”
“Could never find my rewards card.now I have it on my phone. Best thing ever.”
“An app years ahead of its competitors , very easy to use , dead handy”
“Love it! Easy access to all my vouchers. Don’t have to bring scraps of paper with me any more. Also if I forget my card I can scan it in the app.”

The Bad & The Ugly

“Useless. Checkout can’t scan barcode off phone.”
“Why not add the ability to add your card to wallet?”
“App doesn’t work properly on the self-service checkout.”
“Great app but annoying promotions on push notifications spoils whole thing.”
“What point is this app if I can’t see my total points or statements?”
“It doesn’t scan !!? Each barcode has to be manually inputted.”
“Cant scan barcode”
“Can’t scan at till and points not current !!!!”

Heuristic Evaluation

Next up was a usability inspection of the app to identify any problems.

The different screens of the app.
The different screens of the app.

This evaluation identified the following problems:

  • Navigational Overload: Too many navigational items in the menu. There are ten menu items, nine of which are navigational items and one is an action.
  • Misleading Navigational Context: Parts of the app does not allow users to understand their current position within the system.
  • Poor Presentation of Information: The home screen presents a list of various content types but it’s not easy to understand the different content types. (Vouchers are mixed with messages, offers, shops, promotions, and advertisements) The same applies to how the content is sorted.
  • Inaccurate Content Labelling: The labelling of content in the app does not reflect it’s content, neither is it consistent or easy to understand.
  • Clumsy UI: The overall UI is clumsy and outdated.

Proto Personas

From the research, I created the following personas, to help the rest of the process. Meet Kathy and Margaret.

The two Proto Personas.
The two Proto Personas.

Problem Statements

From the research I’ve come to conclusion of the following problems users are facing:

  1. Users are unable to scan vouchers at the checkout.
  2. Users are unable to distinguish if vouchers are valid or not.
  3. Users are unable to navigate through the app (for instance to view their points and statements).
  4. Users find it hard to understand their current position in the app.
  5. Users are slow to access their rewards card.

Most of these problems can be solved by the following:

  1. Simplifying the UI.
  2. Improving the Navigation.
  3. Ensuring that content is easy to understand and consume.

Envision

During this phase, we’ll envision a solution to the problems our users face. Then, we’re gonna prototype and test the solution.

Information Architecture Revised

Simplifying the navigation system so that users can navigate to the crucial parts of the app was the first task.

The newly revised IA for RealRewards
The newly revised IA for RealRewards

Using Tree Testing I was able to determine the following changes to the navigation.

A tab bar will replace the hamburger menu for the main high-level navigation system in the app. This will make it easy for users to explore and switch between high-level categories.

Since the app contained a lot of duplicated content I was able to reorganize categories to create 5 high-level categories instead of 9. I’ve grouped “Profile Details”, “Edit Profile”, “View Statements”, “Settings”, and “Help” under an “My Profile” category.

Focussing on what is important to the user I’ve replaced “Home” with a dedicated “My Card” category so that users have quick access to their card. I’ve renamed “Use My Points” to “Rewards” to better describe the content.

Ideation

The next task is to quickly brainstorm ideas that will solve the problems our users are facing. The key here is quantity over quality.

I started with brainstorming navigation bar icons.

Variations of the navigation bar icons.
Variations of the navigation bar icons.
Pen and paper sketches of the app.
Pen and paper sketches of the app.

Wireframes

Now that I’ve got a idea of how the app will look, I want to create lo-fi wireframes. These will be used in the prototype.

The wireframes of the redesign.
The wireframes of the redesign.

Prototype & Test

Now I’m gonna “fake it” and turn the low-fi wireframes into a prototype. I used InVision to stitch together a working prototype that feels real enough so that it evokes an honest reaction from users. Click here to view the wireframes.

Next, I went about recruiting users who matched the user personas defined earlier and tested the prototype with them. I got them to complete the following tasks:

Where would you go in the app to view your previous statements?

42% of users viewed their previous statements by going to the My Profile tab. But the majority of users tapped on the circles containing their points (on the My Card tab) expecting it to show their previous statements. Ensuring that this is tappable will provide quick access to the users previous statements.

Where would you go in the app to claim your reward?

88% of users went to the Rewards screen to claim a reward. But a small number of these users first went to the Collect screen and then back to Rewards screen.

The remaining 12% of users expected to claim a reward on the Collect screen and never went to the Rewards screen.

Where would you go in the app to use a money back voucher?

95% of users were able to directly get to the vouchers screen and tapped on a money back voucher.

Where would you go in the app to scan your card?

The majority of users went directly to the My Card tab to scan their card. A few users did browse the app before finding their card.

Where would you go in the app to collect more points?

47% of users went to the Collect tab. Interestingly the majority of users went to the rewards tab expecting to collect more points there. Indicating that users are struggling to distinguish between claiming rewards and collecting points.

Renaming the tab from “Collect Points” to “Earn Points” will help users to distinguish between them.

Improved Design

Final version of the app redesign.

That’s it!

Next steps for a project like this would be to release, analyse, and iterate. Not to mention the design is for phones so there’s still responsive design to take into account. Anyway, over time the app will go through many iterations and improvements based on user data.

Click here to view the final prototype.

If you liked this story then you might like my monthly design newsletter where I share stories just like this one.

Once a month, I send out an ad-free design newsletter where I share the latest articles, videos, resources, and tools that help you stay in the know and grow as a designer or digital creator.

Click here to sign up.

Subscribe to "the Los Wexicanos" Monthly Newsletter

Once a month, I send out an ad-free newsletter where I share the latest articles, videos, resources, and tools that help you stay in the know and grow as a designer or digital creator.

You can unsubscribe at any time, and I will never share your details.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.