Atomic design system for MSB bank
Domain
Fintech, Design System
Team
5 UI/UX Designers. 1 Leader
Duration
Continuous
My roles
I joined the design system team mid-development after the foundational web components were established. Using this baseline, we built the next iteration for the mobile app.
Problem 1: The fragmented landscape
In 2020, MSB's product landscape was highly fragmented. Each department operated its own platform and design system, with some also outsourcing to third-party agencies. This caused confusion for both customers and internal employees using MSB's banking services.
For example, there were two different secondary buttons with no clear guidelines how to use them.
Problem 2: Accessibility was an ignored aspect
Our products served a diverse range of customers, making accessibility crucial. However, accessibility was often overlooked.
For instance, the transfer screen in our mobile app - our most important screen - was designed with placeholders as input labels to reduce clutter and shorten form length. This pattern was common across our products.
However, this approach is proven to be detrimental to both usability and accessibility. Placeholders often had low contrast and disappeared when users started typing, which strained short-term memory. Relying solely on placeholders also made it difficult for users to review their input before submitting.
Three layers design system: consistent branding & UX while respecting diversity
MSB design system, based on Atomic Design principles and inspired by Spotify Encore's "system of systems" approach, ensured a cohesive experience across platforms while supporting diverse product teams.
Guidelines: a key to create unity
With various products across multiple devices, we adopted a four-step precedent-based approach to creating component guidelines:
List Use Cases: Compile all possible use cases for a component in one place.
Identify Patterns: Look for common patterns across these use cases.
Research Best Practices: Study best practices for each element and compare them with our current design.
Design a Robust Base: Use this information to create a base atom component that accommodates all use cases while providing clear guidelines and documentation for consistency.
