Design System for LightStream

LightStream needed to urgently unify brand guidelines and create a document containing all the fundamental elements of the brand for the website. This brand guideline was primarily for the design team to share with and instruct our marketing team, other departments, partners, and parent enterprises on how the visual branding for LightStream would work best. This UI design process aimed to make the website more manageable and serve as a tool for collaboration between the design team and the developer team.

Having the development team at LightStream build the initial website design of the business resulted in several inconsistencies regarding the brand colors, fonts, and shapes. As the development team grew, the website went from developer to developer without instructions or guidance, resulting in too many blues, font styles, padding, and layouts. When I joined the design team, I knew the importance of bringing a digital visual guideline.

At the beginning of the project, I dove into heavy research. I read Medium articles, searched for guidelines for creating a collaborative document, and found a website that showed me 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/marketing side and front-end development on the operation 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 cleaned the elements by unifying the colors, fixing the size, making the line weight consistent, and creating a new naming convention.

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.

The decision was to create a document available to the entire business as an educational and informational resource on the internal server. The initial challenge was to ensure everyone was on the same page. I needed all project stakeholders to understand the system and contribute to its success.

The best part of creating the Design System was leading the effort to build a system that combines product teams, developer teams, and designers using a common visual language.