"Your Offers" is a loyalty program from one of the card providers, that gives cash back for purchases made with their card. To get money back, user needs to activate the offer of certain merchant in the app and use registered card to pay for shopping. The first version of the app was released in 2015. Since then the client has been looking for new functionalities to increase the app retention and use of payments cards.
UX/UI Designer at Agency
I was one of two designers assigned to this project. I redesigned existing mobile application to increase app retention and the use of payment cards. I worked on desk research and conducted user interviews, made UX audit of previous app, designed lo-fi wireframes and delivered hi-fi designs with full documentation. I collaborated with the client, Project Lead, Project Manager, as well as developers.
2019
The project took 8 Design Sprints from April till June 2019.
I worked in Agile Methodology based on the Design Thinking process. During the whole process, I was in contact with client's IT partner, having their support and consultation from a technological perspective, both during the design and then the development phase.
How to create a new version of the loyalty program app that would encourage users to use payment cards more frequently?
The previous version of the app didn't meet the users' expectations. The ratings in the App Store and Google Play showed that too by overall score 2/5 stars. Users were not satisfied because of the limited amount of features and not very attractive offers they could activate. Also, the merchants and categories were barely known and not popular to shop. The project goal was to encourage users to use payment cards more frequently so we obviously had to increase the number of app downloads and card registration but also increase the users retention. One of the key challenges in that project was to convince the user that giving payment card details is absolutely safe and won't be used in the future by the app. Another problem was how to encourage users to log into the app and activate offers more often.
Desk research and benchmarking was a very important point to start thinking about how other loyalty programs work and what kind of solutions do they offer. I was looking for innovative solutions and interesting ideas including for example gamification mechanism but also for such basis as clear user flows and attractive Interface.
I took part in broad research study on loyalty program users. Together with UX Researchers we focused on users' goals and motivation for using those kinds of apps.
There were 2 groups of people selected for our user personas: digital enthusiasts interested in loyalty programs and digitally conscious critics of loyalty programs with potential for change.
Business justification
Digital enthusiasts interested in Loyalty Programs
Tomorrow is the end of the offer for Grycan products, I will go with my daughter for an ice cream..
Kate, 46 years old
Digitally conscious critics of loyalty programs with potential for change
I used to use it, but I don’t anymore, it didn’t translate into value
Anne, 26 years old
After a huge amount of knowledge delivered by Research reports I could finally skip to the Design phase.
I started with the analysis of the functionalities scope we got from the client. The great start of thinking about it was the User Story Map we created on our wall and then digitalize. It helped us a lot with understanding the user flow and pick the most important MVP functions to do as first.
I turned the information from User Story map into simple wireframing and user flows.
The first proposition of selected flows and were tested on 1st Interviews with users.
During 2 rounds of users test, I had an opportunity to prepare lo-fi screens of core functionalities.
At this point, I wanted to test the interactions, app logic structure, and key features instead of beautiful aesthetic design.
1st User tests
First usability testing showed that users did not understand how the program works. They often didn’t know what kind of brand their card is. They identify their card only with their bank name.
After tests we decided to focus on fundamental parts which were:
2nd User tests
During 2nd usability testing I created the prototype in Figma with more advanced screens in the Hi-fi version. We managed to improve our prototype and add all functions and proper UX writing which were missing during 1st iteration. Those elements included:
Mobile app evaluation
Offers app before
Wireframes
New mobile app 2019
I delivered the hi-fi screens
The results and documentation of our almost 3 months work contained:
Core features
1
New feature added
- special offers visible in top section
#users involvement
#retention
2
New navigation with sorting options
#transparency
#design
#fast offers checking
#intuitive
3
Clear information architecture and accurate language communication
#user friendly
#transparent
#simple
4
Modern design and modular app structure
The look and round corners of each offers card were inspired by payment cards proportions.
#attractive
#modern
#easy to develop
Onboarding
Onboarding screens explain in a few steps how the Offers program and app works. We decided to provide clear information for the user with a single title and description below, visible on white background. Each screen has a graphic representation or animation of the described feature.
Secure card number registration
Since card number registration was one of the main pain points for the users, we decided to add an additional screen that explains why we need card number and what will happen in next step. The proper UX writing was key to success. Now the user is informed that his data is completely safe and his card number won't be visible inside the app.
Main offers list and details
To encourage the users to visit the app more often we added special offers visible at the top in the horizontal slider. For example, after activation and using 3 offers from the list, the program gives you a free ticket to the cinema! Skipping from offers list to single offer details, user see clear icons and short explanations of rules instead of a large amount of text like in previous app.
Cashback history and profile settings
We decided to focus on notifications as they are very helpful in order to catch users' attention. After getting a notification about received cashback, app displays an additional card with cashback history which links to history details.Users can also choose different type of push notifications in Profile settings.
Responsive versions
I was also responsible for providing the responsive layout working for desktop and tablet.
The new mobile app hasn't been launched.
Unfortunately we can't say much about project impact. By the decision of the client, the new mobile app hasn't been released although the engineering team has already started working on implementation back then. The first, old version of the application is also no longer maintained.
It was one of my favourite and biggest project in which I took part from early research stage to design and final delivery.
Things to remember:
