An application that unifies social payment platforms, allowing payment and account management from one centralized location

Concept Ideation

Challenge

How might we help users seamlessly manage multiple social payment applications while reducing the friction of forgotten passwords and account details?

Idea

Social payment applications are becoming increasingly popular as a way to exchange money. More and more applications are becoming available with different incentives. Many people are taking sides as to which application is best to use. This means that people may have many social payment apps and only use some rarely. This can cause the user to forget their passwords and account details.  BANKS allows users to exchange money and manage all of their social payment apps from one application.

Notable Features

Account input steps are separated into multiple screens, complete with a progress bar to track users' progress.

This reduces the chances of the users feeling overwhelmed creating a more manageable experience.

Modals are included which prompt users to confirm their actions.

This helps the user stay informed and deliberate in their choices, which minimizes errors.

The user’s homepage includes consistent and minimalistic design features, ample white space, and simple navigation.

This helps users quickly understand functions, reducing the cognitive load, and ultimately creating a more enjoyable experience.

Greyed-out and call-to-action buttons clarify active and inactive functions and highlight key elements.

This facilitates straightforward navigation by utilizing important features to create clear communication and signaling system status.

A vibrant interface with amusing language, engaging elements, and quirky animations create a playful experience.

These features combine fun and practical functionality, boosting user engagement and making transactions feel seamless and enjoyable.

Process

Research

The first step in the process was to research if a similar app already existed. While there isn't a specific app dedicated to comparing social payment apps, the following apps offer similar features, enabling users to compare various apps with similar functionalities:

Interviews

Following the research, I began the interview process. I focused on interviewing people that typically use social payment and banking apps. Because my resources were limited, the user pool  was confined to caucasian males and females  between the ages of 25-45. I inquired about general opinions on banking, payment methods, and associated technologies.

When developing the questions, I focused on the following parameters:
  • Mix open-ended and closed-ended questions to obtain a wide range of data, but prioritize qualitative insights.
  • Ensure questions are neutral to avoid biasing responses.
  • Frame the questions to understand user needs, behaviors, and pain points.
  • Tailor questions to specific tasks or experiences to help gather actionable insights rather than vague feedback.

The following highlights key questions, responses, and features implemented in response to the feedback received:

What features do you find most helpful in your banking apps and social payment apps, and how do they improve your overall experience?
  • Response: With banking apps, I like the easy navigation and quick access to my account information. I also like being able to deposit checks from my phone. It is super convenient and saves time. With social payment apps, I like how easy it is to send money quickly to friends. It makes splitting bills or paying back for lunch super convenient. 
How many social payments apps do you have and how often do you use them?
  • Response: Users typically have an average of three social payment apps and use at least one of them monthly.

Preffered Features

BANKS includes  access to account information, and allows you to upload funds to any of the apps directly from your bank accounts. In addition, the main function of the app allows the users to manage money and pay/request funds from the app.  

Consolidation

BANKS nests all apps in one place with one password. This helps users manage all their accounts in one place, reducing the likelihood of forgetting passwords or neglecting any accounts.
What do you like about the visual design of social payment apps?
  • Response: I really like the clean and simple layout of social payment apps. Everything is easy to find, which makes transactions quick and easy.
Minimalist Design

BANKS includes ample white space and limited color palette to reduce clutter and enhance focus. It also prioritizes essential information, avoiding unnecessary elements that can distract users.

Wireframes, Testing, and Redesigns

Following the research and interviews, I began the design process, which included creating low to mid level prototypes.
Mid Level Prototypes
The following are issues identified through testing and revisions made to address those issues:
Issue

The original “Pay or Request” interface included sections for every aspect of the payment process (contacts, payment/request amount, and transaction details). The “Contacts” section only displayed the top four contacts and included a chevron which, when clicked, would open all contacts beyond the top four. This allowed room for additional content on the page beyond just the contacts and reduced the number of required clicks. Users had issues understanding the purpose of the chevron and were delayed in completing that part of the process.

Revision

Rather than including the contact list on the screen with the rest of the required information, I reworked the interface to bring the user directly to the contacts after choosing the mode of money exchange. This change required additional clicks but reduced confusion, thereby making the exchange more efficient.

Issue

The original interface immediately completed the transaction once the user pressed "Pay" or "Request". One of the users felt that the process was too hasty and could result in payment errors.

Revision

I added a confirmation modal which appears once the user has input all of the required information and is ready to exchange. money. The modal asks the users to confirm the details of the exchange before the process is complete,  which aids in error prevention.

Issue

Some of the users had trouble recognizing the confirmation bar which notifies the user that the request or payment was successful.

Revision

I moved the confirmation bar to the top of the homepage, rather than nesting it within the specific social payment app information. This enhances the bar's visibility, making it more prominent compared to the surrounding information on the page. In addition, because the bar is no longer nested within the app account details, I added  the exchange information details into the bar to confirm the details of the exchange.

Branding

Name and Logo

I  had an overall vision of a very minimalistic aesthetic for the app and decided that the name should match.  Given that the app serves as a money management tool with a social component, I wanted the logo to convey a blend of professionalism and playfulness. The piggy bank is a simplistic design that provides both a sense of professionalism and fun.

Colors and Typeface

Concerning the  colors, I followed the 60/30/10 rule which is a guideline used in design to create a balanced and harmonious color scheme. Using this rule helps ensure a cohesive look while allowing for creativity and variety in color choices. Using this rule helps ensure a cohesive look while allowing for creativity and variety in color choices. It suggests dividing colors into tiers to create a balanced design.


Inter typeface is used throughout the application. It has a modern, clean, and legible design. The sans-serif style has a wide range of weights and styles, which enhances its versatility. It is good for readability on screens and displays across different devices and resolutions. Although the typeface is not playful, the clean, modern aesthetic conveys trustworthiness and professionalism, which is essential for financial applications.

Final Product

Registration

Create Account
Enter Information
Email Verification Link Screen
Verification Screen
Profile Screen Populates
Choose a Photo
Enter Profile Information
Add Banks

Adding Banks

Banks Screen
Choose Your "Banks"
Confirm Your Banks
Confirmation Screen

Pay/Request

Click "Pay" or "Request"
Recipient(s) Screen
Pick Recipient(s)
Add Details of Payment
Review then Pay
Confirmation Modal Populates
A Verification Animation Screen
Payment Confirmation Bar

Interaction Capabilities

Prototype

The prototype was created with Figma and has limited functionality. General capabilities are demonstrated in the Final Product screens above. Although Figma will guide you through capabilities with error signals, a guide has been provided below which walks you through a task, should you need it.

Try me
Back to the Top