A user-centered-design new Video Feature for Tikkie. How to fit a new feature into a highly adopted mobile payment app.
This case study is about how to incorporate a new feature into a highly adopted mobile payment app like Tikkie, solving user’s lifestyle challenges with Augmented Reality to learn how to fit a new feature into an already existing product. The biggest struggle was to turn a challenge into a learning, keeping the focus on user-centered design. What will you do when you get asked just to introduce one specific feature but the user wants even more than that? My focus was finding out how this new video feature could be a solution for current user problems, keeping in mind the importance of respecting the current app functionality and navigation patterns for that purpose.
The Brief
- You are joining Tikkie’s awesome UX design team to work on a new challenge (this is a fictional brief).
- The feature to develop will be based on an area of functionality to be explored and compared to user input.
- The work will culminate in a high-fidelity prototype of incorporating a new video feature into the existing platform based on user needs.
The Challenge
“There is a challenge to add a new video feature for the Tikkie app…..
For this challenge I gotta get to work alone with only 2 key words randomly assigned: Video feature and the Tikkie app!
Wooohooooo!
At the beginning this sounded to me like I won the lottery, but to be sure I need it to know more about the desirability for this feature, so I started doing research to find out actually how I could incorporate a new video feature into Tikkie’s platform based on user needs, iteration, and testing.
So, first important details first. What is Tikkie about?
Tikkie is the first payment app in the Netherlands allowing consumers to send payment requests via WhatsApp.
The app processes requests through the familiar payment platform iDEAL.
Tikkie is an initiative of ABN AMRO, but can be used by clients with a current account at any Dutch bank.
How Tikkie works?
Tikkie works very simply.
The requester enters the amount on Tikkie and then selects a person from their WhatsApp contacts from whom they wish to receive a payment. The request can be also shared via other social channels or via a QR code.
So, Tikkie creates a link that can be sent with a WhatsApp message. With just one click on the link, the person who receives the message is directed to the iDEAL payment environment and proceed to do the payment.
An unique feature of Tikkie is that the user does not need to create a new online bank account or separate e-wallet in order to receive payments. The money is automatically credited to their existing current account.
Also, the Tikkie app can be downloaded for free. The recipient of the message does not need to install the app first in order to respond to payment requests.
What are actually the users doing while using Tikkie?
User Research:
To quickly learn about current users, I did some guerrilla interviews with them and also checked all (more than 30) Tikkie reviews of the app on the Apple store.
Findings
Based on the research findings we can say that on Tikkie’s platform basically users are struggling with the following pain points and frustrations:
- To be constantly filling in different amounts and figuring out calculations to create request payments to be able to send it to different friends.
- To have a poor overview of the current Tikkie requests sended and the contacts.
- To be checking and trying to find out manually on the WhatsApp platform who did already pay a request and specially who still has to pay it!
For Tikkie we are going to introduce this specific video feature but it seems that the user wants even more than that!
After analysing this data we can say that:
“We are finding users are having struggle to figure out who pays what and to make self the amount calculations to split a bill with friends”.
Following the design process, I started creating the target persona to have a clear picture of who are the users, what are their goals and be able later to discover about how this new functionality will change their behaviors.
Persona
After finding out how this video feature can be a solution for current user problems. Following the design process I putted these understandings into a:
How Might We Statement…
And a Problem Statement…
“There is an opportunity to incorporate a video feature on Tikkie because this can help users to split a bill easier and faster with their friends”.
The Inception
So, we aim to develop a feature to get a digital receipt to split amounts instantly!
Solution Description:
An Augmented Reality feature to be able to scan the data and digitize a paper receipt.
Goal:
To scan an existing receipt to make it digital, get instantly the relevant data, like amounts and calculations, to split the payments fast and easy with your friends.
Getting technical:
It is a video feature solution with Augmented Reality.
- The main goal is to have developed receipt OCR for Tikkie.
- To extract data from receipts.
- It works with video text recognition, also known as video OCR. OCR is a constructive tool to characterize the contents of video, containing overlay and scene text.
The Value Proposition
I like to use the Value proposition canvas to understand and focus on what jobs the product would be able to hold.
And what could Tikkie users do with this new video feature?
To have that more clear I started thinking about how does the assigned scenario fit into our user persona day-a-like and to understand the job our product is hired to do. Therefore, I followed the User Stories and Jobs-To-Be Done framework.
User Story:
- “As a Payment Requester, I would like to have instantly a calculation from the paper receipt to split a bill fast with different friends.”
Job Story:
- “When I’m creating a Payment Request on Tikkie, I would like to have a digital receipt from the paper one, to split a bill fast and easy with different friends. ”
Jobs-To-Be Done (JTBD) framework is so powerful to communicate the value of the product.
User Flow
So, to tell you about how the new feature fits into the app navigation, I can show you in the following diagram the key new tasks the user needs to complete within Tikkie in an user flow:
One of the most challenging things that got me thinking a lot during this project, was about how the new feature was affecting the navigation and all the changes that this involved. I specially learned how and where lies the difference between doing a re-design and just adding a new feature for a current product.
I did struggle at some moments with being focus on secondary tasks instead on the main one. But I did took that challenge and turned it into a learning.
To tell you more details how the video feature changed the navigation and the decisions our users are making. I like to put this and explain it in the following way:
The current navigation:
On the current overview page there is an add button where users have the option to add and sent manually a Tikkie payment request. The green button on the right down corner only allows user to add manually a Tikkie request payment.
What I added to the new navigation:
Introducing the new video feature. We now allow the user to choose from two options on the overview page: Or to scan a receipt to sent a request payment or to add manually a Tikkie request payment as usual.
Goal 1: Allow user to select new feature.
Goal 2: Allow user to scan and create a digital receipt:
Description: User can use the mobile camera to take a photo or a video of the receipt, the video option is specially handy for long receipts. Then the information gets transcribed and user is able to have a digital receipt version from the paper one.
Scenario: User gets a digital receipt and wants to share it with friends.
Outcome: There is a digital receipt to be shared with friends. In the current navigation user does split the amounts manually, therefore following the same flow, the new feature can also do the job to split the receipt for the user.
Goal 3: Allow user to split payment amount evenly and unevenly with different friends.
Description: User can split payment amount before sharing the digital receipt.
Main Scenario: When user gets a digital receipt and wants to share it with friends on WhatsApp, the user is allow to split this amount before doing that.
Scenario 2: There is the option that user wants to split the payment evenly.
Scenario 3: There is the option that user wants to split the payment unevenly.
Outcome: There is a payment amount to be split with friends. When the user wants to split unevenly the amount, the new feature can allow user to ask everyone to pay back certain amounts. (This last outcome got me thinking on adding another solution, but I will show it to you at the end and I would explain to you why).
Goal 4: Allow user to save and overview the digital receipt after user sent and receives a payment.
Description: The user wants to overview the digital receipt after user sent a request, gets a notification and receives a payment.
Scenario: When the user send a Tikkie request payment using the video scan feature. The user also wants to save the receipt and have an overview when the user receives a payment, to manage who has payed what and which request is still pending.
Outcome: There is an option to check more details related to each payment request on the overview page, where the user is allow to see more info at the “more info page” and find back the digital receipt for each transaction.
Guide with Atomic design
In order to respect navigation patterns and fit a new feature into an already existing product, I did create a library in Sketch with different UI elements:
Color Palette, Buttons, Typography, Icons, and other components.
For creating this library I followed the Atomic Design principles. Atomic design is a methodology that involves breaking a website layout down into its basic components, which are then reused throughout the site and it can have big benefits for your workflow.
The Prototypes
Hi-Fi prototype
Next steps and the extra mile:
The focus of this project was about just adding a new feature into an existing app. Video feature on Tikkie.
What do you do when you get asked to introduce a specific feature and you realise that the user wants even more than that!
Along the way I discovered during the research phase and during the design process other user problems and design opportunities that would complement very well the functionality of the new video feature.
So, just imagine that I got hired from Tikkie to solve this specific user problems and how well it would complement the video feature.
This is what I would do:
- I will go further with a solution flow that includes an interactive receipt. This solution would work with the new video feature and would allow user to scan and recognise products with augmented reality in order to create a digital interactive receipt, so the user is able to overview images of the products on it.
Going dutch!
There is this saying for a reason and our dutch Tikkie app also knows it!
We are proud to also introduce this feature to all the dutchies who count on every penny.
For example if there is a payment amount to be split with friends, we can allow user to ask everyone to pay back from the list exactly what their consumption was.
A feature that allows user to select and link each product listed on the receipt to a friend list. When the receipt is shared each friend can see exactly what they have to pay to the payment requester.
Result screens:
And remember those important research findings about the users struggling with a poor overview of the current Tikkie requests sended and the contacts. Specially the frustration to be checking and trying to find out manually on the WhatsApp platform who did already pay a request and specially who still has to pay it! So, the following mockups would be a solution idea to improve the overview page.
Result screens:
Lessons learned:
- The new video feature solution got very well accepted among users because of the convenience of the functionality.
- There are a lot of room for improvements in the app and from research I found out that there is an opportunity for adding more features to solve other very important user problems.
- This project was more challenging than I had expected but at the same time it was super helpful to learn how to fit a new feature into an already existing product and the importance of respecting the app functionality and navigation patterns.
- I specially learned how and where lies the difference between doing a re-design and just adding a new feature for a current product.
- I did struggle at some moments with being focus on secondary tasks instead on the main one. But I did took that challenge and turned it into a learning.
- Testing is the most important part of the design process. Move fast into the testing process.
Thank you so much for reading and making it till the end!
