Axio Bento UI: Crafting
a design system
Building a tokenised design system that is scalable, configurable and plug-n-play without restricting the creative nuisances of design.
Dec- Jan 2024
Narasimman Rajendran
Design Lead
Project Contributors
Olie M
Product Designer
Apoorva Maheshwari
Product Manager
Me
Product Designer
My role
Building new components, UI Audit, tokenisation, documentation
About Axio
A tech-first financial solutions provider that offers credit solutions of various kinds like pay later lines, personal loan, checkout finance and finance tracking.
Having andrioid, iOS and web based products that have vast UI.
The need for a design system
Fragmented user experience due to different
design patterns across products.
Disjointed design hinders product interoperability.
Redundant Effort: Developers & designers spend time recreating similar UI elements.
Lack of comprehensive documentation causing implementation errors.
The Atomic Design System
Atomic design's breakdown of components into smaller elements can impact a design system by promoting modularity, and reusability across the entire user interface.
Variables are used to define and maintain consistent values for properties ensuring uniformity and efficiency across the design system.
User interface
Arrangement of templates, molecules and atoms
Templates
combination of components, molecules, assets and atoms
Sections
title bar, file upload, message card, information text, consent
Molecules
Buttons, switches, inputs, visual indicators, tags, table components
Atoms
colours, font, measurements, size, grid, transitions
dark
light
Resource: Material design palette generator
If atoms are the basic building blocks of matter, then the atoms of our interfaces serve as the foundational building blocks that comprise all our user interfaces.
These atoms include properties of basic HTML elements like colours, fonts, breakpoints and measurements like corner radius, gaps, spaces and sizes.
Atoms
01:
HEX code
reference token
system token
Insight:
Define units in REM over px as REM units are relative to the root element's
font size, whereas px are absolute units that don't adapt to user preferences.
Molecules are groups of atoms bonded together that take on distinct new properties.
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.
Resource: Material design palette generator
Resource: Spectral for documentation of components
Molecules
02:
Search
Input
A button must have these three characteristics: Identifiable, Findable and Clear. It also covers various use cases that may need primary, secondary and tertiary buttons.
DESIGNING A BUTTON
Insight:
Components can be made flexible by setting properties as needed.
These defined properties will give us controlled options and customisations.
Size (S, M, L) variations for use in full page, overlay, modules, in-car
Tints (green, blue, purple, red, orange) to indicate particular actions
States (active, pressed, hover, disabled and error)
Sections are relatively complex UI components composed of groups of molecules, atoms and other sections.
These form distinct sections of an interface.
Example of how sections are defined
Atom: Text, corner radius, height, icon
Molecule: Search bar
Section: Header with search bar
Sections demonstrate those simpler components in action and serve as distinct patterns that can be used again and again
Sections
03:
Table View
In-line loader
Status bar
Information box
File management
Subtext
Headers
Consent
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.
Templates
04:
Loader
Overlay
Error screen
By defining a page’s skeleton we’re able to create a system that can account for a variety of dynamic content, all while providing needed guardrails.
Example of template: Loader screen
Header (section) + Animation (Asset) + Text (Atom) + Button (Molecule)
Annotations & DevMode
With annotations, one can quickly understand what the designer intended- a shared source of truth.
Translation of terms- Units and terms can be translated to the specific unit that the framework works in.
Ready for development- Allows developers to track edits to designs and maintain a log.
Component documentation- Usage descriptions, storybook links, and keywords.
THE COMPONENT PLAYGROUND
The superpower of playground is its ability to switch token sets for multi-brand design systems.
It removes the guesswork from how to make the component flexible and simplifies the creation of component APIs.
Bento Design System in action
Personal loan sign up journey
Learnings & Outcomes
Status: To be implemented
Preparation Pays Off: It requires upfront investment in time and resources, however, planning the structure at the beginning is crucial to the system.
Don't fret over perfection: As designers we may strive for perfection, but when establishing a system of this scale, getting the guardrails in place is priority.
Collaboration Enhances Outcomes: Having a back and forth between developer and designer is key for ensuring that the system is adaptable to various contexts.
Compounded Pay-off- As more designs come into the fold of the system, the system becomes more robust, reducing TAT of deliverables.