Lighter UI

Client

Lighter Capital

Category

User Experience

Year

2019

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.

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.

Colors

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

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.

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.

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.

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.