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 for the Lighter UI system were set earlier in the year during a Brand Refresh exercise.
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.
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.
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.
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.
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.