Project Background: Pluto Pay

Pluto Pay is a mobile payment app that aims to provide a better online banking experience by allowing people to shop, transfer money, and more without a debit or credit card or the need to visit a physical bank or store.

This was created as part of my UX Immersion course at CareerFoundry. I designed this project from Initial Research, Ideation to High Fidelity Prototypes.

ROLE: User Researcher, User Experience Designer, User Interface Designer
TIMELINE: October 2020- May 2021
TOOLS: Paper and pencil, Figma

View Prototype

-01-
DISCOVERY

Research

What problem am I solving ? What are my user needs and wants? How can I understand my users?

Initial Research

Understanding the market

Mobile banking is something most people are familiar with nowadays. It is important to understand the overall mobile banking industry and our competitors. We want to have a better understanding of who uses mobile banking the most, what payment method our users prefer and the future of mobile payment apps.

Statistics and facts

What does it mean? 🤯

💻 Mobile payments are no longer optional for Gen Z and Millennials

One survey found that 70% of millennials use their smartphones to pay for goods and services. They are more willing to explore technology-enabled payment methods that are built into the apps. Making mobile payments online and through their smartphone isn’t new, with many consumers using digital wallets as their primary holding place for financial products.

🦠 The COVID-19 pandemic has accelerated the adoption of digital  payments

According to the study by payment firm FIS, the COVID-19 pandemic is driving the consumers in many countries towards digital payments and mobile banking. The study also shows that around 31% of participants would prefer to use mobile payments and contactless payment methods instead of cash due to the COVID-19 pandemic.

📲 The rise of QR Codes as a payment tool

Driven by the pandemic, the QR payment trend has grown rapidly this year. Recent research concluded that customers across the UK and Europe are relying more on QR codes. The main advantage of using it as a payment tool is that QR code can be generated by a merchant for the purposes of processing payments or sales. and accepting payments is as simple as aiming a smartphone camera at a displayed QR code.

Secondary Research
Competitive Analysis

To get a better understanding of our competitors, I needed to research potential competitors on the market. I initially analysed Paypal for the competitive analysis. This gives me an idea of what my users are in need of and to better understand my competitors' strengths and weaknesses in comparison to my own and  find a gap in the market.

Our goal

Our goal is to determine what challenges users are facing and we want to focus on our competitor’s weaknesses, detect frictions experienced by users and enhance the online mobile banking experience.

Target audience

The mindset of our target audience is someone who wants a tool that helps them to manage all their transactions by just using one app, instead of using different applications for different banking activities. Our objective is to help users to manage their personal finances in one place effortlessly.

Identifying my participants

User Interview

Based on my Initial and secondary research, I'll focus on Generation Z and Millennial as my potential participants for the user interview.  

To begin, I drafted 3 research questions about the mobile payment app experience.

😍 What are our users' opinions on the existing mobile payment or banking apps


💪 What motivates and concerns our users when making an online transaction


😫 What challenges are users facing while using the existing mobile payment app

What's next? 👉

I arranged an interview with 3 participants who are mobile payment app users. I focused on receiving feedback on their experiences with the existing mobile payment apps to gain a better understanding of their goals, frustrations and needs.

Key findings and insights

The result that I found through the interviews was that most of the users are always unsure if they are sending the payment to the right person.
Need: People want to be able to make sure they are sending payment to the right person.

We all have been there, you know how it goes. Splitting the bill can be a source of conflict among friends. The most common way of splitting the bill is to ask one person to pay the bill and have others to pay back later. It is simple but it does take trust. But what is the best way to pay your friend back immediately without asking for their bank account number, sort code etc?

Need: People want an easier way to split bills with friends

The common result that I found through the interviewers was that they believe mobile payment apps should provide a digital wallet feature so that they can manage their finances in a single app.
Need: People want a wallet feature on mobile payment apps.

Designing for my users

University student and Young working adult are the demographic groups who are most likely to adopt mobile payment apps.

To make it more precise, I will create a user persona that represents both of my potential participants that includes their characteristics, needs and goals.

User survey

In the next step, I conducted a user survey to understand their needs and goals and to identify the challenges they are facing while using the existing mobile payment app. I surveyed a total of 34 mobile payment app users.

Link to survey

Survey results

What did I learn from the survey? 🧐

Paypal is the most famous payment app in the market, the majority of the users surveyed have used or heard of it. They are satisfied with Paypal and would continue to use it.

Most users would prefer sending payment using a mobile payment app, instead of cash, cards or other payment methods.

80% of users would find it useful to have a digital wallet feature on a mobile payment app, the reason is because they want a quick way to pay for online purchases and shop in stores.

User Persona

I have created a user persona, which I created based upon my research in order to represent the the user that might use my product. This persona will be used to ensure that I am designing for the users.

Let's meet James 😍

-02-
CONCEPTING

Defining the problem

What exactly is the problem I need to solve? What are the solutions out there to solve my user pain points?

Problem statement

Our Pluto Pay users need one place to be able to transfer money, shop online and in physical stores because they want a convenient way to pay other people without using physical card or cash.

Ideation solutions ✍🏻

I started defining problems and brainstorm some possible solutions.
How might we help James to ...

Time for brainstorming...

I defined the problems and solutions and listed down some possible solutions.

Identified Solutions

1. Allow users to quickly transfer money to friends using QR Scan.

2. Allow users to search for other users on Pluto Pay by their username or contact number to make a payment.

3. Include a wallet feature on Pluto Pay

Information architecture

This process is the most important part to decide that how the information is defined and accessed on the app. After understanding the problem , It is time to decide on the information architecture of Pluto Pay by creating a site map. I have identified the key features and structured the contents of the app in a proper and easy way for users to understand.

