Nectar Card App - App Revamp

Background

One of my favourite grocery stores is Sainsbury’s. Nectar is their membership network that allows every shopper to enjoy discounts while shopping.
However, I found this app has some parts without intuitive gestures, such as even when something is placed on the top level and is useful for me, I never press it. I believe it might happen among different users.
This is one of the personal project cases of the seven-month UX Design Bootcamp.

My Roles

My task is to improve the user experience in the whole app.

My Design Process

Business Problems & Business Goals

Business Problems

The problem of information architecture misleading the users. They can't find the information that they want, so they give up or never know some function of this app.

Business Goals

Make sure three functions are easily accessible:
1. Sainsbury's offer
2. Partners offer
3. Nectar card-related function

Design Review

I’ve reviewed the current website to evaluate what works and what doesn’t – assumptions from my professional point of view.

These hypotheses will be the basis of the upcoming usability testing.

What Work [Y]

[Y1] - Great design system, high contrast, and easy-to-read textual content.
[Y2] - Clear and easy-to-navigate buttons.
[Y3] - Easy access to the barcode card page, serving the fundamental purpose.
[Y4] - Nectar points record is easy to find.
[Y5] - Good copywriting, users understand functions after pressing certain buttons.

What Could Be Improved [N]

[N1] - Store offer clarity (Nectar Price & Sainsbury’s offer) is unclear.
[N2] - Different levels of information on the first page (details and categories can be hidden).
[N3] - Partner offers cannot be previewed, only logos are displayed, useless for comparison.
[N4] - Data present in category & search, but landing on a similar page.
[N5] - The “Saved” tab in the bottom navigation is confusing.

User Research

I want to understand the average user’s profile based on the current customer base, and prove my & business hypotheses.

User interviews

I’ve arranged 6 calls via Zoom with different levels of users to understand whether the Nectar card serves its function or not.

Users Profile

All living in the UK.
Aged 25 – 35
4 of them didn't use Nectar Card apps before, and 2 of them are frequent Nectar Apps users.

User Research Result

I only mention those results that lead to UI changes.

0/6 = 0%

can find the Nectar Card prices as part of Sainsbury’s offer, even though that’s on the top of the page.

6/6 =100%

Would not press the partners one by one to see the partner’s offering from Nectar.

Suggestions 1

Clarify the No. on the top left corner

Suggestions 2

Clarify how's the Nectar point coming from

Suggestions 3

Provide filters on the partner’s offer page

User Journey Mapping

Reconsider the information architecture.
- I found there is too much information on the homepage so some of the information cannot be found.
- The navigation bar can be utilized as shortcuts & categorization.

UX & UI Design

Homepage & Navigation

I applied the logic from the user journey mapping to the UI.
After we put the gesture to the navigation, users no longer have to scroll the ultra-long homepage to land on three major functions: Nectar Card Functions, Sainsbury’s Offers, and Partner’s Offers.
However, I did move something that is proven as “work” in the usability test. I need to re-test those in the preference test.
Understand some of the users might have the habit of browsing on the homepage, therefore, I reserve the card tile, offer tiles and offer highlight tiles as a promotion.

Partner’s Offers

Provide filters & sort on the partner’s offer page.
Provide rewards indicators to let customers sort and move on their reward-finding journey.

Points Records

Changed the wording “Activity” to “Points Records”
Adding the spending at the bottom of each record to let the user understand how the points are gained.

Prototype

To let the user have the actual experiences on the app interface, I prototyped both layouts in Figma.

Preference Testing for Revamped Layout

I handled my preference test in the Maze platform.
I successfully invited 8 testers to join this preference test.
My test is divided into 2 parts:
- Revamped layout/ prototype based on the user research result.
- “What work” changed based on the change in the new user journey. I needed to make sure what was working would still work.

Preference Testing for “Work” Validating

I handled my preference test in the Maze platform.
My test is divided into 2 parts:
- Revamped layout/ prototype based on the user research result.
- “What work” changed based on the change in the new user journey. I needed to make sure what was working would still work.

Business Goals Review

Make sure three functions are easily accessible:

Sainsbury’s offer
- Preference Testing Pt 1, from 0% to 75% success rate
Partners offer
- Preference Testing Pt 2, 100% choosing the revamped interface
Nectar card-related function
- Preference Testing Pt 3-6, proven 100% direct success

Project Review - How can I do better next?

Preference Test – Review 1

In preference test No.1. Although there was a 75% success rate. However, while I see the line record, all of the misclick rates are coming from the same tester. I might need more testers to confirm my interpretation of this result.

Preference Test – Review 2

In preference test No.5, I found there was a high misclick rate. From the heatmap, I can see plenty of testers trying to click on the total points directly. I will try to add a direct link to points records on the total points records.

No. of Testers

This is one of the personal project cases of the seven-month UX Design Bootcamp. For my preference test, I just covered it with eight testers. If my tester no. reach 20 people, it might help me to uncover more problems and increase the trust level of my studies.