Shibuix

Home

Work

Resume

LinkedIn

Behance

Made by Shibu

Web

UI/UX Design 2025

PAYMENT
EXPERIENCE

PAYMENT
EXPERIENCE

PAYMENT
EXPERIENCE

About

This case study focuses on redesigning the payment experience to reduce drop-offs, build user trust, and streamline the transaction flow. The payment page plays a crucial role in converting users into paid members.

This case study focuses on redesigning the payment experience to reduce drop-offs, build user trust, and streamline the transaction flow. The payment page plays a crucial role in converting users into paid members.

Problem

Problem

The desktop payment page was cluttered, outdated, and lacked intuitive UPI options—causing confusion, low trust, and increased drop-offs during checkout.

The desktop payment page was cluttered, outdated, and lacked intuitive UPI options—causing confusion, low trust, and increased drop-offs during checkout.

Goal

Goal

To create a modern, structured desktop payment flow with clear UPI options and visual clarity—building trust, reducing friction, and increasing successful payment completions.

To create a modern, structured desktop payment flow with clear UPI options and visual clarity—building trust, reducing friction, and increasing successful payment completions.

Design Process

Design Process

To enhance the trust and usability of Bharat Matrimony’s payment experience, we followed a

user-centered design process

focused on reducing drop-offs, simplifying decision-making, and modernizing the visual interface. The goal was to improve conversion while making the payment flow seamless and reassuring.

To enhance the trust and usability of Bharat Matrimony’s payment experience, we followed a

user-centered design process

focused on reducing drop-offs, simplifying decision-making, and modernizing the visual interface. The goal was to improve conversion while making the payment flow seamless and reassuring.

01

Discovery &

Research

Requirement Gathering

Competitive Analysis

Structure & Planning

User Flow Mapping

Wireframe

02

03

Design & Prototyping

Hifi Design

Interaction Design

Design Systems

04

Validation & Testing

Stakeholder Reviews

Usability Checks

Handoff & Implementation

Support

Handoff Specifications

Developer Collaboration

05

01

Discovery &

Research

Requirement Gathering

Competitive Analysis

Structure & Planning

User Flow Mapping

Wireframe

02

03

Design & Prototyping

Hifi Design

Interaction Design

Design Systems

04

Validation & Testing

Stakeholder Reviews

Usability Checks

Handoff & Implementation

Support

Handoff Specifications

Developer Collaboration

05

Site map

Select Payment Method

Select Bank

Enter UPI ID

Scan QR

UPI

Enter GooglePay ID

Google Payment

Login to Bank Account

Net banking

Schedule Collection

Doorstep Collection

Enter Bank Details

NEFT

Confirm Payment

Payment Successful

Receive Confirmation

Googlepay

QR code userflow

Step 1

The user can navigate the list of payment methods, select Google Pay, and view a 'Scan QR Code' CTA.

Step 2

When the user clicks on the QR code, a timer is initiated.

Step 3

The user will initiate the payment via Google Pay.

Step 4

Once the user completes the payment via Google Pay, a confirmation message will be displayed.

Wireframe

Wireframe

This wireframe represents the core payment interface for the platform, designed to give users multiple secure and flexible options to complete their transaction. The goal was to create a trust-focused, streamlined flow that minimizes drop-offs and improves overall payment completion rates.

This wireframe represents the core payment interface for the platform, designed to give users multiple secure and flexible options to complete their transaction. The goal was to create a trust-focused, streamlined flow that minimizes drop-offs and improves overall payment completion rates.

Select Payment Mode

Pay via UPI

Credit / Debit Card

Google Pay

Net Banking

Doorstep Collection

NEFT/RTGS

Scan and Pay

Show QR Code

Scan QR code using Google Pay to pay

OR

Enter mobile number registered with Google Pay

Enter Mobile number

Pay ₹4425

Payment request will be sent to your Google Pay app

Tamilmatrimony

