With the world taking a digital approach to all transactions, it is a need for people of today's society to have a safe method to send and receive money to friends, family, and merchants. Wouldn't it be nice to have an application that securely allows a user to add banks/cards to a digital platform, budget their money for personal or business use, and can pay anybody or entity? That is where Quadrant comes in, a responsive mobile digital payment platform that allows users to take control of their finances on the go.
Understanding the problem
The first step in my process was to understand what the problem is to see if there is a solution that can be created to fix it. If there is a solution then I proceed with the design process.
Users need a way to shop, travel, or send money online without a card or have to use a physical bank or store to do so because of the growth in online shopping and transactions as well as problems that users face with security and efficiency.
We will know this to be true when we see users only using this app to make all money transfers and retail transactions.Potential Problems for Users
-The lack of efficiency and ease of use
-Information from last purchase is not saved
-A bank account or debit card is always needed
-Information is not being properly secured
I wanted to do a competitive analysis to see how the competition is performing in the market and providing for their customers.
Why Google Pay and PayPal?
Google Pay is one of the most popular mobile payment platforms, especially among Android operating system users. Their users reached over 100 Million in 2021 worldwide and the push of contactless in-store purchase partnerships has more users joining daily.
PayPal is among the top 3 in usage and revenue worldwide with over 377 Million users and 15 Billion transactions in a given year. It is also one of the most well-known payment platforms since its release in the early 2000s.
SWOT Analysis
Marketing Advantage
The major advantage that PayPal has is the fraud protection that is being used in its platform. The algorithm that has been developed not only gauges the amount of potential risk being taken for each transaction and whether it is acceptable or not but also has a fraud recovery function post-transaction.
Marketing Advantage
The major advantage that Google Pay has is that it is supported by all 4 major banks in the U.S. (Wells Fargo, Citi Bank, Bank of America, and Chase) along with Mastercard, American Express, Discover, and Visa. This helps with accessibility to customers.
After analyzing what some industry leaders have done for their customers to create a successful product it was time to begin research through the users to see how they are currently addressing the problem.
User Research
I conducted user interviews and surveys for the research process with 3 users unmoderated because when using agile UX, collaboration and delivery are the most important. Focusing primarily on "how we will make the thing". I will have the opportunity to gather more users during the usability test phase
User Interview #1
User Interview #2
User Interview #3
Insights
The user survey is the direction I aimed toward at the beginning to get a pool of data from many users because it is easy and free to create while also having the advantage of being taken anywhere. Then I incorporate user interviews to dive further into the users that will be using the product to learn what the users enjoy along with biases.
The needs of the user, who the user is, what to avoid, and how new payment methods are spread were all captured from the data through the participants.
User Personas
Fictional personas were created based on the data gathered through surveys and interviews to give a face to potential users after the product is created.
User Journey
These user journeys were created to understand user behavior, uncover gaps in the user experience, and then take action to optimize the experience
Challenges
Users are trying to avoid apps that are:
-Hard to use
-Time Consuming
-Have too many ads
-Not available in the desktop version as well
-Are not user friendly
-Not giving capabilities to track payments
User flows
A flow of how the function would work step by step when a user enters the app was created for two tasks, adding a payment method and creating a budget
information architecture
This is my original site map showing how users would get to each screen.
I decided to conduct an open card sorting test on Optimalsort so that I could possibly get new names for my categories. I gathered insights from 5 participants and they averaged at about 10 minutes per session. I used 5 participants because you almost always get close to user testing's maximum benefit-cost ratio and being cost-effective when gathering data is a smart decision since it can be costly.
My original site map categories worked well for the user considering I had similar categories that they created but realized that I may need to incorporate an onboarding feature and change my category names slightly to create a better experience. See the new version of the site map below based on the data gathered
Wireframes & Prototypes
My research lead me to sketchpad and pen to work on some Low-Fidelity designs that would help clarify ideas for the mobile and desktop versions. The 3 features I decided to focus on were the Home screen, Payments, and Budgets.
After clarifying my approach on paper, it was time to use Balsamiq to bring some of my ideas for onboarding and my 3 features to life. I had to figure out how I would take general ideas and make them real. Here are my Low-Fidelity Prototype designs for mobile and desktop.
It was a challenge for me to create designs that would be unique while keeping them simple and polished. I used inspiration from other sites and design layouts which lead me to my design decision to go with the ones you see.
The competitive analysis really helped with this process and gave me an opportunity to evaluate what I thought was missing from their designs to incorporate into my own.
Onboarding
Homescreen
Payments
Budgets
After this step, it was time to begin the Mid-Fidelity prototype design for a clickable version of the app so that the usability of the features can be tested. This is also a good time to collect data from stakeholders as well to help make design decisions moving forward. I used Figma to create a clickable version of the prototype to test.
Testing
Main Issues
-All buttons did not work on initial clicks
-Ineffective use of space in the budget feature
-The question arose: Is the design too simple?
-After payment sent, didn't know transaction was successful or not
-Missing more questions in budget feature
Takeaways
The overall concept of the application was understood. The favorite feature was the budget feature, felt like users had their own accountant. The feedback user gave was insightful and effective.
Improvements
-Add confirmation screen after payment sent
-A new set of buttons for Payment and Budget features
-More detail is recommended for the budgeting feature
-Change payment and add bank/card icon so they aren't as similar
Refining the design
After improvements were made with the help of users feedback, styling and layouts are considered for the next steps. These were my decisions based on color contrast tools, browsing through typography options, and finalizing on icons.
My design styling was finalized with the help of tools, competition research, and other designers' opinions. It was time to consider accessibility for all possible users.
These visual designs elements were improved based on Gestalt Principles.
Accessibility
You can compare and contrast the design malfunctions I had before applying the Gestalt Principles for accessibility to all users. This step is crucial before moving forward to the final steps.
Here are the iterations of my designs for each function through the design process.
Steps moving forward
Users want a financial platform that will allow them to have a digital wallet to store their banks/cards that helps them budget and monitor their spending while also allowing them to spend anywhere without their physical card. With the use of Quadrant, users will be able to do all of that plus securely send payments to friends and family from the palm of their hand.
Improvements
- Add more assurance when it comes to security to give users more peace of mind
-Add option to budget feature that changes guidelines of users set budgets
-Add sign-in options such as a face or fingerprint scan so users can log in quicker
