LightStream's Design System

Scalable UI framework and governance for a fintech platform
This project was carried out while I was working at LightStream, a division of Truist.

Project Sumary

LightStream needed a more consistent and scalable foundation for its digital lending experience. I led the effort to audit fragmented UI patterns across marketing and application flows, define a shared visual language, and create a design system that improved consistency across teams. The system established reusable standards for color, typography, forms, fields, and interaction patterns, helping design and engineering collaborate more efficiently while improving usability and maintainability.

Information

Client

LightStream -Division of Truist Brank

Role

Lead UX and Visual Designer

Governance, Adoption, and Cross-Functional Rollout

Beyond designing components, I served as a product owner for the LightStream design system squad. I partnered with design, engineering, and business stakeholders to identify priorities, align on standards, and support the rollout of reusable patterns across digital experiences. I helped define guidance for forms, typography, and interaction behaviors, collaborated with development on implementation, and used team feedback to refine the system over time to improve consistency, accessibility, and efficiency.

Challenges

As LightStream’s digital products expanded, inconsistent UI patterns across marketing and loan application experiences made the platform harder to maintain and less coherent for users. The challenge was to turn a fragmented set of screens, styles, and front-end decisions into a reliable system that could support growth, collaboration, and quality.

RESEARCH

At the beginning of the project, I dove into heavy research. I read Medium articles, searched for guidelines on creating a collaborative document, and found a website that provided style guide resources for diverse companies. The research helped me understand what I wanted to accomplish. I also saw "Design Systems Handbook," an ebook by Invision, which changed my concept of how the design system process works. It also helped me understand where I began to collect the information.

I started by creating an inventory of all elements found throughout the LightStream website, beginning with the consumer and marketing side, and front-end development on the operational side of LightStream's loan applications.

Once I captured every button, icon, font type, color, form, field, and design pattern, I grouped them into categories. Starting with the website audit, I refined the elements by unifying the colors, adjusting the size, ensuring consistent line weight, and establishing a new naming convention.
A picture of the three different types of pictures.

Building a Strong Foundation

I've adopted the following guiding principles: consistency, Self-containment, Reusableness, Accessibility, and Robustness. These principles ensure that the Design System performs consistently and with minimal bugs across different platforms and products. Interestingly, design and architecture have evolved into an innovative modular system known as atomic design.
A series of diagrams showing how to design a website.

CREATING A VISUAL DESIGN LANGUAGE

The decision was made to create a document that would serve as an educational and informational resource for the entire business, accessible on the internal server. The initial challenge was to ensure that everyone was aligned and understood the system, allowing all project stakeholders to contribute to its success.

To address this, I held bi-weekly meetings with the development team to educate them on the concept that the brand represents more than just words and a logo. After several sessions, both developers and senior stakeholders eagerly anticipated the creation of a document that would outline all the brand guidelines necessary for updating the website's front-end design. Over time, the significance of the Design System grew within the departments, as they recognized that it would help maintain design consistency across the website, the brand, and the business in the long run.

The design system comprised an adaptable set of guidelines, components, and tools that supported best practices for user interface design on the website. By utilizing open-source code, collaboration between designers and developers allowed the teams to swiftly create visually appealing and consistent products.

The methodology was structured into five groups. Below are descriptions of each of the stages established for the Design System:
A color palette with eight different colors.
A bunch of buttons that are in different shapes
A page with two different color schemes and one has a rate beat program.
A graphic of the steps to get an uncomplicated loan.
A home improvement loan advertisement is shown in three different views.

Conclusion

This work created a stronger foundation for consistency across LightStream’s digital ecosystem. By establishing shared standards and reusable components, the design system improved cross-functional alignment, reduced front-end inconsistency, and made it easier to scale polished user experiences across the business.
image showing the diverse landing pages. built from design system