Vandana Iyer | My Portfolio

Back

Axio Bento UI: Crafting

a design system

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

Back

Project Contributors

Narasimman R

Design Lead

Apoorva M

Product Manager

Olie M

Product Designer

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.

HEX code

reference token

system token

01:

Atoms

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.

Resource: Material design palette generator

These atoms include properties of basic HTML elements like colours, fonts, breakpoints and measurements like corner radius, gaps, spaces and sizes.

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.

DESIGNING A BUTTON

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.

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)

Resource: Spectral for documentation of components

Insight:

Components can be made flexible by setting properties as needed. These defined properties will give us controlled options and customisations.

Narasimman Rajendran

Design Lead

Project Contributors

Olie M

Product Designer

Apoorva Maheshwari

Product Manager

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:

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.