Dollar%2520Bills_edited_edited.jpg
Paypal Logo 02.png

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.

PayPal Template_Transparent_Warped 02.pn
PayPal Template_Transparent_Warped 01.pn
PayPal Template_Transparent_Warped 03.pn

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.

Screen Shot 2022-04-12 at 1.48.29 PM.png
FCBA932BDAEC445E836C2C67E4D361E8.png

Case Study

Pay_Per Logo.png

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

Home - Device Mockup.png
Splash - Device Mockup.png
Settings - Device Mockup.png

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.

Survey 01.png
Survey 02.png

Interview Findings

Interview 01.png

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."

Interview 02.png

Edgar

Insurance Agent

"The world revolves around your credit and your credit score."

Interview 03.png

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

Screenshot (66).png
Screenshot (67).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.

Screenshot (68).png
Screenshot (69).png
Screenshot (70).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

Screenshot (76).png
Screenshot (77).png
Screenshot (79).png

User Flow

Screenshot (97).png
Screenshot (96).png
Screenshot (95).png
Screenshot (94).png
Screenshot (93).png
Screenshot (92).png

Site Map

The site map was created to ensure no screens were missed and all features and functions were designed.

Screenshot (89).png

Low-Fidelity Wireframes

Low Fidelity Port 01.jpg
Low Fidelity Port 02.jpg
Low Fidelity Port 10.jpg
Screenshot (90).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

4.5 High-Fidelity 1.png
4.5 High-Fidelity 10.png
4.5 High-Fidelity 11.png

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.

Screenshot (91).png

Usability Testing

Barb

Age Range: 54+

Occupation: Retired

Location: Lynnwood, Washington

Barb_Avatar.png
Cartoon Carlie.jpg

Carlie

Age Range: 27-35

Occupation: Insurance Agent

Location: Kirkland, Washington

Cartoon Marylee.jpg
Cartoon Tiffany.gif

Tiffany

Age Range: 36-44

Occupation: Project Manager

Location: Bothell, Washington

Marylee

Age Range: 45-53

Occupation: Sales

Location: Kirkland, Washington

Cartoon Natalie.jpg

Natalie

Age Range: 36-44

Occupation: Project Manager

Location: Kent, Washington

Cartoon Karla.jpg

Ashley

Age Range: 27-35

Occupation: Dental Hygienist

Location: Seattle, Washington

Cartoon Ashley.jpg

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.

Revision OG 01.png
Revision 01.png
Revision OG 02.png
Revision 02.png

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.

Revision OG 03.png
Revision 03.png

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.

Screenshot (163).png
Screen Shot 2022-01-27 at 3.01.39 PM.png
Screenshot (165).png
Screen Shot 2022-01-27 at 3.07.30 PM.png
Screenshot (166).png
Screen Shot 2022-01-27 at 3.09.30 PM.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.

Budget.png
Tutorial - Start.png
Home - Invest Expand.png
Settings.png
Transfer - Send Money To – Filled.png
Setting - User Profile - Default Visa.png
Home.png

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.

Screenshot (180).png
Screenshot (179).png
Screenshot (181).png
Screenshot (182).png
Screenshot (183).png
Screenshot (185).png
Screenshot (184).png
Screenshot (176).png
Screenshot (188).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!