HomeWorkServicesAboutBlogContact
Start a Project
Back to Work
Mobile App·Web App·Brand Identity

BoB Card, Bank of Baroda

Making a public sector bank feel digital-first, without losing trust.

Client
Bank of Baroda
Year
2024
Scope
8 Weeks · Design Lead · B2C Banking
•••• •••• •••• 4821
Rahul Sharma · 09/27
₹2.4L
Total Spent
14,820
Rewards Pts
Jun 15
Due Date
64%
Utilization
Bank of Baroda
BOB
B
01·Context

One of India's largest banks, losing ground to fintech challengers.

Bank of Baroda has built genuine trust across decades and millions of customers. But in a rapidly shifting digital ecosystem, legacy trust alone was no longer enough. The generation Baroda needed to attract, digital-first, fintech-fluent, used to the experience quality of Slice, OneCard, and CRED, was not seeing themselves in BoB Card's existing digital presence.

The ask was ambitious: a complete digital and visual transformation that could stand shoulder to shoulder with leading private and fintech brands, without losing the core essence of credibility and approachability that makes a public sector bank worth choosing.

Dated
visual identity failing to attract younger users
Fragmented
ecosystem, no coherence between mobile and web
Text-heavy
layouts with poor hierarchy burying key actions

We were not just designing new interfaces. We were rebuilding trust, modernizing perception, and shaping a visual and experiential foundation that could scale for years.

Project brief, Bank of Baroda BoB Card
02·The Challenge

Four failures happening simultaneously.

This wasn't a single-point redesign problem. Every layer of the BoB Card experience was underperforming at once, the visual brand, the information architecture, the mobile experience, and the coherence between platforms. Each fed the others, making incremental fixes insufficient.

Fragmented Ecosystem

Users switching between multiple touchpoints for simple tasks
No coherent experience between mobile and web
Transactions, rewards, and card management required separate flows

Outdated Visual Identity

Logo and palette not reflecting modern digital aesthetics
Visual language failing to connect with younger, fintech-native users
Heritage retained, but digital confidence entirely absent

Data Overload & Poor Hierarchy

Key information buried in text-heavy, unstructured layouts
No visual guidance to help users identify priority actions
Financial data displayed without meaning or context

Limited Mobile Experience

Mobile app treated as a shrunken version of the website
No intuitive gestures, micro-interactions, or mobile-native patterns
Hierarchy not optimised for smaller screens or on-the-go use
03·Vision

Four principles that governed every decision.

Before a single screen was designed, four guiding principles were established. These weren't aspirational statements, they were decision filters that every design choice was tested against throughout the eight weeks.

01

Consistency Across Platforms

Every visual and functional element needed to feel unified, whether on mobile, web, or in physical brand materials. One system, not three parallel ones.

02

Simplicity & Clarity

Easy navigation, structured information, and a visual hierarchy that empowers users to find what they need, without reading, scanning, or guessing.

03

Brand Modernisation

BoB Card's identity had to feel aspirational yet grounded, building on the legacy of the parent brand while claiming its own digital-first visual language.

04

Data as Insight

Instead of displaying numbers, the data had to communicate meaning. Spending, rewards, and statements needed to help users act, not just inform them.

04·Approach

Three parallel tracks. One coherent outcome.

The project ran as three simultaneous workstreams, Brand Transformation, Experience Design, and System Thinking. Running them in parallel was deliberate: decisions in each track needed to inform and constrain the others in real time.

01

Brand Transformation

Reimagining BoB Card as an independent yet connected identity under the Bank of Baroda umbrella. New logo built around simplicity, recognition, and forward motion, retaining the orange while introducing clean geometry.

Logo redesign
Colour system
Typography
Brand book
02

Experience Design

Two interconnected products designed in tandem, mobile app for on-the-go access and web app as a powerful control centre. Mobile prioritised speed; web prioritised depth. Both shared the same visual grammar.

Mobile app (iOS & Android)
Web app
User flows
Prototypes
03

System Thinking

A component-based design system built on atomic design principles ensured consistency across all platforms. Reusable UI components, colour tokens, and interaction guidelines documented for developer handoff.

Design system
Component library
Colour tokens
Dev handoff
05·Brand Identity

