An application that unifies social payment platforms, allowing payment and account management from one centralized location
Challenge
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.
Account input steps are separated into multiple screens, complete with a progress bar to track users' progress.
Modals are included which prompt users to confirm their actions.
The user’s homepage includes consistent and minimalistic design features, ample white space, and simple navigation.
Greyed-out and call-to-action buttons clarify active and inactive functions and highlight key elements.
A vibrant interface with amusing language, engaging elements, and quirky animations create a playful experience.
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:
- Obi: Obi compares all taxi and rideshare prices in real time. It is typically used to find the cheapest ride and compares ride prices across multiple apps.
- Intuit Mint: Mint allows users to track bank, credit card, investment, and loan balances and transactions through a single user interface, as well as create budgets and set financial goals.
- All-in-one Messaging Apps: These apps provide a comprehensive platform for messaging, voice and video calls, file sharing, and social networking, enabling users to communicate and connect seamlessly in one place.
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.
- 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:
- 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.
- Response: Users typically have an average of three social payment apps and use at least one of them monthly.
Preffered Features
Consolidation
- Response: I really like the clean and simple layout of social payment apps. Everything is easy to find, which makes transactions quick and easy.
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
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.
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.
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.
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.
Some of the users had trouble recognizing the confirmation bar which notifies the user that the request or payment was successful.
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.
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.
Registration
Adding Banks
Pay/Request
Interaction Capabilities
.png)
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.
