Lasso Design System.

Designing and documenting a design system for designers and developers.

Duration
Aug 2022 - Present
Tool Used
Figma
My role
Create page templates
Develop scalable design system
Document each component
My role
Design System Lead
Project team
Front End Lead
Product Designer

Lasso Design System

I created the design system for Lasso and named it as Lasso Garden. Lasso Garden is composed of page templates based upon component library. I developed the creation of the Garden to improve product design process, manifest design principles, and provide designers tools that help build consistant layouts across platform.

Project Goals

The goals were to share a design language and reusable components that would increase the design and development velocity. Creating defined layout system was critical to remove guesswork and prevent inconsistency.

Defined layout system

Remove guesswork and create tools to maintain consistency across platform.

Fast Delivery

Save time to hand off designs to developers by using page templates.

Engagemen

Sync components with Storybook/Vue to help developers transform the design into pixel perfect code.

Challenge

The biggest challenges I faced were culture change, trust and commitment to design and build the system. As I cultivated Lasso Garden, I developed a shared language about how I built products that helped product and engineering organization.

Foundations

The foundation of Lasso Garden is page templates, spacing and 12 column grid system. Spacing was one of the huge issues among my team before Lasso Garden created. It was time consuming to sync and make all spacing to be consistent across designs. That's when page templates with pre-defined spacing came in to play.

Page Templates

Page templates consist of page header, page content, page footer and section card component. These components have nested variants, and I created structures in the way that designers can simply swap instance to reduce chances to detach components as much as possible.

Page Template

Spacing

Providing a defined spacing system was necessary at Lasso for collaborating as a team. This helped my team work faster and eliminate guesswork while designing and developing. The system also created a familiar rhythm and order to our designs.

Spacing

Components

Cultivated Lasso Garden with nested components with numerous variants. The idea is so designers can save time by swapping instance and reduce chances to detach components.

Typography

The component uses DM Sans and Lato. We've stress-tested to make sure they are robust enough to use across any projects, while remaining as accessible as possible for everyone.

Typography

Color Palette

We worked hard on deciding colors because text needs be legible and designing with accessibility in mind is very critical.

Color Palette

Button

Button component has 3 variants. There are a set of rules when to use specific variants.

Buttons

Data Visualization

We spent time researching modern designs and made sure that our data visualization designs stay up-to-date. Since we use amCharts to create data visualization, some designs are used from their library.

Data Visualization

Final Overview

Results

Since Lasso Garden is created, designers are saving tons of time to design for new features. The designs get delivered faster ever! These are some of the platform designs that are developed with Lasso Garden.

Data Visualization
Let's work together