Federal Bank - Banking App
Federal Bank is one of India's leading private sector banks, serving millions of customers across retail banking, payments, savings, and credit. With a growing focus on digital-first experiences, the bank set out to reimagine its mobile banking app, moving from a traditional, function-led interface to a modern, motion-led, trust-driven experience.
The goal was simple. Build a banking app that feels as confident, secure, and effortless as the brand itself, designed for everyday transactions and long-term financial growth.
Role
Visual Direction, UI & Interaction
Duration
Apr 2026
Outcome
MVP turned into Full Time
Rough Outline
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.
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.
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.
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)
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.
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.
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.
The onboarding flow introduces Federal Bank's three core pillars (Pay & transfer, Save, Invest & Grow, and Credit, made effortless) through a 3D-illustrated, scrollable narrative. Each screen pairs a clear value proposition with a tactile visual, making the brand feel modern without losing the trust expected from a bank.
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.
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.
