Bank Saqu Design System

Designed a scalable Design System to establish a consistent visual language across multiple digital products. The case study focuses on the system's core components and implementation, with minimal background context to emphasize clarity, usability, and scalability.

Role
Product Designer
Scope
Design System Foundation, UI Components, Design Tokens, Documentation
Platform
Mobile
Timeline
6 months

Background

In designing this Design System, the goal was to create a consistent and scalable visual language that could be easily implemented across multiple digital products. The background for the portfolio case study is intentionally kept minimal to highlight the clarity and functionality of the system components.

The Challenge

Each time we began a new project or entered a new phase of an existing one, we found ourselves starting from scratch. This involved setting up a new component library every time. As a result, we repeatedly designed the same components, often with variations in style to fit the specific functionality needs.

How will this help the business

A Design System provides businesses with long-term efficiency, cost-effectiveness, consistency, and improved collaboration, while also enhancing the user experience and promoting brand integrity. By implementing a design system, businesses can innovate faster, scale effortlessly, and remain competitive in an ever-evolving digital landscape.

How does this benefit the users

A Design System enhances the user experience by offering consistency, accessibility, clarity, and ease of use. It makes navigation more intuitive, ensures users can interact with the product more efficiently, and helps create a seamless, engaging interaction with the brand across different products or platforms.

Process

Here is how we approached the Design System

  • Research
    Visual Audit: Here we perform an audit of both the style and the components that exist in the current product, on every page in every use case.
  • Planning
    Plan a timeline, Schedule discussions, and prioritize what to do first. This way, everyone will be involved and updated.
  • Design
    Design the Design System. Here, the designer begins the design process, starting from style guides and components. Including testing workflow and supporting tools for the Design System.
  • Implement
    Sync with dev. In this final stage, we start discussing and gradually implementing the style guides and components that have been designed together with the dev team.

Interested in working together?

Let's discuss your next project