top of page

Ratio Design Systems

Increasing efficiency, scalability, and cross-team collaboration
The Ratio Design System is meticulously crafted to enhance design and development process for front-end developers working on across 4 client-facing product at Interactive Brokers.

JUNE 2023

Frame 17.png

WHAT I DID?

I created multiple variations for each component. This ensured the design system could be effectively applied across diverse use cases within the product and adapted to different screen sizes. I also played a key role in building the design system components directly within Figma.

AREA OF WORK

User Experience
Design Systems
Component Design

TEAM

UX Designer (Me)
Sr. UX Designer

UX Manager

Impact: ~42% reduction in the total development time.

INTRODUCTION

What is Interactive Brokers?

Interactive Brokers (IB) is a well-known and established brokerage firm that provides a wide range of financial services for both individual and institutional investors. The company brokers stocks, options, futures, EFPs, futures options, forex, bonds, funds, and some cryptocurrencies.

tws-mosaic-laptop.jpeg

Current UI for desktop and mobile

LAYING THE LAND

Problem at Hand

Each platform's design was built by engineers on an as-needed basis, leading to inconsistencies and making collaboration between design and development teams difficult.

17%

user dissatisfaction rate related to interface inconsistencies. 

~4h

Engineers spent time per day recreating components

Project Goal

Facing challenges of design inconsistency and collaboration, we set out to create a unified and efficient design system.

Target Audience

Components will be used by internal teams (Developers and Designers) and the interface and experience design of the components will be used by the users of the various company platforms/products.

Why it mattered? The project improved...

Scalability
A need for scalable design across products.

up arrow.png

Design Fragmentation 

Multiple teams led to inconsistent designs.

Collaborative work.png

Development Bottleneck 

Communication gaps caused delays.

green path maze.png

PROCESS

Process.png

SELECTED INSIGHTS

No fluff, simple, scalable design system

Responsive layout grid

A standard set of layout grids and breakpoints, was critical in ensuring we could design and build quickly and consistently.

​

We used the basic unit of our Grid geometry is the 8-pixel square mini unit. Using this system provided a shared understanding between design and development and allows for smooth handover and back and fourth between the two.

Grid System.png
Group 7994.png
Group 8298.png

Making components versatile and dynamic

Designed key components, like the list component, with a focus on readability and responsiveness for different screen sizes.


I put a lot of emphasis on documenting design specs to foster smooth design-engineering collaboration. It was also an opportunity to leverage Figma’s new component properties and functionalities to greatly sped up collaboration with cross-functional teams.

List_Customization.png

FULL SET OF  LIST COMPONENTS

Building block for detailed customization

Tabs are used to quickly navigate between views within the same context. They help to efficiently group and condense information, packing several screens worth of information into one.

MacBook Pro 14_ - 3.png

Light and dark theme

One of the challenges we faced while creating a dark mode for our default (light) mode was deciding the different color palettes from an accessibility point of view.

FINAL FEW COMPONENTS AND USAGE GUIDLINES

Widgets

Widgets present condensed information from other screens within a container, allowing users an at-a-glance view and a means to navigate to the full-screen content.

Group 13035.png

Dropdown

Dropdowns present a list of options from which a user can select one option. A selected option can represent a value in a form, or can be used as an action to filter or sort existing content.

Usage Guidelines: Dropdowns can be used in forms on full pages, in modals, or on side panels. It is used to filter or sort contents on a page. It is a stylized version of the select component and can be styled as needed.

Group 13037.png

Buttons

ButtonsNew.png

List

The list component was highly critical from a content-organization perspective. It was designed to prioritize readability while accounting for responsiveness and flexibility.

Group 13036.png

Filters

Filters allow users to enter information, make selections or filter content. They are ideal for quickly narrowing down results, to arrive at the desired content.

Usage Guidelines: Use filters to help the user narrow down the scope of information via categories, inputs and ranges so they can find the information they are looking for.

Group 13125.png
Group 13126.png

Filter pattern: Multi-select filter

Usage Guidelines: When an array of dropdown filters consists of one or more multi-select filters, use this pattern to allow the user to easily edit and clear selections.

Group 13128.png

REFLECTION AND LEARNINGS

​

This project reinforced the significance of meticulous attention to detail, the iterative design process, and effective collaboration within a cross-functional team. It also highlighted the need for balance between user experience and visual polish to create a design system that is not only aesthetically appealing but also functional.

​

Tailoring for every user
Trading platforms cater to diverse users with varying levels of experience. The design system needs to be flexible

​

Strategic configuration for finance
The sensitive nature of financial products necessitated meticulous design choices.

bottom of page