Designing and documenting a design system for designers and developers.
Duration
Tool Used
My role
My role
Project team
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.
Remove guesswork and create tools to maintain consistency across platform.
Save time to hand off designs to developers by using page templates.
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.
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.
