Portfolio ✦ Case Study
★ Featured Project

GPay Spend Indicator

Know what you spent before you spend again. A seamless, zero-setup feature addition that updates daily spending in real-time directly on the payment screen.

Role
UX Designer
Tools
Figma
Duration
2 Weeks
Type
Feature Addition · Google Pay · Android
GPay Today's Spend Indicator Dashboard Mockup
Overview

What is GPay's Today's Spend Indicator?

This project adds a Today's Spend Indicator feature to Google Pay. It shows the running total of money spent since midnight directly on the payment screen — right above the amount field — so users always know how much they have already spent that day before making another payment. The indicator updates automatically after every transaction and resets itself every midnight without any setup or manual input from the user.

Why I Chose This

As a regular GPay user, I experienced paying blindly throughout the day and only realizing I was running short on cash when it was too late. I wanted to design an elegant solution that creates financial awareness in the exact moment of transaction, without adding friction.

The Goal

Provide immediate, zero-friction visibility of daily spending at the moment of payment, helping users stay conscious of their budget without the chore of manual tracking or complex setups.

Walkthrough

Interactive Screen Walkthrough

01

Launch & Start (Spend: ₹0)

The flow starts with the familiar Google Pay home screen. When the user initiates a payment, they are greeted by a subtle Today's Spend indicator pill at the top, showing ₹0 before any transaction takes place.

Google Pay Home
Payment Screen Start
02

First Payment (₹100)

The user inputs ₹100 to pay Saurav, selects their bank, and completes the payment. The transaction page confirms the payment, updating the internal daily spend counter silently.

First Payment Input
First Payment Success
03

Second Payment (₹200)

Later in the day, the user opens the payment screen to pay David. The indicator now prominently shows Today's Spend: ₹100. The user enters ₹200, is aware of their current total, and initiates the transaction.

Second Payment Input
Second Payment Success
04

Before & After Comparison

By comparing the old payment layout to the new feature addition, it's clear how the spend indicator integrates naturally into GPay's design system without adding visual clutter or cognitive noise.

Old Version Payment Screen
New Feature Payment Screen
Target User Profile

User Persona

Meet Meera, the user archetype representing young professionals who rely heavily on quick digital payments but struggle with passive daily budget tracking.

👩‍💻

Meera, 26

Chennai · Software Engineer

"I make decent money, but multiple small UPI transactions add up so fast that I only realize I've overspent when my bank balance runs low."

💭 Thinks

  • "Where did all my money go this month?"
  • "I make decent money but I'm always broke by month end"
  • "I should track my spending but it's too much effort"

🧠 Feels

  • Anxious checking bank balance
  • Guilty after impulse purchases
  • Overwhelmed by detailed budgeting apps

🛑 Pain Points

  • Makes multiple small UPI payments daily without realising total
  • Only notices overspending when balance is low
  • Doesn't want a complex budgeting app, just quick awareness

🎯 Needs

  • A simple, effortless way to see today's spending at a glance
  • No manual entry, no setup
  • Something that works passively in the background
User Research

Research & Validation

Validating the awareness gap with real users and reviewing the existing GPay structure.

👥

User Interviews

I spoke with 5 regular GPay users and asked a simple question: "Do you know how much you have spent today right now?"

  • None of them could answer without opening their transaction history.
  • 3 out of 5 had experienced running out of money unexpectedly because they lost track.
🔍

Interface Analysis

Examining GPay's information architecture and flow:

  • Transaction history exists but requires navigating to a separate screen.
  • No summary of daily spending is visible during the active payment flow.
  • Account balance tells you what is left, but not how much you have already spent.
💡

Key Finding

The spending data already exists inside the app. No new data collection or complex systems are needed — we simply need to place that information at the exact moment of decision-making.

Key Insights

Insights from the Field

⚡

Awareness in the Moment

Awareness at the moment of action is infinitely more powerful than after-the-fact reflection. Knowing your total spend just before you pay changes behavior; knowing it at the end of the day changes nothing.

👁️

Awareness over Budgeting

Users don't want to budget — they want to be aware. Budgeting requires setup, discipline, and planning. Awareness requires zero effort if the right information is presented at the right time.

⏳

Transaction History is Too Far

Buried deep in separate pages, transaction logs require mental calculation and navigation. By the time a user digs into it, the decision to spend has already been made.

🔄

Midnight Auto-Reset

Automatic daily resets remove friction completely. If users had to manually reset a counter, it would be forgotten. The auto-reset ensures a fresh start every single day.

The Strategy

Zero-Friction Design Decisions

To keep GPay's fast, tap-and-go experience intact, I based the design on four key architectural decisions focused on simplicity and awareness.

