Back

Building and scaling a Merchant Design System

Built a 0-to-1 design system — a simple yet impactful foundation for the AU 0101 Business Platform.

In mid 2022, I embarked on a journey as the founding designer at for Commercial banking team at AU Bank to craft a design system. The overarching goals for this design system was to improve design processes, ensure brand consistency, facilitate communication, and create scalable workflows.

This endeavor was hatched after many months of planning - poring over best practices, benchmarking competitors, and aligning our stakeholders.

AU 0101 Business Mobile Banking App - Gateway to Business Banking Services

Team

Mayank - Design

Vishnu - Web Lead

Jogendra - App Lead

Role

Product Designer

Timeline

Sept 2022 - Jan 2024

Tools

Figma, Storybook

Why We Needed a System?

Inheriting a Styleguide, Not a DS: When I joined, I inherited an 10 page styleguide in .pdf, which consists of brands colours and anatomy for basic components.
The Lone Designer's Dilemma: As sole designer for AU 0101 business platform I had the responsibility of ensuring that I deliver all UI screen on time and design system could be the backbone which could help me to move faster
Looking Ahead: I knew the team would grow. We needed a single source of truth that could be used by future designers and developers to build a cohesive product, even when I wasn't in the room.

In March 2022, I joined as the first designer for the Commercial Digital Banking Team at AU Bank, a newly formed unit within the IT & Product Department. I oversaw mobile & web information architecture, scalability, systems, interaction designs, and building design vision for AU 1010 Business.

Few projects that I am particularly proud of are - Merchant Design System, Bank Tranfer, QR Collection, Statements

Problem at Hand

How can we create a design system that is simple, scalable, and easy for both designers and developers to adopt—while also enabling faster design turnarounds and efficient delivery?

The Gaps I Inherited

One of the biggest challenges in designing the AU0101 Business platform was the inconsistency between the style guide I received from marketing team and what was actually live across other AU Bank platforms. Sometimes I had to rely on the marketing team’s style guide, other times on what I saw in AU0101 Retail or other CIB platforms. But the two often didn’t match. I suspected developers were working with different assets, so I ran a quick site audit. My hunch was right—the audit revealed multiple variations of the same components, from buttons to input fields, scattered across different platforms.

In 2022, business owners were stuck using multiple apps to manage their company. Fintech apps (Razoray, OpenMoney) were good for payments but lacked full banking features, while bank apps (ICICI insta biz) had all the features but were too complicated to use. This created a lot of inefficiency.

Few projects that I am particularly proud of are - Merchant Design System, Bank Tranfer, QR Collection, Statements

Site Audit ran on August 2022

The Foundation: Crafting the Core Rules

Layout (Inspired by Samsung One UI)

I saw most apps in our space leaning heavily on Material or Apple's guidelines. To help our app stand out and feel more thoughtful, I drew significant inspiration from Samsung's One UI. Its patterns are user-tested at a massive scale, and its focus on ergonomics felt perfect for a mobile-first banking app.

Ergonomic Design: One UI’s patterns are user-tested at massive scale, and its focus on ergonomics made it a perfect fit for a mobile-first banking app.
Differentiated Approach: Most apps in our space leaned on Material or Apple’s guidelines. To help ours stand out and feel more thoughtful, I drew inspiration from Samsung’s One UI.
Risk Mitigation: By using patterns already tested by millions, we reduced the risk of usability issues in areas where we had limited bandwidth for user testing.

Few projects that I am particularly proud of are - Merchant Design System, Bank Tranfer, QR Collection, Statements

Typography: Accessible, Flexible, and Open-Source

After extensive research into typography science to understand characteristics of typeface to find legibility and readable typeface, I chose Noto Sans. It's open-source, highly readable, and its friendly yet professional feel was perfect for building trust. Which later incorporated for all AU Bank digital products.

Instead of creating rigid text styles like Heading 1 or Body/Large, I created a flexible token system based on Size/Weight (e.g., XL/Bold, M/Regular). This gave us the freedom to adapt typography to unforeseen use cases without bloating the system with overly specific styles.

Few projects that I am particularly proud of are - Merchant Design System, Bank Tranfer, QR Collection, Statements

Site Audit ran on August 2022

Site Audit ran on August 2022

WHAT NEXT

Next milestone is launching for corporate users by Q1 2026 with features like Maker-Checker, Bulk Transactions, Corporate UPI and many more..

KEY METRICS

Metrics such as Average Session Time, Time Spent DAUs (Daily Active Users), and MAUs (Monthly Active Users) are kept confidential.

To give an idea of adoption of AU 0101 Business app, metrics like DAUs, MAUs, avg transaction size are more than a AU 0101 retail app from which we have migrated the users.