Heritage anchored. Digital-first expressed.

The new BoB Card identity retained the brand's most recognisable asset, the orange, and built an entirely new visual system around it. The goal was to feel familiar to existing customers and credible to new ones, without looking like either a legacy PSU product or a generic fintech startup.

Element
Choice
Rationale
Primary colour
Baroda Orange #F97316
Anchors brand continuity across all touchpoints
Secondary
Deep Brown #3B1A08 + Gold #D4AF37
Evoke institutional stability and sophistication
Neutral
Slate #64748B + Cream #F5F0EB
Digital utility without coldness
Display font
Syne 800
Bold, modern, headings and display
Body font
DM Sans 300/400
Humanist, readable, body and sub-headings
06·Mobile App

Quick, simple, and built for every type of user.

The mobile app was the experience centrepiece, the first place most users would encounter the new BoB Card. It had to work for a tech-savvy young professional and a first-time digital banking user equally well. Speed, legibility, and intuitive gesture patterns were non-negotiable.

Dashboard

Unified snapshot: balance, upcoming payments, credit limit utilisation

Transactions

Colour-coded categories with filters and spend comparisons

Rewards

Personalised offers based on spending patterns

Card Control

Block, unblock, and set limits, instant control and security

Alerts

Visual priority hierarchy keeps critical messages prominent without overwhelming

07·Web App

A control centre for users who want the full picture.

Where the mobile app prioritised speed and simplicity, the web platform was designed for depth. Users who wanted to analyse spending patterns, download statements, manage security settings, or raise service requests got a richer, more detailed experience, built on the same visual system but expressed at desktop density.

Account Overview & Insights

Data visualisation modules providing clear visual summaries of spending patterns, outstanding balances, and reward points, numbers translated into decisions.

Statements & Reports

Simplified downloads, search filters, and transaction categorisation. Reduced friction in accessing financial records, a task that previously required navigating multiple menus.

Service Requests & Support

Streamlined forms with contextual guidance and status tracking. Users could raise requests and track resolution without calling a helpline.

Security & Settings

Multi-layer authentication guidance and biometric setup. Security settings redesigned to feel accessible and empowering, a deliberate trust-building gesture.

08·Impact

Five outcomes that proved the investment.

Increased User Engagement

Clean layouts, faster interactions, and simplified navigation encouraged exploration of features that previously went undiscovered.

Improved Brand Perception

Focus group feedback showed users perceived BoB Card as significantly more trustworthy and approachable. The refreshed identity positioned it as a credible digital product.

Operational Efficiency

The component-based design system streamlined collaboration between design and development teams and became the reference for new digital initiatives.

Faster User Onboarding

Simplified user journeys helped reduce onboarding drop-offs during registration. New users reached their first meaningful action faster.

Scalable Foundation for Growth

The design system became a strategic asset beyond BoB Card. Other Bank of Baroda business units began adopting similar frameworks, multiplying the investment's value.

When design, strategy, and collaboration come together, even the most established institutions can evolve gracefully into the digital age.

Project summary, Bank of Baroda BoB Card
09·Learnings

What designing for a legacy institution teaches you.

01

Modernisation means amplifying, not erasing

The best results came from identifying what made the BoB brand trustworthy and building on that foundation, not replacing it. Heritage is an asset, but only when translated into a modern visual language.

02

Clarity builds financial confidence

In financial product design, simplicity is not just an aesthetic preference, it is a trust mechanism. Every reduction in cognitive load is a direct increase in the user's confidence in the product.

03

Collaboration makes data honest

Data visualisation components became genuinely useful only through continuous collaboration with BoB's analytics team. Beautiful charts that misrepresent data destroy trust. Design and data must work in tandem.

04

Design systems are strategic infrastructure

The modular design system ended up being the most enduring deliverable, not the individual screens. Investing time in the foundation meant every future update could maintain consistency.

Bank of Baroda's BoB Card platform was functional but fragmented, outdated, and failing to engage the digital-first generation it needed most. A complete ecosystem redesign, mobile app, web app, and brand identity, rebuilt it from the ground up, with a single unifying design system underneath.

More Work

Like what you see?

Let's build something worth a case study.