Spayce | A Modern UPI Payment App

Spayce - A Modern UPI Payment App

👉 Introduction

According to data from Demandsage, the use of UPI as a payment method in India has grown exponentially:

• An impressive total of over 260 million people are using UPI in India.
• A staggering 360 million or more UPI transactions are occurring on a daily basis.
• The last quarter of 2023 alone saw an astounding 11.23 billion UPI transactions.

As an active user of these apps, I highly appreciate the significant strides they've made in modernizing payment methods. The ease and convenience of making payments at the click of a button, without the need for cash or physical cards, is truly a testament to the technological advancements we've seen in recent years.

But in my personal experience, I've encountered a variety of problems and issues while using these apps. And I discovered I was far from alone in this. These challenges ranged from user interface issues to transaction failures, each one more frustrating than the last.

Seeing these common issues, I felt a need for a solution.

In response to these modern problems, I'm excited to introduce Spayce: A Modern UPI Payment App. Spayce is not just another payment app; it's a one-stop solution designed to tackle all the issues commonly faced by users. The goal with Spayce is to make modern payments not just convenient, but also user-friendly and futuristic.

CLICK HERE FOR THE PROTOTYPE

👉 Pain Points

>Math Anxiety

Do you also feel anxious about math when the shopkeeper doesn't give you a total, and you need to check the amount before paying? The calculations seem simple, yet you feel embarrassed to use a calculator and struggle to do the math in your head. I understand, having struggled with math and on-the-spot calculations myself. The fear of overpaying and the anxiety of not using a calculator can be overwhelming. Even when you switch from the UPI app to the calculator, total everything, and then go back to the UPI app, by the time you reach the screen where you need to enter the amount to pay, you end up needing to switch apps again to recheck the total. This can be quite frustrating.

> No Categorization

When I carried a physical wallet, I would divide it into sections for different purposes like food and travel. This division prevented me from overspending in one area and running short of money for another. However, with the advent of UPI apps, all the money is lumped together, making it difficult to track spending. At the end of the trip, I find myself having to record how much I spent in each category, which is a task I don't enjoy. I'm not alone in this, as many people face the same problem.

> Inefficient Expense Tracking

I don't understand the concept of paying through an app, only to manually record all expenses and income in a diary or notes afterwards to check monthly budget, spending, and savings.

> Lack of Clear Transaction Overview

The history/message section of the UPI apps is disorganized. It displays both paid and received transactions on one screen without clear distinctions, making them appear similar. Furthermore, there are no separate sections to view only paid or only received transactions.

> Lack Underlying Work

Have you ever made a large payment using a UPI app, only to be met with a white screen after clicking 'pay'? You then receive confirmation that the transaction is complete. Often, this white screen can cause confusion, making you think something has gone wrong, such as accidentally pressing 'back' or the app malfunctioning. Hence, it's crucial to display the underlying process or indicators to show that the payment is in progress and then completed, to build trust.

> Confusion over Payment Source

I frequently share and receive many screenshots of completed payments, but often find myself confused about who made the payment. While these confirmations show the amount and recipient, they don't indicate who sent the payment. This omission can lead to trust issues and a poor user experience.

👉 Design Process

>Research

I noted down all the issues I encountered and discussed them with many friends who use a variety of UPI apps. I asked about the problems they experience and recorded them. Many of these issues were similar to those I had previously noted, confirming that I was not alone.

>User Persona

>Ideation

1.Problem-Solution Mapping

The first step in the ideation process was to develop solutions for the problems users were facing. Following this, I noted down the features, or MVPs, that my app would offer.

The solution is based on Occam’s Razor Theory

Occam’s Razor (or Ockham’s Razor, also known as the Principle of Parsimony) is the idea that more straightforward explanations are, in general, better. Occam’s Razor is a problem-solving principle that encourages simplicity.

2.Competitive Analysis

I then analyzed various existing apps. While these apps had some of the features, I planned to include none of them had all. They were scattered across different apps, with some apps offering one feature, and others offering different ones.

🖊️ I used those 4 money management apps, and here are my detailed observations:

• Poor and Boring UI: The user interfaces of these apps were not visually appealing or engaging. The designs were outdated and lacked modern aesthetics, making the user experience dull and uninviting.
• Manually Adding Each Transaction: Each app required me to manually input every single transaction. This process was time-consuming and tedious, reducing the efficiency and convenience that a money management app should offer.
• Lack of Category Options: Some of the apps did not provide options to categorize transactions. This made it difficult to organize and track spending in specific areas, which is a crucial feature for effective money management.
• No Downloadable Report Available: None of the apps offered the ability to download reports. This limitation hindered my ability to review and analyze my financial data in a more detailed and comprehensive manner.
• Not Connected to Bank Accounts and UPI: The apps were not integrated with bank accounts or UPI, which would have allowed for automatic transaction tracking and a more streamlined money management process. This lack of connectivity significantly reduced the functionality and overall usefulness of the apps.

