Sprng Design Studio

yourmail@gmail.com

Connect

Tools Used

Figma, Figjam
Notion
Google Forms

Figma, Figjam

Notion

Google Forms

Overview

With COVID hitting the world, every activity has become digital, from getting groceries to completing your education. In these times, a private Indian bank wants to design an app for their customers to carry out their daily banking transactions from their homes. The bank, let's call it ‘HICB’ , wants to create an app on which their users can carry out their transactions like sending or receiving money, applying for loans, paying bills etc.

Problem Statement

Designing a mobile app where users can access the details of their bank account and complete transactions directly from phone, tablet, or mobile device via multi mode like NEFT, RTGS & IMPS

@sprngdesign

Guiding Principles

Imagine accessing your bank account and handling all your financial needs, anytime, anywhere – seamlessly and securely. We all juggle busy lives, and traditional banking with limited hours and long queues isn't always convenient. This is where our innovative mobile banking app shines.

User-centric Design

Everything we create revolves around user needs and frustrations. We prioritize clarity, ease of use, and intuitive navigation.

User-centric Design

Everything we create revolves around user needs and frustrations. We prioritize clarity, ease of use, and intuitive navigation.

User-centric Design

Everything we create revolves around user needs and frustrations. We prioritize clarity, ease of use, and intuitive navigation.

Frictionless Experience

Forget queues and clunky interfaces. We strive for a streamlined, efficient experience that makes managing finances quick and enjoyable.

Frictionless Experience

Forget queues and clunky interfaces. We strive for a streamlined, efficient experience that makes managing finances quick and enjoyable.

Frictionless Experience

Forget queues and clunky interfaces. We strive for a streamlined, efficient experience that makes managing finances quick and enjoyable.

Visual Clarity & Continuous Improvement

Clear design + familiar tools + organized info = trust & a user-friendly experience. We constantly evolve with user feedback & data.

Visual Clarity & Continuous Improvement

Clear design + familiar tools + organized info = trust & a user-friendly experience. We constantly evolve with user feedback & data.

Visual Clarity & Continuous Improvement

Clear design + familiar tools + organized info = trust & a user-friendly experience. We constantly evolve with user feedback & data.

Meet the Personas

Meet Anjana and Anand, a busy professional and a retired professional constantly on the go. Our research revealed users like Anjana ans Anand crave a mobile banking experience that's intuitive, efficient, and empowers them to take control of their finances. Traditional apps often fall short, with confusing interfaces, hidden fees, and limited transaction options.

The Power of Multi-Mode

Skip lines, ditch clunky websites. Choose the perfect transfer speed: lightning-fast RTGS for emergencies, budget-friendly NEFT for daily needs. Our app makes it clear, and simple.

Dive into an app built for you. Clean design, effortless navigation, and key info a tap away. Manage balances, send funds, even multi-mode transfers (NEFT, RTGS, IMPS) – all with ease.

Task Flows & IA

From Pocket Change to Power Play

Carrying out transactions via NEFT, RTGS, IMPS. Open the app, and your balance greets you like a long-lost friend. No digging, no delays, just instant clarity on your financial landscape.

Colours

Gilroy

Colours

Calm, Responsible, Wealth, Trust, power

Typography

Semibold

Gilroy-Semibold

Medium

Gilroy-Medium

Regular

Gilroy-Regular

Home Page Concepts:

Testing & Refinement

We didn't just design, we refined. User testing was crucial, helping us identify and address usability issues. Based on feedback, we optimized the transaction flow, making multi-mode payments even smoother and quicker. The result? A user-friendly app that empowers you to manage your finances with confidence.

Option 1

Top tabs had options like transfer types

Option 2

Transfer option is given on the bottom nav

Option 3

Request and transfer option given on top and are highlighted

Reason for Choosing Option 3

Transfer amount buttons are highlighted and not hidden in the bottom nav like the other screens

Recent transactions are enough to be shown and there was not necessity of showing beneficiaries on the main screen

Transfer amount buttons are highlighted and not hidden in the bottom nav like the other screens. Recent transactions are enough to be shown and there was not necessity of showing beneficiaries on the main screen

Lo-Fi Wireframes

Login Screen
Home
Fund Transfer
Add Beneficiary
Enter amount and remarks. Then select payment mode (NEFT, RTGS, IMPS)
Enter amount keypad
OTP Screen
Payment Successful

Impact & Future: Visual Design

Our app is not just a convenience; it's a paradigm shift in mobile banking. We envision a future where financial freedom lies at your fingertips, accessible across devices and empowering everyone to navigate their finances with ease.

Biometric Login

Logo

Tagline

Option to register or login for different account

Onboard into the app by easy loging features like touch ID and PIN.

Home Screen

Here is where the primary actions like fund transfers, account balance and other shortcuts like recent transactions and bill payments are accessed.

Home Screen

Here is where the primary actions like fund transfers, account balance and other shortcuts like recent transactions and bill payments are accessed.

Home Screen

Here is where the primary actions like fund transfers, account balance and other shortcuts like recent transactions and bill payments are accessed.

Search bar

Account details

Notifications

Recent transactions

Profile Menu

Shows more bills

Navigation bar with home, cards, services option

Enter amount and remarks

User can choose to pay now or later since adding and activating beneficiaries might take up time.

Lets user crosscheck the payee

Specifying the payment type will crosscheck the amount and show error when the requirement of min. max. amount are not met.

Enter Amount

Here user can enter payment amount and select payment mode according to the use case.

Enter Amount

Here user can enter payment amount and select payment mode according to the use case.

UX Case Study

5 mins read

Banking without Hassles

Services

User research

UI Design

Prototyping

User Testing

Empathy in pixels:

Transformed user pain points into a seamless banking experience, tap by tap, test by test, all to give users financial magic.

Home

HICB - Banking without Hassles