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.
© Seth Kasky