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 was the first task.

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 “” to better describe the content.


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.
Pen and paper sketches of the app.


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.

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 enough so that it evokes an honest reaction from users.

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

Your rewards card

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.

It also tells them how many points they have accumulated and the number of tokens they have. Along with their latest transactions.

Earning points

The earn points screen now provides a greater emphasis on the action users need to take to earn points.

Tapping on the action will pop open the instructions on how to earn those valuable points.

Being rewarded

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.

I would confirm which tab to show as default should with future user interaction data. But for now, I went with the discounts tab.

Vouchers are now easily scannable for users. No more entering those annoying barcode numbers.

Managing your profile

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.


At this stage, I would stitch together the designs in a prototype so that we can get further feedback. I will use the prototype during the handoff to the developers who will be building the app.

Source link


Please enter your comment!
Please enter your name here