SBC Design Language System
Company
Security Bank
Role
UI/UX Designer
Expertise
Design System
Year
2024 - 2025
Crafting a scalable and cohesive design system for Security Bank’s new digital platforms. Rooted in the bank’s “BetterBanking” promise, the system is built not just for users—but also for the designers and developers who bring those experiences to life.
The Challenge
I joined the Design Language System (DLS) Team to help design, manage, and document the enhanced version of the existing component library. At the time, Security Bank was working to unify its digital experience by revamping all its banking apps under a single design system. However, its Retail, Wealth, Corporate, and MSME platforms each had distinct interfaces, components, and design languages. This led to inconsistent user experiences, redundant development efforts, and limited collaboration across teams.
The Solution
Our goal was to build a unified design system that will serve the different digital banking platforms of the bank and to streamline development and ensure consistency. By standardizing colors, typography, components, and patterns, teams could design user flows faster—without worrying about consistency. However, just like any product, a design system is always getting better. It's never truly "finished".
As we scaled our design system, we collaborated and aligned on core principles and how they translate into practice. These foundations became the basis for our standards, component creation, and workflows. Having a governance and request process to ensure we still released cohesive apps with consistent patterns is immensely helpful in creating cohesive designs. This process involved thorough audits, regular reviews, and establishing a clear, enforceable process tailored to our organization's needs.
Managing the Illustration Library
As a DLS Designer, I was solely responsible for organizing, maintaining, and evolving the illustration library to align with the design system’s visual language. I componentized assets into reusable elements like icons, characters, and objects, making them adaptable for various contexts. The system was designed to scale across Retail, Corporate, and MSME platforms without compromising visual consistency. Throughout the process, I collaborated closely with marketing and branding team to ensure the illustrations were aligned brand-wise.
Managing the Wealth Library
As a DLS Designer, I also managed the Wealth Library to ensure it aligned with the broader design system while meeting the specific needs of Security Bank’s Wealth platform. This involved auditing existing components to identify inconsistencies and redundancies, then refining them to match system standards without losing the platform’s unique identity. We also optimized the variables feature in Figma to create more flexible, scalable, and consistent designs.
Design and Dev collaboration
Close collaboration with developers was crucial to the success of the Design System. As a DLS Designer, I collaborated with engineering to ensure all components were technically feasible, scalable, and visually consistent. This involved maintaining full transparency by filing detailed Jira tickets for every update. Beyond the core system, I worked with feature designers to support their product-specific needs, effectively bridging the gap between design intent and technical execution for a much faster and more cohesive development process.
A Unified Design System in Action
We now have a fully functional design system used across all Security Bank online platforms—a single source of truth for design and interface development.
For Designers
Build UX flows confidently with ready-to-use components, states, and styles—no second-guessing.
For Developers
Clear Figma specs, reduced dependencies, and faster implementation via Storybook.
For Product Owners
Easily communicate UI interactions to stakeholders, reducing back-and-forth and speeding up approvals.
Scalable & Versatile
Supports Retail, Business, and Enterprise banking—across mobile and web—with reusable components for both B2B and B2C products.
Consistent & Collaborative
Built on core guidelines, balancing team contributions with standardized practices for smooth cross-functional collaboration.
Key Learnings ✨
This project sharpened my skills—from big-picture systems thinking to refining the smallest design details.
Raise issues early
Catching design problems before development saves time, effort, and cost. This meant flagging a missing hover state early in Figma, preventing a dev rework sprint later.
Design with purpose
Not everything needs to be a component—focus on scalable, reusable building blocks. This meant instead of creating a unique card for every use case, we built a flexible card component with different variants.
Prioritize usability
A design system should empower teams, not complicate their workflow. This meant simplifying naming conventions and added usage notes in Figma to make components easier to find and use.
Communicate relentlessly
Document decisions and share context to avoid misalignment. This meant maintaining a changelog and sharing weekly updates with designers and devs to keep everyone aligned.
Put people first
Design systems are built through collaboration—meeting team needs is just as important as crafting user interfaces
More than a library
A design system is a shared language between design and development, built on trust, standards, and teamwork. This meant that by using Storybook and Figma side-by-side ensured design and code stayed visually and functionally aligned across platforms.
