Chayananda Nagesh
All work Case study · BRAC Bank Design System

Rebuilding BRAC Bank's design system so one library serves every theme, device and banking segment

Company
Brillio for BRAC Bank
Platform
Web + mobile · FinTech
Overview

The problem

BRAC Bank's app ran on an incomplete design system left by a previous vendor. The component library was undocumented and missing key molecules and organisms, and the colour palette didn't match the bank's own logo and brand. It also couldn't scale to dark and light modes, desktop and mobile, or the bank's Core, Tara and Platinum segments, and accessibility wasn't fully addressed. BRAC Bank partnered with Brillio to rebuild it as one unified, accessible Atomic Design System.

Engagement

Brillio design team working with BRAC Bank's internal design team and brand stakeholders, with biweekly governance reviews.

Sector

Financial services (FinTech).

Scope

Design-debt audit, brand-aligned tokens, an Atomic component library, multi-theme support and WCAG 2.1 AA accessibility, delivered as Figma documentation.

Design approach grounded in my Interaction Design training at the National Institute of Design (NID).

Process

How I worked

Discovery and audit

Audited the legacy system to find gaps in documentation, missing component hierarchies and brand colour misalignment.

Brand and token realignment

Built a unified, brand-aligned token system that matches BRAC Bank's logo and corporate identity.

System architecture

Expanded the limited library with Atomic Design, scaling basic atoms into fully documented molecules and organisms.

Multi-theme strategy

Optimised components for dark and light modes, desktop and mobile, and the Core, Tara and Platinum banking segments.

Governance

Ran biweekly review workshops with BRAC's design team and brand stakeholders to keep decisions aligned and approved.

Validation and handoff

Embedded WCAG 2.1 AA into the core tokens and handed off production-ready Figma documentation for cross-functional review.

Impact

What moved

100%Brand alignmentColour palette corrected to match BRAC Bank's logo and corporate identity across all digital platforms.
AAWCAG 2.1 complianceBuilt into the core tokens: colour contrast, type hierarchy and component states.
2–3×Team productivityFor internal design and development teams, from pre-approved components and production-ready documentation.
12Theme combinations2 viewports × 2 lighting modes × 3 banking segments (Core, Tara, Platinum) from one library.
Before / after

What changed for users

Before

  • Fragmented web and mobile experience on an incomplete legacy system
  • Colour system that didn't match BRAC Bank's logo and brand
  • Small, undocumented library missing key molecules and organisms
  • No structure for dark mode, light mode or responsive viewports
  • Accessibility not fully addressed

After

  • One cross-platform framework on a documented Atomic Design System
  • Colour palette that mirrors the corporate identity
  • Reusable atoms, molecules and organisms, all documented
  • Themes across 2 lighting modes, 2 viewports and 3 banking segments
  • WCAG 2.1 AA built into tokens and component states
NextImpakt IQBrillio for Impakt IQ · Web · B2B SaaSAlso seeTCS TimesheetTata Consultancy Services · Mobile · iOS & Android (Ionic)Also seeUL StudioUrban Ladder · Tablet · iPadOSAlso seeHilton BOSS EchoHilton · Web + mobile · SaaSAlso seeNokia GPTNokia · Web · GenAI assistant + admin portal
Open to Lead & Senior roles

Let's build something people finish using.

I'm looking for senior and lead product design roles on complex enterprise and AI products. Based in Bengaluru, open to hybrid and remote.