The key features of my app are the peer-to-peer money transfer, shopping online, budgeting expenses, and investing in stocks and cryptocurrency. It felt necessary to use PayPal for my competitive analysis since all my features are also theirs.
The Analysis
PayPal is one of the most well-known payment apps out there. Their goals have always been to make paying online as easy and secure as possible. They adjust and grow with the market, paying close attention to what is popular, what is new, and what is innovative, and will add features and functions accordingly. They do lack character on their website and app with their typography, images, and colors. There site is also very redundant with multiple areas that have the same information. Cutting down on that redundancy would create a website that is easier to navigate through.
Case Study
When you're thinking "mobile banking app", I'm sure "Fun" is not the first adjective that comes to mind. Well, I've set out to reverse that thought process that so many of us have, creating an app that is educational, essential, yet still enjoyable. When speaking with people about investing, money management, and finances, I could see the stress and frustration emerge and grow. And with similar banking apps out there, I wanted to design something unique, something users want to regularly use, something that won't be just another wasted app on their phone. That's why Pay/Per was created.
Role
UX/UI Designer
Tools Used
Pen & Paper
Balsamiq
Adobe XD
Adobe Photoshop
OptimalSort
Slack
Skype
UsabilityHub
InVision
Competitive Analysis
A competitive analysis was performed because there is a vast amounts of competition between money management apps. There are so many out there with so many functions. I wanted to see what worked and what didn't from a user's perspective.
Surveys & Interviews
I decided to incorporate both surveys and interviews into the user research. Conducting the surveys was necessary because of the wide array of information and features associated with money apps, gaining knowledge on what is truly important to the users. After analyzing the survey findings, I was able to create interview questions tailored to what the average user was looking for with an all-inclusive finance app.
Survey Findings
When conducting the surveys, the majority of the participants viewed money-transfer and shopping online as the most important features in a money management app, and Venmo and PayPal as the most well-known and utilized. That gave me some ideas of how to compete with and even stand out from the other finance apps, including coupons that are sent right to the user's account from their favorite stores and creating an easy way to transfer money with just a few quick clicks.
Interview Findings
Justin
Realtor
"Venmo is more than just a place to do business. It's become a little like a social media site. You can like and comment on friend's transactions."
Edgar
Insurance Agent
"The world revolves around your credit and your credit score."
Roxanne
Education Consultant
"I would like to get better at budgeting with an app or software that helps me get started and gives me daily or weekly reminders."
I interviewed 3 individuals and a recurring thought from all was that since people are doing more and more online, including banking and budgeting, they are looking for a simple, easy-to-use app that can accomplish all of their financial needs without bouncing around different apps to achieve all those tasks.
Affinity Mapping
.png)
.png)
User Personas
The three personas are at different stages in their lives, and have different priorities, but all have the commonality of financial interest. Whether it be for shopping, budgeting, or peer-to-peer transferring, Pay/Per can help with their specific needs.
.png)
.png)
.png)
User Journeys and Flows
Creating the User Journeys and Flows for my Personas were important for this project because I was able to get into the mind of the user. I wanted to pinpoint all of the steps, experiences, concerns, etc of the Personas. All of their lives are different and all of them have different reasons for frequenting finance apps, but they all are after the same thing, easy and stress-free money management.
User Journey
.png)
.png)
.png)
User Flow
.png)
.png)
.png)
.png)
.png)
.png)
Site Map
The site map was created to ensure no screens were missed and all features and functions were designed.
.png)
Low-Fidelity Wireframes
.png)
From the Home Screen, after logging in, the user can input income and expenses in the Budget tab, as well as edit categories to suit their specific needs. The user can also access the peer-to-peer transferring via the Transfer tab on the navigation bar. They can also add credit cards and update their information in Settings, which is located on the top-right of the screen. These sketches specify the steps to complete those tasks.
Mid-Fidelity Wireframes
The mid-fidelity wireframes have more detail than the low-fidelity does, though still in gray-scale. The mid-fidelity wireframes were created using Balsamiq. I used these wireframes to create the prototype for my usability testing.
.png)
Usability Testing
Barb
Age Range: 54+
Occupation: Retired
Location: Lynnwood, Washington
Carlie
Age Range: 27-35
Occupation: Insurance Agent
Location: Kirkland, Washington
Tiffany
Age Range: 36-44
Occupation: Project Manager
Location: Bothell, Washington
Marylee
Age Range: 45-53
Occupation: Sales
Location: Kirkland, Washington
Natalie
Age Range: 36-44
Occupation: Project Manager
Location: Kent, Washington
Ashley
Age Range: 27-35
Occupation: Dental Hygienist
Location: Seattle, Washington
Karla
Age Range: 45-53
Occupation: Therapist
Location: Mill Creek, Washington
I conducted 7 usability tests to establish what worked and what needed to be adjusted and/or added as stated by the users. The participants varied greatly in age and occupation to reflect the diversity of users that can benefit from Pay/Per. I gained a lot of feedback from all of them, and made changes accordingly.
Usability Test Results
6/7
Had trouble getting through the tutorial.
3/7
Thought there were too much information that might not be utilized by them.
3/7
Thought the Money Transfer page was too cluttered.
1/7
Said the pop ups with CTA buttons were reversed from what other apps are.
4/7
Really enjoyed all of the features available in one app.
3/7
Had an easy time adding a new credit card to their account.
3/7
Thought it was an easy app to navigate through.
Iterations
Severity Level-HIGH
6 out of 7 usability test participants were confused about the tutorial. Because of their feedback, I adjusted to a darker background and made a pop up box that the user will have to interact with to continue on.
Severity Level-MEDIUM
Some of the participants stated the Home screen was cluttered with information some users might not care about. I was given the suggestion to make a customizable Home screen so each user can add and easily access only the data they use.
Severity Level-LOW
Another screen that the participants of the usability test thought was too busy was the Transfer page. Instead of having a list of Friends, I opted to place the most frequent friends at the top of the page, with a button to the side to view all friends.
A/B Testing
Turning to the user interface, I took to social media to complete my preference tests. Slack and Facebook proved to be reliable sources to get a variety of participants from all different backgrounds, ages, genders, and occupations. Results and feedback are below.
.png)
.png)
.png)
High-Fidelity
The high-fidelity mockups were designed to create a cheerful environment where the user can organize their finances. Money management can be mundane and/or stressful, but Pay/Per wants to make it fun by incorporating our mascot, Foxy Frankie, as well as using colors that are bold without being overpowering.
Design Language Systems
Lastly, I created the Style Guide for Developers and Designers. With this Style Guide, Developers and Designers coming in to code, adjust, and/or edit the product will easily be able to do so.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Lessons
It's imperative to speak with and learn from the user through surveys and interviews before beginning the design process, accepting the feedback, and adjust features and functions accordingly. I had a vision in my head of the look and feel of this app before starting on it. Learning what the user wanted through research, I had to scrap everything I thought they would need as a feature. For example, I had no interest in adding cryptocurrency and investing, until looking at competitor's apps and speaking with users, so instead of adding an area to view credit scores, which was not a function any of the users were interested in, I added the Investing tab. If not for the interviews, my bias would've produced a product that the average user might not have enjoyed.
Thank you for making it to the end. Below is the clickable prototype for Pay/Per. Enjoy!