Lasso Design System.

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.

1. Defined layout system

   Remove guesswork and create tools to maintain consistency across platform.

2. Fast Delivery

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

3. Engagement

   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.

Role

It was my job to design and creatively direct the creation and documentation of the design system. I built a system that provides a unified set of UI, design rules and patterns. I pitched, planned and managed the creation of Lasso Garden. I worked with a team of 3 designers to envision and design the system. I spent time reading and taking in insightful information to understand how other companies approach solve the problem and how I can make it happen as a small team.

1. Create page templates

   Provide designers a base to start and develop their designs.

2. Develop scalable design system

   Create defined design system with reusable components and variants for consistency.

3. Document each component

   A shared space where you say when and how to use the design system.

4. Mentor designers

   Guide designers so they can start cultivating Lasso Garden as a team.

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.

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.

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.

Color Palette

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

Button

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

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.

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.