Lighter UI

Client

Lighter Capital

Category

User Experience

Year

2019

LighterUI-ActiveDealsExample

Legacy user experience patterns and inconsistent user interface elements were used throughout all of Lighter Capital's underwriting software. My role was to design a library of components to fit within their software systems.

LighterUI-Components

Building the System

Based on Atomic Design principles by Brad Frost, the Lighter UI system utilizes a library of components to establish a unified library.

LighterUI-Color

Colors

Colors for the Lighter UI system were set earlier in the year during a  Brand Refresh exercise.

LighterUI-Typography

Typography

Lighter UI utilizes the typeface Inter. A taller x-height and font-features such as tabular numbers make this typeface a good choice for viewing large amounts of number-heavy tables.

LighterUI-Spacing

Spacing

An 8-point grid system was used throughout the design of Lighter UI. This system made it easy to create a user interface that scales easily.

LighterUI-Navigation

Navigation

Primary navigation was re-assigned to the left-hand side of the screen to allow for additional page real estate. Page Titles were assigned to the top, and sub-navigation underneath the page titles.

LighterUI-TableExample

Tables

Underwriters at Lighter Capital oftentimes view large amounts of financial data within a table. Designing tables with limited vertical spacing was important as a space-saving measure. Using open-type features such as numerical spacing increased legibility for table data.

Conclusions

A design system is never fully completed. As Lighter Capital grows, the design system will continue to evolve to meet the needs of their software and users.