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
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.
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.
Design Fragmentation
Multiple teams led to inconsistent designs.
Development Bottleneck
Communication gaps caused delays.
PROCESS
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.
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.
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.
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.
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.
Buttons
List
The list component was highly critical from a content-organization perspective. It was designed to prioritize readability while accounting for responsiveness and flexibility.
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.
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.
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.