top of page

Ayabank - Design System

​Duration

2019-2020

My Contribution 

•  Plan and manage design system    

•  Collaborate with development team 
•  Guide other designers on building DS 

Stakeholders

• UI Designer​

• Design Lead

• Developer

• PO

• PM 

Summary

64% of the design system is covered after one year. Each new feature saves designers, entrepreneurs, and developers an average of 7.2 hours.

VISION

We have created a centralized design system that makes it easy for designers to build products, that are always on brand, use the best validated patterns, and get their work done faster.
 
Our new system is 100% transparent in real-time, delivers direct access to developers and comes with built in version control and organisation level asset management
Screen Shot 2021-04-14 at 11.10.25.png

SUCCESS METRICS

STRUCTURE

To overcome obstacles buidling and maintaining design system in many teams across the whole bank, we definitely do not want one that would be managed by a single, centralized team. Instead, our design system is a family of design systems, managed by distributed teams.

We are expected to have several design systems inside the bank, each managed by a different team around the bank. And while these teams maintain the different systems, anyone who builds products at AYABANK can contribute. Instead of having several disconnected design systems, we will have multiple ones which are all connected and under the same umbrella.

 Foundation

Core

Local

Frame 1-3.png

STRUCTURE

Foundation

At the center, we have Foundation. It’s where we keep things of our brand identity like colors, styles, iconography & illustration guide, motion plus guidelines for writing and accessibility.
  • Color
  • Iconography
  • Illustration
  • Voice & Tone
  • Logo & Brand 
  • Avatar
  • ​Experience principle 
  • ​Motion 
Frame 1-4.png

STRUCTURE

​Web core

It offers all the things found in typical web design systems: buttons, dialogs, forms controls, and more. These components can be used in anything that’s built using web tech—from web apps to websites.

Web Core has the shared resources for our web-based platforms, but it also includes everything from Foundation. The components are built using tokens, and they follow the patterns and guidelines defined in Foundation. So the systems aren’t stand-alone things: they’re connected.
  • Typography
  • Base Radius
  • Grid & Breakpoints
  • Unit & Spacing 
  • Header
  • Navigation
  • Buttons
  • ​Forms 
Frame 1.png

STRUCTURE

​Mobile core

Similar to Web Core, we envision this being the place for common components that are shared across multiple mobile apps.
  • Typography
  • Radius
  • Elevation
  • Grid & Spacing
  • Navigation
Frame 1-1.png

STRUCTURE

Local systems

In this next layer, our design system also contains what we call “local design systems.” Local systems are a place to keep design elements that are tailored for specific products or audiences. These are things that need to be shared—just not shared across all of  AYABANK products.
Frame 1-2.png

STRUCTURE

Others

Our vision is to serve our customers with the best experience in multi channels & platforms. This means, besides web and mobile products, we also need to build other products in other banking platforms, such as ATM, POS, etc.

This new structure of design system enables us to have unified, accessible and consitent products across many banking platforms.
Group 27.png

WAY OF

​WORKING

Based on the products or teams you are on, and the nature of our projects, your design work evovles:
 
1. Draft: Designers use this to ideate anythings, there is no rule here

2. Design Review: Where designers bring to the team to review component and interaction patterns, when he/she creates new patterns, it needs to be consolidated with other teams, and if the pattern is approved, it will be added to DS
 
3. Dev Handoff: This space for Developers to develop components once its ready in DS

4. In app: This is single source of truth for all the current features and screen

RESULT

* Result from internal survey in Jan 2021
Promotes consistency
Provides a single source for building UI – developers recognise the UI, even when the requirements are different for different, It also shares set of principles and rules to build components.
Optimization of time and cost of design
With design system we quickly develop new tools and content without having to reinvent the design/UI wheel every time. UX teams can quickly revise and publish new versions for testing.
​Design for innovation
Building a design system gives us a space for extending solutions. It means we don’t have to create a design for every screen. With an established look and feel and a design language of reusable styles, components, and patterns, a development team can assemble new pages easily

​TAKE AWAYS

Maintain the balance between discipline and freedom

When working on a design system and advocating for consistency, we can easily fall into the trap of becoming the style police. Consistency is important, but it shouldn’t be an obstacle to change and experimentation for innovation. it is important for the team to be conscious of the trade-off it makes.

​Talk the same language with developers

It’s important for designers and developers to have some understanding of one another’s language. If designers could frame things in a language that developers understand then developers would quickly come around to understanding the problem.

Next project

Caregiver​

C_day.png
bottom of page