Decision 1: Zero Setup Required

No budgets to configure or daily limits to set. The tracker is useful from the very first payment, for every type of user, with absolutely zero configuration friction.

Decision 2: Context-Aware Placement

Placed directly above the amount field, which is where the user's focus naturally goes before entering a payment. No extra navigation, no extra taps.

Decision 3: Informational, Not Judgmental

The indicator presents a clean number with no judgmental colors or limit bars. It trusts the user's judgement, informing them without making them feel restricted.

Decision 4: Automatic Maintenance

The daily spend total is calculated dynamically and resets automatically at midnight. The user never has to maintain or think about the tool; it just works.

User Journey

A Real Two-Payment Daily Journey

A step-by-step walkthrough showing how GPay dynamically updates and tracks the user's spending across a single day.

01

Open Google Pay

User launches GPay home screen to make a payment.

↓
02

Start First Payment

Opens payment screen for Saurav. Today's Spend displays ₹0 at the top.

↓
03

Enter Amount

Inputs ₹100 to pay Saurav. Today's Spend remains ₹0.

↓
04

Confirm UPI Pay

User confirms transaction of ₹100 from bank account.

↓
05

Payment Success (₹100)

GPay confirms the transaction of ₹100 is complete.

↓
06

Start Second Payment

Later, user opens payment screen for David. Today's Spend has dynamically updated to ₹100.

↓
07

Enter Amount

Inputs ₹200 to pay David. Today's Spend is visible at ₹100, providing instant budget awareness.

↓
08

Confirm UPI Pay

User initiates and confirms the second payment of ₹200.

↓
09

Payment Success (₹200)

Payment of ₹200 goes through. Total day's spend has now reached ₹300.

↓
10

Midnight Auto-Reset

At midnight, the counter resets back to ₹0 automatically for a fresh start.

Typography & Color

The design foundation for the GPay Spend Indicator feature, utilizing Google's official brand design tokens to maintain platform consistency.

Typography
Aa
Roboto
Primary Sans
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Google's primary interface typeface. Selected for its highly legible numeric weights and structured layout across Android platforms.
Primary Color

Brand Primary

#FFFFFF
Secondary & Functional Colors
#1A73E9
#0C56CF
#34A853
#EA4335
Problem Space & Solutions

Real Problems. Smart Solutions.

The Challenges

P1

GPay users pay blindly throughout the day with zero daily total visibility.

P2

Transaction history requires navigating away and is buried deep in the app.

P3

Account balance only shows what is left, not how much has been spent today.

P4

Traditional budget tracking demands tedious setup, planning, and maintenance.

P5

Overspending is only noticed after the transactions are complete and cash is gone.

The Interventions

S1

Added the Today's Spend Indicator directly on the payment page.

S2

Placed the indicator above the amount entry field for contextual visibility.

S3

Displays a simple running total that resets automatically at midnight.

S4

Zero configuration required—works out of the box from the first payment.

S5

Provides non-judgmental, purely informational feedback to foster conscious spending.

Impact

Metrics That Matter

5/5

Users tested couldn't state daily spend without opening logs

0 Taps

Setup friction or configuration required to activate

2 Payments

In prototype journey (₹0 to ₹100 to ₹300 total spend)

1 Placement

Right above the amount field to ensure maximum visibility

Contextual Awareness: Displaying the total spend at the exact point of payment empowers users to pause and evaluate.
Zero-Overhead Tracking: Because there is no setup flow, spontaneous spenders benefit from day one without setting a formal budget.
Automatic Life-Cycle: The auto-reset at midnight removes maintenance work, ensuring the feature remains useful indefinitely.
Reflection

What I Learned

01

Simple is Powerful

The best UX solutions are not always the most complex ones. A simple running total placed in the right spot is more effective than full budgeting dashboards that users rarely visit.

02

Reposition Existing Data

GPay already had the transaction logs. UX design is often about relocating existing data to a moment where it can actively support user behavior.

03

Lived Experience is Research

Experiencing the frustration myself drove a focused, honest solution. Personal habits can be a powerful launchpad for identifying universal usability issues.

Next Steps

Future Roadmap

🍔

Category Breakdown

Display daily spending grouped by categories (e.g. food ₹150, transport ₹80) without manual tagging effort.

📈

Weekly Pattern Insights

Show weekly spending charts to help users identify which days they tend to spend the most.

🚨

Optional Soft Limit

Allow users to set a soft daily spend threshold. The indicator shifts to orange/red as they approach or cross it.

👥

Shared Bill Split Awareness

Differentiate between personal purchases and split group bills for couples or housemates.

"Because knowing what you spent before you spend again is not a feature — it is common sense that every payment app should have built in."