User

Order Summary

Package Selected

Gold - 3 Months

₹4,900

Profile highlighter for 15 days

₹350

Discount

- ₹1,500

Subtotal

₹3,750

GST 18%

₹675

You have to pay

₹4,425

AstroMatch

Check 150 horoscope matches for just ₹1500.

Select Payment Mode

Pay via UPI

Credit / Debit Card

Google Pay

Net Banking

Doorstep Collection

NEFT/RTGS

Scan and Pay

04:00

Scan QR code using Google Pay to pay

Enter mobile number registered with Google Pay

Enter Mobile number

Pay ₹4425

Payment request will be sent to your Google Pay app

Tamilmatrimony

User

Order Summary

Package Selected

AstroMatch

Check 150 horoscope matches for just ₹1500.

Select Payment Mode

Pay via UPI

Credit / Debit Card

Google Pay

Net Banking

Doorstep Collection

NEFT/RTGS

Scan and Pay

04:00

Scan QR code using Google Pay to pay

Enter mobile number registered with Google Pay

Enter Mobile number

Pay ₹4425

Payment request will be sent to your Google Pay app

Tamilmatrimony

User

Order Summary

Package Selected

AstroMatch

Check 150 horoscope matches for just ₹1500.

Select Payment Mode

Pay via UPI

Credit / Debit Card

Google Pay

Net Banking

Doorstep Collection

NEFT/RTGS

Scan and Pay

04:00

Scan QR code using Google Pay to pay

Enter mobile number registered with Google Pay

91+9999999999

Pay ₹4425

Payment request will be sent to your Google Pay app

Tamilmatrimony

User

Order Summary

Package Selected

AstroMatch

Check 150 horoscope matches for just ₹1500.

Select Payment Mode

Pay via UPI

Credit / Debit Card

Google Pay

Net Banking

Doorstep Collection

NEFT/RTGS

Scan and Pay

04:00

Scan QR code using your preferred UPI app to pay

Enter mobile number registered with Google Pay

91+9999999999

Pay ₹4425

Payment request will be sent to your registered phone number

Tamilmatrimony

User

Order Summary

Package Selected

AstroMatch

Check 150 horoscope matches for just ₹1500.

Tamilmatrimony

User

₹4,425

Thank you for the Order

Gold Membership 3 months

View Matches

UI Solution

UI Solution

A clean, intuitive payment interface offering multiple secure options, built to boost user trust, reduce drop-offs, and improve conversion rates.

A clean, intuitive payment interface offering multiple secure options, built to boost user trust, reduce drop-offs, and improve conversion rates.

TYPOGRAPHY

Inter

Sans-Serif Typeface

2017

Inter is a modern, versatile typeface, optimized for legibility

across interfaces, with generous spacing and high x-height.

Regular

a

Medium

a

Bold

a

COLOR

#F2681d

#009339

#F2681d

2A60D9

Grid

Grid

A responsive grid layout that ensures consistent alignment, spacing, and scalability across screen sizes, enhancing visual hierarchy and UI clarity.

A responsive grid layout that ensures consistent alignment, spacing, and scalability across screen sizes, enhancing visual hierarchy and UI clarity.

Select Payment Mode

Pay via UPI

Credit / Debit Card

Google Pay

Net Banking

Doorstep Collection

NEFT/RTGS

Scan and Pay

Scan QR code using Google Pay to pay

OR

Enter mobile number registered with Google Pay

Enter Mobile number

Pay ₹4425

Payment request will be sent to your Google Pay app

tamil

matrimony

Shibu

Order Summary

Package Selected

Gold - 3 Months

₹4,900

Profile highlighter for 15 days

₹350

Discount

- ₹1,500

Subtotal

₹3,750

GST 18%

₹675

You have to pay

₹4,425

AstroMatch

Check 150 horoscope matches for just ₹1500.

Margin

120 PX

Gutter

