Multi Brand Design System for Banking

Our team was tasked with creating a centralized design system for multiple banking clients. The goal was to streamline the design process and ensure consistency across various digital platforms while maintaining each bank's unique brand identity.

Overview

Sephora Design is a design system created using the Atomic Design methodology, designed to meet the needs of various design requirements. Sephora offers  flexibility and an adaptable layout, suitable for both website and mobile applications.

‍

Background

"Imagine the time and effort we could save if we could organize all our clients under a single, adaptable file."

One that could be easily customized to suit any needs that come our way. Just think about it - no more starting from scratch with each new project. We'd have a streamlined design process that maximizes efficiency and keeps things running like a well-oiled machine. Doesn't that sound incredibly appealing?

‍

Problem

Making design changes in each project can be quite a challenge! Because, without a good tracking system, we can lose track of those changes. Additionally, different design preferences among team members can easily lead to a lack of visual consistency across projects

‍

Role

In close collaboration with my design partner, Malvin Firdaus, I was responsible for

• Component research & Define component
• Structuring component from low to high level
• Presentation implementation of Design System to designer for real case

‍

Challenge

• Balancing consistency across multiple banking brands and Ensuring scalability and flexibility
• Validate our design decisions and gather valuable user feedback with stakeholders
• Make sure every designer use consistency component and every project working with design system

‍

Option Considered

Build single design system for every project

One approach was to create separate design systems for each brand, which would allow for unique styling per product but introduced a high maintenance burden, as any update would need to be made across each system

Build multi-brand design system

We needed a system that would streamline workflows across products with different brand identities while remaining simple enough for developers to implement. Minimal design system with only fundamental components like buttons and input fields, leaving teams to customize most aspects.

‍

Solution

We chose an Atomic Design methodology for the multi-brand design system, structuring the design system from atoms (smallest elements) to pages. This allowed us to:

• Build a flexible foundation with atoms and molecules that maintained consistency.
• Provide customization guidelines for higher-level components like organisms and templates, giving teams the flexibility to adapt elements to brand needs.
• Create design tokens for color, typography, and spacing, so developers could implement brand-specific themes easily without compromising the underlying structure.

‍

Design Process

Component Research and Audit

Before creating anything new, we conducted a comprehensive audit of existing UI elements across products. We identified commonly used patterns, duplicated components, and inconsistencies. The goal was to consolidate similar elements into unified components that could be reused.

What we looked for:

• Repeated UI patterns like buttons, input fields, tabs, modals
• Inconsistent naming conventions or styles
• Platform-specific needs (e.g., mobile touch targets, responsive layouts)