Back

Federal Bank - Mobile Banking App

Federal Bank serves millions of customers across payments, savings, and credit. But its mobile app was built function-first: every screen a form, every task a chore, nothing that made banking feel like anywhere you'd want to stay. The brief was to move the app from transactional to trust-first, redesigning the everyday flows people actually live in, onboarding, payments, and goal-based saving, so the experience felt as confident and effortless as the brand behind it.

Role

Product Design, UI & Interaction

Role

Product Design, UI & Interaction

Duration

One month

Duration

One month

Outcome

Pitch won Federal Bank's full app account

Outcome

Pitch won Federal Bank's full app account

Approach

We focused the engagement on three core flows that defined the everyday experience of a Federal Bank customer. Onboarding and homepage, bill payments, and goal setting and rewards. Each flow was designed end-to-end, with attention to motion, hierarchy, and brand consistency.

The three flows together represented the most-used touchpoints in a customer's daily banking, and the surfaces where a refreshed experience would have the highest impact.

Flow 2

Flow 1

Flow 3

Onboarding & Homepage

Bill Payment Flow

Goal Setting Flow

Wireframe

Before moving to high-fidelity, we mapped the entire app structure across onboarding, login, home, and bill payment flows, covering both new and returning user journeys. Multiple concepts were explored for the home screen to test how dashboard, quick actions, and AI-led recommendations could coexist without overwhelming the user.

Flow 1

Onboarding & Homepage

A banking app has seconds to earn trust. A first-time user is deciding, mostly without realising it, whether this feels like somewhere safe to keep their money. Onboarding opens with a short scrollable narrative built around the three things people actually come to a bank for: "Pay & transfer instantly," "Save, Invest & Grow," and "Credit, made effortless." Each screen pairs one clear promise with a tactile visual, so the app feels modern without spending down the trust a bank depends on.

People open a bank app dozens of times a month, usually for a ten-second check. Full login every time is the single biggest friction in the app. So Face ID is the default, dropping known users straight to the dashboard, with MPIN as a fallback rather than the first ask.

Banking apps bury most features three menus deep, and people give up before finding them. The AI assistant lets users ask for what they need in plain language (open a deposit, show upcoming bills) instead of hunting for it, turning navigation depth into a single question.

Opening a fixed deposit usually means bouncing between a calculator, a product page, and a form, and users leak out at every jump. Here it collapses to one screen: model the amount, see the real return, invest. Intent never has to survive a handoff.

Flow 2

Bill Payment

Flow 2

Bill payment was redesigned as a three-step journey: select biller, confirm, complete. The flow uses progressive disclosure to reduce visual load, surfaces the most-used billers as quick categories, and ends with a clean confirmation screen that doubles as a shareable receipt. Every step was designed to feel fast, predictable, and reassuring.

Flow 3

Goal Setting & Rewards

Flow 3

A goal-based savings experience built around a real customer aspiration. Saving for an iPhone, a trip, a future need. Users set a target, track progress visually, and receive nudges that reward consistent saving habits. The flow integrates a celebratory home screen widget that surfaces savings wins back to the user in their daily phone use, turning a financial app into a quiet motivator.

Let's see Design Language

Pattern

Federal Bank’s refreshed brand identity marks a significant shift towards a more contemporary and future-ready outlook. The transition from a straight ‘F’ to a curved, flowing form reflects motion, progress, and adaptability — values central to modern banking experiences.

The new logo’s wing-inspired curves symbolize:

Forward momentum
Confidence and stability
Readiness for the future
Our UI design translates this evolution into digital touchpoints, ensuring the app feels distinctly Federal, while also aligning with global fintech and platform-led design standards.

Forward momentum
Confidence and stability
Readiness for the future
Our UI design translates this evolution into digital touchpoints, ensuring the app feels distinctly Federal, while also aligning with global fintech and platform-led design standards.

Visual Direction

1. Wing & Motion Language
The curved wings derived from the new Federal Bank logo
are used as:

Background patterns
Dashboard surface layers
Section dividers and visual anchors

These subtle curves introduce movement without overwhelming functional content, creating a sense of continuous flow across screens.

2. Depth Through Glass
To complement the brand’s forward-looking identity, we adopted a glassmorphism-inspired UI approach, adding:

Layered depth
Soft translucency
Focused content hierarchy

This approach mirrors the evolving expectations of modern users accustomed to premium OS-level experiences.

1. Wing & Motion Language
The curved wings derived from the new Federal Bank logo
are used as:

Background patterns
Dashboard surface layers
Section dividers and visual anchors

Layered depth
Soft translucency
Focused content hierarchy

This approach mirrors the evolving expectations of modern users accustomed to premium OS-level experiences.

Dashboard Card Visual

To bring a distinctive Federal Bank character into the app, we extended the visual language of the bank’s premium credit cards into the mobile dashboard.

The dashboard cards subtly incorporate the same 3D isometric animal forms seen on Federal Bank’s card range — representing strength, aspiration, and growth.

These elements act as visual signatures within cards, reinforcing brand recall while keeping the interface clean, functional, and banking-appropriate.

Examples:

Lion → Strength & leadership (Portfolio / Wealth)
Birds → Freedom & growth (Savings / Investments)

Lion → Strength & leadership (Portfolio / Wealth)
Birds → Freedom & growth (Savings / Investments)

Visual Direction

The colour palette is built directly from Federal Bank’s brand colours — Blue and Yellow, ensuring strong continuity between the brand and the digital experience.

To support the glassmorphism UI direction, we introduced deeper, darker shades of blue as the primary background. The dark theme:

Enhances the visibility of glass layers
Adds depth and hierarchy
Creates a premium, modern banking feel

Yellow is used strategically as:

Accent
CTA highlights
Visual focus points

This results in a palette that is on-brand, high-contrast, and future-ready.

Enhances the visibility of glass layers
Adds depth and hierarchy
Creates a premium, modern banking feel

Yellow is used strategically as:

Accent
CTA highlights
Visual focus points

This results in a palette that is on-brand, high-contrast, and future-ready.

Typeface

Manrope is an open-source modern sans-serif typeface selected for its clean and contemporary character. Its high legibility across screen sizes and clear representation of numbers make it well-suited for a banking application. The font’s simple, geometric structure reinforces clarity, professionalism, and trust in the digital experience.

Iconography

To align with the glass UI aesthetic, we adopted a duotone icon style that visually resembles layered glass.

Creates visual depth
Feels contemporary and premium
Integrates seamlessly with translucent surfaces
Maintains clarity at small sizes
The icons remain simple, intuitive, and accessible while complementing the overall futuristic look of the app.

To align with the glass UI aesthetic, we adopted a duotone icon style that visually resembles layered glass.

Creates visual depth
Feels contemporary and premium
Integrates seamlessly with translucent surfaces
Maintains clarity at small sizes
The icons remain simple, intuitive, and accessible while complementing the overall futuristic look of the app.

We made it !!!

This started as a pitch for a single app concept. It won Federal Bank's entire mobile banking account. The work was convincing enough that the bank handed over the full redesign of their app, which is the clearest signal design can give: it didn't just pass a review, it closed a client.

The whole pitch aimed at one shift, moving Federal Bank's app from function-first to trust-first. With the full account now in build, the measures that matter are the honest ones: whether people complete a bill payment without dropping off, how often they return to set and track a goal, and whether a first login turns into a habit.

Federal Bank - Mobile Banking App