3.Userflow

Then, I developed a user flow tailored to provide the best experience for our users, ensuring it was intuitive and seamless. This process required extensive brainstorming and I carefully considered various user scenarios and potential challenges to create a flow that felt natural and efficient for everyone. The effort paid off, resulting in a user experience that is both enjoyable and easy to navigate.

4.Basic Idea of Spayce Payment Process:

Spayce asks users to set their daily or monthly budget limit and then split the budget into various categories, with one permanent category, "Bank," for emergency uses. Here’s how the payment process works:

1. When the user clicks "Pay," they use the built-in calculator to calculate the amount to be paid.
2. Specifying the Payment Category: The app then asks the user to specify the category they want the payment to be deducted from. For example, if a user wants to pay ₹200 for food:
3. Progress Report: Users receive a progress report of their savings in downloadable form, which helps them track their spending and savings.
4. Maximizing Savings: To help users maximize their savings, Spayce also displays deals and offers, ensuring users can make the most of their spending while enjoying significant discounts.

Features

• Daily/Monthly Budget Limit: Users set their budget limits and allocate amounts to different categories.
• Built-In Calculator: Helps users calculate payment amounts directly within the app.
• Category Selection: Allows users to specify the category from which the payment should be deducted.
• Top-Up and Split Payment Options: Provides flexibility for users to manage their budget limits.
• Emergency "Bank" Category: Covers extra expenses.
• Downloadable Progress Reports: Helps users track their spending and savings.
• Deals and Offers: Displays discounts and deals to help users save money.

By streamlining the budgeting and payment process and providing useful features to manage expenses, Spayce ensures users can effectively track their spending, save money, and make informed financial decisions.

5.Wireframing

After developing the user flow, wireframing the screens and processes became much easier. While a few things, like the layout of the calculator, were changed, most elements stayed the same as in the original wireframes.

>Designing the ‘Spayce’

A) Selecting the colours:

Primary:

• PrimaryA - Black: #000000
• PrimaryB - White: #ffffff
• Accent - Blue600: #266ef1

I wanted to use black and white colors as much as possible to give the app a classy and simple look. However, to ensure it also had a futuristic feel, I decided to incorporate blue as the accent color. This combination aimed to balance elegance with modernity, creating a sleek and stylish user interface.

Background:

• Primary - White: #ffffff
• Secondary - Gray100: #e8e8e8
• Tertiary - Gray500: #868686

For the background, I chose white to add brightness to the app. Then, I added two shades of gray to create distinct sections on the same screen.

Content:

• Primary - Black: #000000
• Secondary - Gray800: #4b4b4b
• Tertiary - Gray500: #868686

For any content, I used black as much as possible, while using different shades of gray to show unselected options or secondary information. Additionally, I used white for some buttons, pairing it with a blue background to maintain a cohesive look.

Categories Status:

• Positive - Green400: #06c167
• Warning - Yellow300: #f6bc2f
• Negative - Red600: #de1135
• Neutral - Gray400: #a6a6a6

B) Selecting the font:

For typography, I wanted a minimal touch, so I chose 'Roboto.’

C) Designing the App’s Screen:

The main goal while designing the 'Spayce' UI was to make it futuristic yet minimal, addressing all the previously mentioned issues to enhance the user's experience.

I divided the UI process in to:

1. Welcome Splash Screen
2. Onboarding
   1. New Users
   2. Already a user logging in
   3. A regular user opening the app
3. Setting up the budget
4. Bottom Nav Bar
   1. Home
   2. History
   3. Pay
   4. Progress
   5. Deals

Then I made screens within each part

1. Welcome Splash Screen:

The first screen is kept simple, featuring the message "Modern Problems require Modern Solutions," which captures the essence of the app.

Through animation, the second screen appears. The language on this screen is kept in an astronautical theme, aligning with the app's futuristic vibe while remaining easy to understand.

The background of the screen depicts space, emphasizing the futuristic concept. When the user clicks an action, a rocket appears from the bottom and takes them to the next screen, enhancing the interactive and engaging experience.

2. Onboarding Screens:

The design of these screens is kept minimal, and the user is referred to as "Earthling" to maintain the astronautical theme.

The onboarding process is straightforward:

1. Enter mobile number linked to the bank
2. OTP verification
3. Linking process animation
4. User's information is extracted from the bank account
5. User can change their name and profile picture

This approach ensures a smooth and engaging onboarding experience while maintaining the app's futuristic and minimal design.

3. Setting up the budgets:

Now the user is navigated to the process of setting up their budget.

• Choose Period

The user is given three period options:

1. Monthly
2. Daily
3. Yearly

The user can set budgets for all these periods, but setting up a monthly budget is compulsory, so the Done button remains inactive until this step is completed. And if user try to press enter an overlay come “Setting up monthly budget is compulsory.” Users can also add other periods like weekly or custom periods.

When the user clicks ‘Month,’ the prompt changes from ‘Set up your budget’ to ‘Set up your Monthly budget.’ The user then sets the month and the corresponding budget.

• Set Up Categories

In this screen, users allocate their monthly budget across different categories:

1. Inactive Categories: Categories are shown in Gray100 to indicate they are inactive and need to be activated.
2. Amount Left: Displays the remaining budget after allocating funds to various categories, eliminating the need for a calculator.
3. Edit Budget: Users can adjust their budget by clicking the pencil icon. This feature is useful if a user sets a budget of let’s say 20k, creates five categories, and then realizes they need an additional category but have no money left. They can adjust the budget without losing their progress.

When a user activates a category by ticking it (changes Gray 100 to Gray 500), they can add a budget to it. They can also delete the category by pressing the minus icon.

• Designing the Categories

1. Visuals: Each category includes a picture or icon related to it. This is based on the Picture Superiority Effect: “People often remember visuals better than words. Designers can leverage this effect to make their products memorable and learnable.”
2. Descriptions: One-liners are written in each category to guide new users on what the category can be used for.

Users can also add new categories. Once they have allocated their budget to each category, they can press Done only if the remaining amount becomes zero.

• Confirm Budget

After setting up the categories and their budgets, the user is navigated back to the ‘Set up your budget’ screen. Here, they can either press the now-activated Done button or add other budgets if desired.

Now the user is all set to use Spayce

4. Bottom Nav Bar:

I needed a bottom navigation bar that embodied minimalism and futurism in one frame. So, I opted for a curved shape to distinguish the middle button, ‘Pay,’ which is the main button.

• Design Choices

1. Color Scheme: I chose black and white to complement the app’s primary colors.
2. Shining Line: I added a grey shining line on top of the bar to distinguish it from the white background of the app. This line is also present on the circular Pay button.

• Interaction Design

Once a payment is done, the grey lines of the Pay button change to blue, reverting to grey when the user navigates to other screens. This blue color also serves as a confirmation of payment.

• Pay Button Design

The Pay button is circular and positioned in the middle because of two key principles:

1. Von Restorff Effect: Also known as the Isolation Effect or the Unusual Effect, this principle states that experiences that stand out uniquely are more memorable than those that are common or alike.
2. Center-Stage Effect: This visual phenomenon indicates that an object or element at the center of an image or display receives more attention and prominence than other elements.

These design choices ensure the Pay button stands out, making it easy for users to locate and use while maintaining the app’s sleek, futuristic aesthetic.

4. Home Screen:

The Home screen serves as the main hub, integrating maximum features into one screen:

1. Side Menu Bar Icon
2. Search Button
3. Notification Button
4. Promotional Banner
5. Period Button to switch between Budget periods
6. Budget Section: Displays comprehensive information, eliminating the need for a calculator.
7. Categories

It's important to note that in any screen, the amount or price is always emphasized with higher weight. This design choice follows the Size Contrast theory:

Size contrast is a fundamental design principle that involves using differences in the scale or size of elements to create visual impact.

Clicking on any category expands it to provide specific information. The category screen is divided into:

1. Promotional Banner: Related to that category.
2. Period: Displays the date or month the budget is viewed.
3. Budget Section: Comprehensive information, eliminating the need for a calculator.
4. Details: History of payments made in this category.
5. Top-Up Warnings: Alerts indicating that the budget limit has been reached.

Categories

Designing the categories took real effort as I wanted them to be helpful and display maximum information seamlessly.

Each user-created category shows the amount spent, budget limit set, and the remaining amount (highlighted for separation).

• Designing Principles

1. Visual Hierarchy: Visual hierarchy is the principle of arranging elements to show their order of importance.
2. Serial Position Effect: The serial position effect is a psychological phenomenon where people tend to remember items at the beginning and end of a list better than those in the middle.

