OMNI Design system

Overview

OMNI Design System is a new design system developed for the OMNI banking application, available on both mobile and web platforms. It aims to create a consistent user experience and streamline development efforts by providing a reusable UI component library.

My Contribution

Hand-off UI for Dev

The challenge

OCB has many digital products (like mobile apps, websites, portals, etc.), but currently lacks a unified design system. This can pose significant challenges for the company and project teams, especially in product design and development.

Solution

A. Gold

😁

Consistent experience

⏱️

Saving time

📄

Clear documentation

B. Structure

  1. There are 4 main Library:

  • Foundation: the main library that have token system, Graphic asset,...

  • Base Icon: System icon and how to create your own icon

  • Mobile core: All you need for mobile design

  • Web core: All you need for website design

  1. Setup in Figma

C. Foundation

The foundation of a design system is crucial. It involves collecting and organizing all design elements used across products into a more structured and efficient system.

  1. Color

All colors are named and adjusted for better contrast and organized into design tokens for easy selection and theming (e.g., dark mode).

  1. Icons & Illustrations

Icons are collected from the Icon library and based on Icon content (with custom icons father). There is a simple guideline to make them consistent.

  • 16x16(px) - 24x24(px) - 32x32(px) - 40x40(px)

  • 1.5 stroke line for outline

  • Center stroke

Fluent System Icon library example

Pictogram example

  1. Components

Mobil/Web core file with components and Specification site

Design system applying to products

Explore

OMNI - Overseas Transfer

OMNI - 2345/QĐ-NHNN

HaloTrade

2024

Pham Khac Huy

Have a good trip 😉