Design System for LightStream

Design system created in collaboration with Cozy & Invision

OVERVIEW

LightStream was urgently needed to unify the brand guidelines and create a document that collected all the fundamental elements of the brand for the website. This brand guideline was mainly for the design team to share and instruct our marketing team, other departments, partners, and parent enterprises on how the visual branding for LightStream would work better. These guidelines were going to be called Design System. The goal of this UI Design process was for the website to be more manageable and a tool of collaboration between the design team and the developer’s team.

With the support of the Design System, the marketing and developer team were able to start building a system that could help the business to merge the whole marketing website to a new Content Management System (CMS) called “Kentico.”

CHALLENGES

Having the development team at LightStream build the initial website design of the business brought several inconsistencies regarding the brand colors, fonts, and shapes. As the development team grew, the website went from developer to developer without any instructions or guidance, producing too many varying colors, font styles, padding, and layouts. By the time I came aboard the design team, I knew the importance of creating a digital visual guideline.

Client

LightStream

Role

UI Designer

Contribution

Research
Inventory
Audit
Creation & Implementation
UI Design

Tools Used

Sketch
Illustrator
Invision

Research

At the beginning of the project, I dove heavily into 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 which helped me form an idea of what I wanted to accomplish. I also found “Design Systems Handbook,” an ebook by Invision, that changed my concept of how the Design System process works. It also helped me understand where I would begin to collect the information needed.

I started by creating an inventory of all the elements found throughout the LightStream website, beginning on the consumer/marketing side and moving to the front-end development on the operation side of LightStream’s loan applications.

Atomic

Building a strong foundation

I started following these guiding principles: Consistency, Self-contained, Reusable, Accessible, and Robust. No matter which platform or product the Design System was applied to, it should always perform with grace and minimal bugs. As it turns out, design and architecture have been developing an innovative modular system called Atomic Design.

Atomic Design is a methodology composed together to create an interface design system with five distinct stages:

1. Atoms 2.Molecules 3. Organisms 4.Templates 5. Pages

Using this concept as a foundation, I changed the five stages names to a new naming convention that worked better to our specific needs:

1. Properties 2.Elements 3. Modules 4.Union 5. Components

Workflow

Creating a Visual Design Language

The decision was to make a document available to the whole business that could be an educational and informational document that lived in the internal server. The challenge of having everyone on the same page was the first task. I needed all the stakeholders of this project to understand the system and their help to be successful. Eventually, by doing bi-weekly meetings with the development team, I educated them about how the brand was more than words and a logo. After a few sessions, developers and senior stakeholders began looking forward to a document that could capture all the brand guidelines to update the website’s frontend design.

The Design System was an adaptable system of guidelines, components, and tools that supported the website’s best practices of user interface design. Backed by some open-source code, a collaboration between designers and developers helped teams quickly build beautiful and consistent products.

The methodology created was based on five groups. Following are the descriptions of each of the stages made for the Design System:

1. Properties

Properties include more abstract elements like color palettes, fonts, and even more invisible aspects of an interface like animations.

Colors
Typography

2. Elements

Elements are groups of properties bonded together and are the smallest fundamental units of a compound. These properties take on their own properties and serve as the backbone of our design systems.

Icons

3. Module

Modules are groups of elements joined together to form relatively complex, distinct sections of an interface.

modules

4. Union

At the union stage, we broke up our chemistry analogy to get into language that makes more sense to our clients and our final output. The union consisted mostly of groups of modules stitched together to form components. It is here where we started to see the design coming together and started to see things like layout in action.

union

5. Components

At the components stage, we made alterations of the union to form components where the content, colors, and images are changed but the layout and structure stay the same.

Component

REFLECTION

The highlight of my entire experience creating the Design System was being the lead role in building a system that unites product teams, developer teams, and designers in a common visual language.

The Design System reduced the design efforts, accelerated production, and built bridges between teams working together to bring the product to life.

I’m grateful for this opportunity and growth in creating a Design System for the foundation. Throughout this whole process, I became a stronger lead designer and it helped me collaborate in more effective ways with multiple cross-functional teams, which overall improved the product.