16 PX

12

Coloun

Margin

120 PX

UI KIT & Microinteraction

UI KIT & Microinteraction

A comprehensive collection of reusable UI components — including buttons, inputs, cards, and icons — paired with subtle micro interactions like animations and feedback cues, designed to ensure consistency, speed up development, enhance user delight, and deliver a smooth, responsive experience across the platform.

A comprehensive collection of reusable UI components — including buttons, inputs, cards, and icons — paired with subtle micro interactions like animations and feedback cues, designed to ensure consistency, speed up development, enhance user delight, and deliver a smooth, responsive experience across the platform.

Handoff & Implementation Support

Handoff & Implementation Support

A responsive grid layout ensure a smooth transition from design to development by providing detailed specifications, assets, design systems, and interaction guidelines. Our team actively supports developers during implementation, addressing queries, reviewing builds, and ensuring the final product stays true to the intended design vision.yout that ensures consistent alignment, spacing, and scalability across screen sizes, enhancing visual hierarchy and UI clarity.

A responsive grid layout ensure a smooth transition from design to development by providing detailed specifications, assets, design systems, and interaction guidelines. Our team actively supports developers during implementation, addressing queries, reviewing builds, and ensuring the final product stays true to the intended design vision.yout that ensures consistent alignment, spacing, and scalability across screen sizes, enhancing visual hierarchy and UI clarity.

UI KIT

Select Payment Mode

Pay via UPI

Credit / Debit Card

Google Pay

Net Banking

Doorstep Collection

NEFT/RTGS

Scan and Pay

Scan QR code using Google Pay to pay

OR

Enter mobile number registered with Google Pay

Enter Mobile number

Pay ₹4425

Payment request will be sent to your Google Pay app

tamil

matrimony

Shibu

Order Summary

Package Selected

Gold - 3 Months

₹4,900

Profile highlighter for 15 days

₹350

Discount

- ₹1,500

Subtotal

₹3,750

GST 18%

₹675

You have to pay

₹4,425

AstroMatch

Check 150 horoscope matches for just ₹1500.

OR

Enter mobile number registered with Google Pay

Enter Mobile number

Pay ₹4425

Payment request will be sent to your Google Pay app

32

32

24

24

24

Select Payment Mode

Pay via UPI

Credit / Debit Card

Google Pay

Net Banking

Doorstep Collection

NEFT/RTGS

Scan and Pay

Scan QR code using Google Pay to pay

OR

Enter mobile number registered with Google Pay

Enter Mobile number

Pay ₹4425

Payment request will be sent to your Google Pay app

tamil

matrimony

Shibu

Order Summary

Package Selected

Gold - 3 Months

₹4,900

Profile highlighter for 15 days

₹350

Discount

- ₹1,500

Subtotal

₹3,750

GST 18%

₹675

You have to pay

₹4,425

AstroMatch

Check 150 horoscope matches for just ₹1500.

Order Summary

Package Selected

Gold - 3 Months

₹4,900

Profile highlighter for 15 days

₹350

Discount

- ₹1,500

Subtotal

₹3,750

GST 18%

₹675

You have to pay

₹4,425

32

32

32

20

20

Scan and Pay

Scan QR code using Google Pay to pay

32

32

24

24

10

10

Result

Result

+8% Increase in Conversion Rate

Streamlined layout and improved trust
indicators led to more completed transactions.

Faster UPI Payments

Introduction of QR scan and mobile number flows significantly reduced payment time.

Reduced Drop-offs

Introduction of QR scan and mobile number flows significantly reduced payment time.

Improved User Satisfaction

Both tech-savvy and older users found the new flow easier to navigate, reducing the need for support

Shibuix

Copyright © 2025 Shibuix.com

All rights reserved.

Shibuix

Copyright © 2025 Shibuix.com

All rights reserved.

Shibuix

Copyright © 2025 Shibuix.com

All rights reserved.