Site map

Sketching Low Fidelity Wireframes

I started with pencil and paper wireframes and created a multiple version of each screen. I mapped out the shell of the interface, its screens and basic information architecture.

Mid Fidelity Wireframes

Once I had the paper prototype, I moved on to adding more details to clearly visualise the features of Pluto Pay on Figma. The key features are Transfer, QR Scan and Wallet.

-03-
PROTOTYPING & TESTING

Usability testing

How do I validate the solutions to the problems I've identified? Will it solve my user pain points? Will I discover new solutions to existing user pain points?

Testing wireframes

Usability Testing

The mid fidelity wireframes were turned into a clickable prototype. I have conducted a usability test to test the features and functionality needed to complete the important tasks on my app. The goal of this phase is to understand if the features and overall purpose of our app are in line with what users want and to identify if there is a room for improvements.

How am I going to conduct a Usability Test? 🤔

I will be conducting a remote moderated usability test on Zoom with 3 potential users. I will ask them to complete key actions within my app and ask questions related to each scenario to uncover insights into their thought process.

Affinity Map

Affinity map was used to gather valuable feedback and key findings from our users. I have organised the findings into groups based on their relationships.

Rainbow Spreadsheet

I have observed the participants during the usability test, I was able to record behavioural patterns presented by research participants. I gathered my findings and recorded it on rainbow spreadsheet to help me to prioritise issues to address.

Issue To Address

1. Users are having trouble with accessing to their recent payees quickly.

2. Users did not understand how to split bills using QR Scan. They believe there should be a feature specifically for bill splitting.

3. Users expected to have a way to make a payment without using their actual debit or credit card.

You got it right. The next step is Iteration! 🤩

I have made some changes on my design based on the user's feedback. The next step would be taking what I have learned from the user testing and amend the design.

01- Key insights-

People want an easier way to access to their recent payees

02- Key insights-

People think QR scan is not the most efficient way to split bills

03- Key insights-

People want more than just an ordinary Digital wallet.

Design Iterations

I have identify 3 main errors to be addressed based on the evidence from my usability tests and rainbow spreadsheet. This is the suggested changes to my prototypes to address the errors.

Design Evolutions

It is important to review each asset and reflect on the iterative aspects of Pluto Pay. I will be explaining how my design has improved over time and what I was able to learn through prototyping and user testing.

Home page

The main changes would be the styling and colour scheme. After reviewing the findings from the usability test, I determined that I would visually treat Available Balance section differently as viewing balance is the most important thing on the home screen. I want to visually highlight it from the content, so it stands out from the recent activity and financial goal. Further changes were made to the font and background colour to pass the Contrast Checker test. 

Transfer screen

The layout of the Transfer page has changed significantly. After gathering some feedback, many users have reported feeling “empty” with seeing only a search bar on the Transfer page and they would prefer to be able to have a quick access to their recent or favourite payees. After the initial round of sketching and prototyping, I determined that I would move the search bar to the very top and the have all my favourite payees at the bottom and so when users try to search, it will take them to the next page with a list of searched users.

Search for a user

This page has undergone substantial changes. In the beginning, I wanted to have the search bar and available balance on the same page. After receiving some feedback from our interviewees, I determined that it would be a better idea to create a new screen to give users more freedom when trying to search for other users.

Review

The main changes would be the layout. In the beginning, users had to go through 3 steps (search for a user, enter an amount, review) before transferring money to a person. I determined that I would reduce it to only 2 steps and added a “Swipe to send” slider. I found this to be more convenient and secure as users would need to slide across the screen to make a payment which would avoid accidental button press.

QR Scan

Based off the affinity maps, I uncovered that it would be the best to add a “Help” button on this page to assist users if they get stuck or need further assistance. Significant changes were adding a Split bills feature which allows users to split bills easily.

Enter an amount

Some changes were made to this screen to make it more visually appealing to users. Based off the feedback from our users, I uncovered that it would be better to display user’s avatar on this page as it would remind the payer who they are sending the payment to. I found this to be more logical as now users would have a bigger tap area and have beneficiary’s avatar displayed on the same page.

Wallet

The wallet page has stayed mostly the same since its first iteration. One notable change was adding a “Pluto Pay” card. Every user will have their own Pluto Pay card in their wallet and they can use their app balance to pay in stores rather than their actual credit card. That is something payment apps don’t allow users to do and it would make this app stand out. Alternatively, users would still have the option to add their actual debit or credit to their Pluto Pay wallet.

Payment successful

A few changes were made after reviewing findings from user testing. In the beginning, I wanted it to only display a message that tells user that the payment successful. During testing, there was some confusion about how user will be able to prove a transaction. With this in mind, I determined that it would be better to add a payment successful message with the transaction receipt. Users will still be able to come back this screen if necessary. 


FINAL PRODUCT

Solutions 🥳

Pluto pay is a mobile payment app that allows you spend, send, receive and track your spendings, all on one app.

Click for Interactive Prototype

High Fidelity Wireframes

Reflections on iteration process

After conducting usability testing, there are questions about how to make Pluto Pay stand out from other apps like Venmo or Apple pay.

Questions such as : 


1. What would motivate me to use Pluto Pay when I make a purchase in store? How do you compete with other payment apps?

2. Do we get anything if we top up Pluto Pay balance to pay our friends?


I would focus on developing a Reward section, allowing users to earn cashback when they make a purchase or transferring money using Pluto Pay. Cashback will be deposited into their Pluto Pay balance. I believe this would be a valuable feature which would keep users motivated to use our app.

Copyright © 2021 Nicole Lee. All Rights Reserved.