PLUTOPAY MOBILE APP
THE NEW WAY TO TRANSFER MONEY
PlutoPay is a digital mobile financial services application that provides instant spending notifications, money transfers from your phone and keeps track of all your bank accounts in one app.
PROJECT OVERVIEW
The new way to transfer money.
The world of buying and selling has changed—more and more transactions happen online without the need for a physical bank card. The amount of online sales and transactions is and has been steadily increasing, consumers are subscribing to a multitude of online services, and high street stores are closing in large numbers.
There are many factors that make online purchases favorable, from cost and convenience, to security, to name but a few. This e-commerce trend has been catalyzed by the global coronavirus pandemic in 2020, forcing many people to stay inside, wary of going to the store and of using their physical cards to pay for items.
With it, this trend has brought forward the problem of how to make purchases securely and efficiently. How can your banking and card details be stored in one place? How can this same tool be used to make transactions or transfers in online stores and overseas? What’s important to users when buying online?
The Challenge
Build an application to allow anyone to shop, transfer money, and more without a debit or credit card or the need to visit a physical bank or store.
The Outcome
PlutoPay is an all-in-one mobile payment services application that allows users to transfer money digitally, view spending history, and to keep track of multiple bank accounts.
Project Scope
End-to-End mobile app
My Role
UX/UI Designer
Tools
Adobe XD, Adobe Photoshop
Duration
October 2020 - May 2021
Note* This is a conceptual mobile app, PlutoPay is not a real company.
THE PROCESS
Empathize - 01
MARKET RESEAERCH
The first phase of the process was conducting research on the fintech industry. During this phase, I began to understand what users are currently using in the market and who my target audience will be for my app. I started by creating a list of research goals on what I wanted to focus on while gathering my research.
RESEARCH GOALS
Understanding and knowing what is currently on the market and discovering what is working and what could be improved.
Understand my audience and the demographics of my target audience.
Understand how people are currently managing their personal finances.
Understand what users’ needs and wants are in a personal finance app.
CONSUMER TRENDS
Contactless transactions grew twice as fast as traditional checkout methods at grocery and drug stores between February and March according to a Forbes earlier this year.
Globally, 59% of consumers prefer contactless payments over cash, chip- or pin-enabled cards or magnetic stripe cards.
Due to the coronavirus more people are opting to use contactless payments to avoid having to swipe their card or pass it to another person.
DEMOGRAPHICS
One in 10 Millennials today use their mobile wallets for every purchase, either online or at the POS.
Having alternatives to cash is also catching on with Generation X, as Pew found that 34% of adults under the age of 50 also never use cash at checkout during the week.
Approximately 58% people in the United States were more likely to use contactless cards than they were before the pandemic started.
COMPETITIVE ANALYSIS
To gather more insight into the fintech industry and who my competitors are, I conducted a competitive analysis. I analyzed two direct competitors in the financial services industry to better understand what’s working and what isn’t working and to identify any gaps that PlutoPay might be able to address. My analysis of these competitors includes: Overview, Key Objectives, Overall Strategy, Market Advantage and SWOT analysis. To view the full competitive analysis click here.
USER SURVEYS & INTERVIEWS
With the information gathered about the current market and audience, this gave me a starting point to dive deeper to better understand my target users and gain direct insights into their experiences with how they handle their personal finances.
I began by conducting a 14-question online user survey to reach a broader audience and to gather initial data about what current users expectations and banking habits were in a mobile payment services app. After gathering the data from the surveys, I then conducted 3 user interviews. This allowed me to ask follow up questions and to learn more about their needs, wants and painpoints.
SURVEY & INTERVIEW RESEARCH GOALS
Understand how people feel about making purchases online?
Understand what features people are looking for in a financial app?
How people are transferring money to someone or between their own accounts?
Identify similar applications that people are using and what they like and dislike?
IN SUMMARY
My goal for PlutoPay is to allow anyone to shop, transfer money, simplify their spending habits, and keep track of all their bank accounts in one app. My primary target demographic would be towards millennials as this age group would be more tech-savvy and more inclined to use my app. My main competitors include - Venmo, CashApp, and Zelle as their main features are transferring money digitally.
While the competition is large, it is possible to offer a competitive application that offers users a unique experience by providing features that are tailored to my target audience. Giving users the confidence that my app is secure and reliable, they will be more prone to want to share the app with their friends. There is an opportunity to fill a gap in the market as the shift towards digital payments has increased due to the recent global events.
Define - 02
AFFINITY MAP
To synthesize the information gathered from both user surveys and interviews, I then created an affinity map to identify trends, insights, behaviors, and themes.
Most users prefer shopping online because it is easy and convenient. Users said they prefer something that is not overly complicated and easy to use for basic things such as transferring money to someone or checking their balances. Most would purchase something online rather than go to the store because there are more options to shop for online. Most users don’t like to use credit cards because they don’t like the feeling of having to owe something and if they forget to make a payment they would accrue extra interest and fees.
INSIGHTS
Having an intuitive and simple interface
To be able to see a break down of expenses
Difficulties when having to transfer money between bank accounts
NEEDS
Simple and not overly complex
Show all transactions and bank accounts
A breakdown of spending habits
Split the bill between friends
USER PERSONAS
With all the information gathered up to this point, it was time to bring this data to life with a user persona. By creating a user persona, this allowed me to narrow down the type of person I am creating for and to make it more relatable when designing different features. A user persona is a fictional but realistic portrayal of our target user.
Let’s meet Joyce, a 25-year old marketing representative who lives in Orlando, FL. She just landed her first job and she wants to start forming healthy financial habits to stay up to date on her personal finances.
USER JOURNEY
To empathize with my user persona ‘Joyce,’ I created a User Journey to get a visual understanding of what a typical day might look like for my persona to accomplish a goal. In the scenario below, Joyce just went out with a group of her friends and wants to split the bill evenly between her and her friends. Below I have identified the actions, emotions and thoughts of what my persona might encounter and possible opportunities to address these issues.
USER FLOW
To get a better understanding of my users’ point of view, I created a user flow to think through the different decisions and paths they might take to complete a task. By creating user flows this helped in identifying what screens would be needed for each step that my user takes. I created a user flow of ‘splitting a bill ‘ to get a look at what my user persona Joyce would take below:
Ideate - 03
CARD SORT
This is where I started to generate potential solutions based on the information gathered to the this point. I started laying out the framework of the app by creating a sitemap and evaluating these ideas by conducting a digital open card sorting test. Participants were asked to first review a list of cards and then sort them into groups that made sense to the them. Once the participants created different groups they were then tasked to create a title for each group.
ANALYSIS
SIMILARTY MATRIX
To analyze the results from the open card sort exercise, I used the tool Optimalworkshop similarity matrix to identify strong card pairings and potential groupings.
I considered strong pairings if the pairing was greater than 75%
Based on the results there were 5 strong groupings that are highlighted in blue that coupled be paired together.
DENDROGRAM
The second graph used was the dendrogram, and based on the results there were four main groupings which were shown in the purple, red, navy blue and green.
Based on these groupings as shown in the graph above, I was then able to create category names for each group.
SITE MAP
After reviewing the analysis and taking into consideration of the similarity matrix and the dendrogram, I reorganized the sitemap for the app. I have categorized the findings into four different categories: Home, Rewards, Wallet, Profile.
WIREFRAMES
SKETCHES
With a sitemap in place I then began to design the main screens that I identified in my user flow by sketching low- fidelity wireframes. My goal during this phase was to sketch a couple of different solutions based on the research that I had gathered up to this point. Using pen and paper this allowed me to quickly create and modify different layouts.
Below you can see paper sketches:
MID-FIDELITY WIREFRAMES
Once I had an idea of what I was going for in the layout of the design, I created a clickable mid-high fidelity prototype and started to add UI elements to each screen for usability testing to get user feedback on the user flows.
Prototype & Test - 04
USABILITY TESTING
After creating a mid-fidelity clickable prototype, it was time to test my product! But, before I started testing my prototype, I created a usability test plan to use as a metric to see how users interact with the app and to define what objectives and goals I wanted to achieve by conducting a usability test.
The goal of this study was to assess the learnability of new users interacting with the application for the first time on mobile. I observed and measured if users understand the app and if they are able to complete the main functions of the app.
USABILITY SCRIPT & TESTS
After creating a plan of what I wanted to accomplish and how I was going to measure the results, I proceeded in creating a usability script, recruiting participants, and then conducting 6 remote usability tests.
I created three scenarios and tasks for users to test:
Scenario 1: You met up with 2 of your friends from high school and you paid for lunch last week, how would you request money from your friends so they know how much they owe?
Task 1: Calculate how much your friends should owe since you paid for the meal.Scenario 2: You want to see how much you have spent this month so you have a better idea of how much you are saving
Task 2: Review your spending summary for last month.Scenario 3: You received your new debit card in the mail, now you want to add it to your PlutoPay account
Task 3: Add your new debit card to your PlutoPay account.
AFFINITY MAP
I summarized the results from the usability tests by conducting an affinity map by separating each participant with a unique color and categorizing what I observed during the interview based on observations, positive quotes, negative quotes and errors,
After I categorized each participant, I created a rainbow spreadsheet, which helped in organizing the information I have gathered to this point from the usability tests and it created a visual pattern of what the major areas were that needed to be changed.
RESULTS
Observations
Users weren’t sure if they were splitting a bill with three or two people. Users weren’t sure what ‘recent’ meant and if they had to share their profile picture with someone that wasn’t their friend. Users were also not sure how to get to the summary tab from the Home Screen.
Positive quotes
“The onboarding processes was easy and thought it was a smooth process”
“Easy to read the Home Screen”
“Liked the animations and flow of app”
Errors
Clicked on the circle graph to view more information and wanting to get more of a breakdown by days/weeks/months. Users weren’t sure if they were splitting a bill and they weren’t sure how many people they were splitting with.
Negative quotes
“I would like to see the summary page include more info such as days/weeks/months”.
“It would be nice to view more information on the summary tab”
“How do I split a bill”
Revisions to be made
All six participants were able to complete the tasks they were presented with, but there were a few issues that needed to be addressed and changed.
The first change I made that users we’re having issues with were getting to the summary tab and wanting to be able to view more data such as a breakdown by days/weeks/months.
The second change was being able to ‘split a bill’. Users weren’t sure if they were splitting a bill and they weren’t sure how many users they were splitting the bill with. Being one of the main features of the app, I wanted to review the entire flow of splitting the bill.
The last revision was making a few changes to the Home Screen by increasing the font size, filling more white space near the header and making changes to summary tab.
MID-TO-HIGH FIDELITY
With feedback and revisions being made from the usability tests, I added more visual elements before conducting preference tests. The images on the right are what the final results were after conducting a preference test, you can see the designs that were used in the preference test further down.
PREFERENCE TESTING
With wireframes in place and feedback from usability testing, I then conducted a preference test comparing two different designs. Below are the screens that were compared and what users preferred:
Evolution of the Home Screen
From sketch to High Fidelity
As you can see from the image above from my initial sketch to the final screen changed each time after getting user feedback. The biggest change was moving the transfer button to the bottom of the screen near the navigation bar to make it easier for users to reach with their thumb.
UI KIT
After making revisions to my design to improve usability, I then wanted to think deeper into how to refine the design and to have my design documentation ready for developer handoff. With this in mind I identified the PlutoPay brand by creating a UI KIT, which includes information such as the color palette, buttons, symbols, forms, tabs and more.
FINAL PROTOTYPE
With high-fidelity wireframes and screens, I then created a final prototype which can be found below.
FINAL THOUGHTS
This was a fun project and an awesome experience to create a full case study from beginning to end. I believe I achieved all that was outlined in the beginning of the project. I added features based on the needs from user interviews and user testing, which was a great learning experience! I learned more about the fintech industry as well as the design process in creating an app.
I look forward to creating more case studies in the future!