U X R E S E A R C H P R O J E C T
The Project
After launching the product as an MVP, the first round of research was on the agenda.
Its aim was to improve the product and get to know the user base in reality:
who are our users, what drives them?
How can we improve the product to optimize the interaction & experience?
The Product
The product is a responsive web application based on Open Banking. Similar to a loyalty platform, users can receive Cashbacks by making purchases online and offline. All that users have to do is to activate the desired deals and go shopping as usual. By being connected to their bank account, the program recognizes the purchases autonomously and the Cashback goes straight to the wallet.
The B2B2C product is available as a White-Label solution with its own branding. For example as in this project for Comdirect with “make a deal”.
The Problem
People who want to save money in their daily lives need a simple and easily accessible cashback solution that doesn't require them to carry around lots of extra cards. Does our product really help them do that?
Tools
Figma
HotJar
Microsoft Teams
Slack & Jira
Approach
To get an impression of our users, we first looked at quantitative data and click flows. Then we developed new features and got in direct contact with our users to conduct usability tests.
Target group
We had 4 personas before launching the product. The goal was to get to
know our real user base
Role
UX Designer & Researcher
Alongside with 2 more designers
Time frame
2 months
May - July 2022
01 | Observation and analysis
In a first step, we tried to investigate our user base by analyzing potential obstacles with the newly launched product (MVP - Minimum viable product).
To do this, we looked at data and click flows of users that were collected via HotJar.
HotJar is a tool that uses heatmaps and users click recordings to better understand the users and their behavior.
By analyzing the recordings, we quickly found out that our users had problems using the filter system correctly.
As there were countless deals on the main page and the filters took up a lot of space, the filters played an important role and needed an upgrade.
02 | New filter & quick testing
To ensure that our users find the deals they need, we designed a new filter logic in 3 designs, with the filters clustered into meaningful groups.
The 3 filter designs were tested in a quick internal usability testing round with 5 test sessions. The testing showed that users felt most comfortable with version A and that the design offered the best overview of the various filters and provided good direct access to them.
03 | Recruiting users for testing
To attract users who were willing to take part in the usability tests, we put a “Contact me” deal online, which offered users an incentive in the form of a direct cashback and in return gave us permission to contact them.
As part of the contact me deal, we conducted 25 short telephone interviews to obtain initial feedback on the product and to gain participants for a more extensive testing round.
The initial feedback included:
After these first insights we were also able to recruit 11 participants from the interviews to take part in more extensive testing. Thus we elaborated the new filter function and created a highfidelity prototype, ready to be tested.
04 | Usability testing
We started this usability testing round with 4 main research goals:
Deriving from the goals we clustered the testing into 3 parts:
First - testing the live product and gaining general feedback
Second - testing the new prototype with the new filter logic
Third - demographic data
The usability tests were carried out via Microsoft Teams and the sessions were recorded with the users' consent. The prototype was provided via Figma.
05 | Analysis
All usability tests were recorded, transcribed and the findings clustered with the help of a collaborative and extensive Affinity Map. (Screenshot)
This was the first time we got to know our users and with the help of demographic data we finally had a first represantation of our user base. Of the 4 personas we worked with before the launch, one Persona in particular was confirmed.
With the data in hand the User Persona could be updated.
Also the results confirmed the previous insight, that a new filter system was wished and needed by the users.
06 | Iteration & quality assurance
With all the insights collected, clustered, discussed and evaluated, we iterated new designs, updated the prototype and did quality assurance through internal testing with 5 colleagues. This led us to a new improved product designs, ready to be implemented.
Profile picture
Insights revealed that users liked the option of accessing their personal data via a separate click in the top right-hand corner, as they are used to this from other products.
However, users did not like the concept of a profile picture in connection with a cashback product. 10 out of 11 users would not use it.
This is why we decided to remove the profile picture with a simpler icon design, which shows the users their status if they are logged in or not.
Search function
When we asked users to search for a specific deal, there was no single way the users approached this task.
Yet the results showed, that in order for the search function to develop its full potential, it needed to be closer to the other search options of the filters.
This is why we included the search function
in the filter bar.
Users also mentioned that the search screen is too cluttered for a simple search, which is why we streamlined the design. This was well received in the internal quality assurance test round.
Sorting function
The sorting function for the deals was very well received by our users as a new feature. However, the results showed that the sorting icon should be placed closer to the deal list itself.
It was also noted that a CTA was missing to confirm the sorting, which was a huge usability issue. In this context, we also placed the exit option closer to the selection inside the popup window to make the sorting function complete.
Category filter
The new grid design of the category filters was liked by the users.
The personalized design of „recently used“ categories was accepted by some, but others were bothered by the duplication of categories and therefore the crowded screen.
Thus we decided to exclude this option to enable a lean look and better functionality.
Brand filter
The brand filter was well noticed by our users, but the users gave feedback that the section „recently used“ has no meaning for them.
They would rather like to have their favorite brands placed here, and have the option to either show or hide them.
Deal filter
The deal filter performed well in the testing, but users had major problems understanding the individual deals correctly.
Therefore we designed an information overlay that users could access by clicking on an info icon on the deal filter page. This way users get the information they need in order to understand the different deal types.
In a last step all the icons of the
reward and deals types were updated in order to have a consistent and easy to decode design language.
07 | Summary
The research round not only revealed demographic data about our users and brought us closer to understanding them.
It has also enabled us to improve the filter function to make it easier to use the product and search for individual deals.
This brings us even closer from our published MVP to a complete product with improved usability.
With the help of our users and their valuable insights, we have come one step closer to our goal of offering a meaningful and streamlined product experience.