These principles make the categories super useful and provide an easy, intuitive experience for users.

Notifications

These notifications can be for app updates or important messages to the user. Their main purposes are:

• Specify the Category: When users are in a hurry, they can skip specifying the category they are paying from and directly make the payment. They can mention the category later. If they fail to do so within 24 hours, the amount is deducted from the category bank. These notifications remind users which payments need category specification. To make it easier, I include the amount paid, receiver's name, and the time since the transaction.
• To Top Up: When a category is exhausted, users receive a notification indicating that the category needs a top-up.

Menu Bar

The menu bar is kept simple and decluttered.

Following the Visual Hierarchy theory, I have added 'Balance' as the first option so that users keep it in mind.

Solving an Additional Problem

I noticed an issue where a user struggled to scan a QR code (located in the menu sidebar) due to poor visibility. They had to download the QR code, send it via a messenger, and then pay. Although they could have simply used the UPI ID, but why to make complicated ways to ignore the problem rather than a straightforward solution.

To solve this issue, I implemented a feature where tapping the smaller QR code enlarges it and darkens the background, making it easier to scan.

5. History:

As mentioned in the problem section, many UPI payment apps have confusing history sections. There is no separate section for received and paid transactions, ads clutter the history, and there is no clear distinction between received and paid money.

To solve this, I created separate sections for:

1. All Payments
2. Paid
3. Received

This makes it easy for users to distinguish their transactions.

• Design Principles

Cognitive Load Theory: It suggests that humans perceive the left side as received and the right side as sent (as seen in many messaging apps).

Following the Cognitive Load Theory, I implemented a clear distinction between paid and received money:

• Paid Money:
  • The amount, receiver's photo, and date/time start from the left.
  • The amount paid and an arrow are on the right side, indicating that the money was sent.
• Received Money:
  • Everything is mirrored, with the arrow on the left side, indicating that the money was received.

Key Feature: Balance

The balance is a feature users often struggle to find. I have provided it in the side menu bar and logically added it to the history screen for easy access.

6. Pay:

I provided a clear distinction of payment methods that users can select after tapping "Pay." This ensures that users can quickly and easily choose their preferred method of payment without any confusion. The interface is designed to be intuitive and user-friendly, with each payment method clearly labeled and visually distinct.

Built-in Calculator Feature

One of the main features of this app is the built-in calculator, which significantly enhances the user experience by allowing users to perform necessary calculations without leaving the app. This feature is especially beneficial for users who need to handle complex transactions or those who frequently need calculator while paying.

Functionality

• As users type any number, it registers as grey text in a larger font size within the calculator section. Simultaneously, this number is displayed as the amount to be paid at the top of the screen. This dual display ensures that users are always aware of the amount they are inputting.
• When users press any calculator button such as plus, minus, multiply, divide, or any, the grey numbers shift to the top of the screen in a smaller font size. The result of the calculation then appears in a larger font and in blue color, indicating the updated amount to be paid. This visual distinction helps users easily differentiate between the original input and the calculated amount.

The calculator can handle a range of functions from simple arithmetic to more complex financial calculations, making it useful for everyone from everyday users to accountants and investors. By integrating this feature directly into the payment interface, the app eliminates the need for users to switch between different apps, thereby streamlining the payment process and reducing the chances of error.

These three screens address three specific problems identified during the user research phase:

OTP Screen

• Problem: Users (also including me and friends I interviewed) often feel the need to double-check if they are sending money to the correct person, despite the receiver's name being displayed.
• Solution: Added user information along with their profile picture to provide visual confirmation and reduce errors. This additional layer of verification ensures users feel confident about their transaction.

Category Payment Screen

• Problem: Money management.
• Solution: Users are prompted to select the category they want to pay from, which displays money spent, budget, and remaining balance. The categories are hierarchically arranged with green (more money left) at the top and red (no money left) at the bottom, followed by the bank category to encourage users to utilize categories with more available funds.
  • Add Category: Positioned at the top, allowing users to quickly create a new category, automatically updating daily and monthly budgets.
  • Decide Later: Users in a hurry can skip selecting a category, with a notification sent later to remind them to specify it. This option ensures seamless transactions without delays.
  • Split Payments: If a user needs to pay an amount exceeding the available funds in one category, they can split the payment between that category and the bank/any category.

Payment Done Screen

• Problem: Existing apps often have dull and confusing payment confirmation screens that lack essential sender information.
• Solution: After a vector animation, the payment confirmation screen shows both sender and receiver information. A rocket graphic visually represents the flow of payment, making the process engaging and clear.

