A UX/UI redesign of the loyalty rewards app
for a major supermarket chain.
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.
Designer
1 month
Sketch, InVision, Principle,
and Maze
The hypothesis is a pretty clear and simple one. That if we improve the user experience of the RealRewards app that it will not only drive user engagement, but it may also increase customer loyalty to the SuperValu brand.
The goal of this phase is to understand the problem, the business goals, the user, their needs and their goals. To do this, we will review user feedback on the app stores, and observe users interacting with the app at the checkout.
Review user feedback and the app heuristics.
People using the app at the store checkout.
Luckily it is easy to gain insights into what their users say about the app through user reviews. We’re interested in both the good and bad reviews as positive user reviews can also include recommendations. To add to this data, some quick observations of users interacting with the app at the store checkout will help increase the quality of the research.
customers
age
women / men
duration
1. Understanding what are the biggest problems users face when using the app?
2. Understanding how easy or difficult users find the app to use at the checkout?
3. Understanding what would make users use the app more?
4. Understanding what parts of the app users enjoy the most?
After performing user observations, app store reviews and a heuristic evaluation of the app, there are plenty of areas for opportunities to improve the overall user experience.
Customers fumbled with opening the app and trying to find their RealRewards card and often blamed themselves or their phone for this. This resulted in the cashier entering the code for each voucher which caused a delay at the checkout. Making it easier for customers to access their cards could speed up the checkout process.
Customers were unable to distinguish whether vouchers are valid or not. And causing a delay at the checkout as the cashier had to explain to the user which vouchers were valid. It’s worth noting that the cashier also struggled with distinguishing them. Ensuring that content is easy to understand and consume will solve this problem.
Most customers find it hard to navigate through the app. A lot of the features of the app are never seen or used by customers. Simplifying the UI and improving the navigation will help to make it more usable for customers.
The goal of these phases is to brainstorm ideas that will solve the problems identified earlier. And to build a prototype so that we can quickly test whether our solution will improve the user experience.
Ideas and solutions that will solve the problems.
That the idea actually solve the problems.
Simplifying the information architecture (how information is presented and grouped) so that users can navigate to the crucial parts of the app was the first task.
A tab bar will replace the hamburger menu for the primary app navigation. The app contained a lot of duplicated content, so we were able to reorganise categories to create five high-level categories instead of the previous 9. We’ve grouped “Profile Details”, “Edit Profile”, “View Statements”, “Settings”, and “Help” under a “My Profile” category.
Focussing on what is essential to the user we’ve replaced “Home” with a dedicated “My Card” category so that users have quick access to their card. We’ve renamed “Use My Points” to “Rewards” to describe the content better.
Once the information architecture was defined and tree tested, we started to brainstorm as many ideas as possible. And we created low-fidelity prototypes of how the app will look. These were used for prototyping the idea so that we could test the solution with real users and gather feedback.
Next, we went about recruiting users who matched the target audience defined earlier and tested the prototype with them. We used several tools to help in both the recruiting and user feedback. Typeform was used to survey and screen testers. InVision was used for the prototype, in companion with Maze for performing unmoderated remote user testing which helped to speed up the process.
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.
95% of users were able to directly get to the vouchers screen and tapped on a money back voucher.
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.
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.
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.
Although the user testing was extremely positive, it identified a few areas that needed tweaking with the prototype. With user testing, all feedback (the good and especially the bad) is fantastic if you can learn from it. The high-fidelity prototype was created from the low-fidelity version with a few improvements identified gathered from users.
Renaming the tab from “Collect Points” to “Earn Points” will help users to distinguish between them.
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.
The app designs will need to ensure that there is enough contrast and that it handles screen glare in bright areas such as store checkouts.
The app now opens on the user’s card. Giving them quick access to their card when they’re at the checkout. An extra addition on the screen is the ability to add their card to the Wallet on their phone.
The earn points screen now provides a greater emphasis on the action users need to take to earn points. And tapping on the action will pop open the instructions on how to earn those valuable points.
SuperValu rewards users by providing discounts from other retailers or shopping vouchers. I split these out into two tabbed areas of the one screen so users can quickly swipe between them. Further user research is needed to define which tab to show as default.
Vouchers are now easily scannable for customers with a clear valid-to date displayed. No more only entering those annoying barcode numbers but if all fails customers can still do it.
The updated profile screen now provides quick access to the user’s statements, previous rewards, help, settings, and the ability to log out of the app. Before they were on many screens in the app.
They can also edit their profile from this screen.
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. And over time the app will go through many iterations and improvements based on user data.
Click here to view the prototype.