Adding vector animations during the payment process serves an essential purpose:

Labor Illusion Effect

• Concept: The Labor Illusion effect suggests that users trust and value results more when they see a process occurring, even if there's a slight delay.
• Implementation: A rocket animation is shown during payment processing to represent the underlying work being done, rather than displaying a blank screen. This approach prevents users from assuming there’s an issue with the payment and pressing back repeatedly. It provides a reassuring visual indicator that the transaction is being processed.

These enhancements aim to create a seamless, efficient, and user-friendly payment experience that addresses common frustrations and improves overall satisfaction.

7. Progress:

To address the issue of manually logging monthly spending and savings in a diary while checking transactions from a UPI payment app, Spayce offers an automatic feature that extracts data from the budget and daily spending to generate a comprehensive report. This report includes:

• Calculations: Detailed calculations depicting spending, savings, received amounts, and total savings.
• Basic Breakdown: A pie chart to visually represent money spent and money received.
• Category-wise Breakdown: Visual hierarchy showcasing the amount saved in each category, with the category having the most savings displayed first and the least savings displayed last.
• Brief Takeaways: Insights such as maximum expenditure and minimum expenditure.
• Download Report Option: Users can download their daily, monthly, and yearly budgets and reports, making it easier to compile and review their financial data.

This feature is designed to be beneficial for a wide range of users, including homemakers, students, entrepreneurs, and more, saving them significant time and providing a compelling reason to use this app for all their payments.

8. Deals:

The primary goals of Spayce are to help users save money and to facilitate payments for everything through the app. Introducing the ‘Deals’ section supports these motives by providing users with valuable insights into available discounts and encouraging them to use Spayce for all their purchases.

Benefits of the Deals Section:

1. Enhanced Savings: Users can easily find ongoing deals, such as discounts on groceries or food, which helps them save more money.
2. Increased App Usage: By showcasing the various things users can pay for using Spayce, the app encourages users to make all their payments through it.
3. User Retention: The feature draws users back to the app regularly to check for new deals.
4. Engagement: The scrollable and addictive nature of this section ensures users spend more time exploring better discounts.

By providing a centralized place for users to discover and utilize deals, Spayce ensures that users can maximize their spending efficiency while enjoying significant savings.

👉 Prototype

Now comes the part I enjoy the most: the prototype stage. This is where all the design elements and user flows come together to create a functional model of the app.

CLICK HERE FOR THE PROTOTYPE

👉 Future Scope

1. AI-Powered Financial Insights:

• Personalized Budget Recommendations: I want Spayce to use AI to analyze spending patterns and provide personalized budget recommendations.

2. Integration with Other Financial Services:

• Investment Tracking: Integrate with investment platforms to track stocks, mutual funds, and other investments.
• Loan and Insurance Management: Provide tools to manage loans, insurance policies, and other financial products.

3. Gamification:

• Savings Challenges: Introduce savings challenges and reward users for meeting their financial goals. I personally think that it will boost the app engagement also.
• Leaderboard: Create a community leaderboard to encourage healthy competition among users.

4. Integration with Smart Devices:

• Extend app functionality to smartwatches, allowing users to make payments and check balances on the go.

5. International Payments:

• THis app will allow users to manage and pay in multiple currencies and to facilitate international payments with low transaction fees.

6. Voice Assistance:

I really want to implement voice command functionality for making payments and checking balances.

7. Enhanced User Interface:

I want to do experiment and try the dark mode of this app also in the future.

By implementing these future scopes and improvements, Spayce can continue to innovate and provide users with a comprehensive and user-friendly financial management experience.

👉 Final words

As the UI/UX designer of Spayce, I am proud to present an app(idea) that aims to revolutionize the way users manage their finances.

Spayce was designed with a clear vision: to combine futuristic aesthetics with minimalism, making financial management not only efficient but also enjoyable.

Throughout the design process, I prioritized user experience by focusing on simplicity, clarity, and functionality.

Every feature, from the built-in calculator to the distinct category management, was carefully crafted to solve real problems faced by users. The intuitive design ensures that users can easily navigate through the app, making budgeting, spending, and saving a seamless experience.

The use of visual hierarchies, psychological principles, and engaging animations adds an extra layer of usability and satisfaction.

I ensured that every interaction is meaningful, whether it's through the personalized notifications, detailed transaction histories, or the motivational progress reports.

Looking forward, Spayce has immense potential for growth.