Lasso Design System

I managed OpenGov's creation of the Capital Design System at OpenGov to improve our product design process, manifest our design principles, and provide our customers with a usable, accessible, beautiful software that personifies their service to the public. A design system is the combination of visual language, tools, technology, and people— and people are the most important part. As I document our process, describe my roles, and show the visuals, I should call out that the biggest challenges we faced in the project were culture change, trust, and commitment to design and build the system. As this project unfolded, we developed a shared language about how we build products that helped our product and engineering organization is ways I never would have expected.

Project

Plasma is a design system for WeWork's internal business tools, used to manage the companies global network of buildings and community of members. It was my job to design and creatively direct the creation and documentation of the design system.

Goals

Our team goals for the project was a design language and reusable components that would increase our design and development velocity, incorporate a many learnings from customer research into the product, and reduce our time spent reinventing the wheel on solutions. We aligned these goals with our company goals for Q1 & Q2:

1. Unify our products

   Strategic Planning, Budgeting, Citizens Engagement, and Operational Performance

2. Fast Benefits

   Provide near-term benefits to product and engineering roadmap

3. Paths to Success

   Improve information architecture, wayfinding, and usability.

4. Ease, Clarity, Consistency

   Reduce product complexity and provide more clarity.

Challenge

21 Buttons is a fashion social network where you can both share your outfits and earn money as you discover, buy, save and combine all the most closely related looks to your style. My task was to build a system that provides a unified set of UI, design rules and patterns.

My Role

I pitched, planned, and managed the creation of Capital, the OpenGov Design System, and worked with a team of 4 designers to envision and design the system. I took advantage of my own super powers of reading and taking in a bunch of information to understand how other companies approach solve the problem and how we can make it happen as a small team. I talked with Brad Frost and a number of other leaders in Design System to learn and find the right consultant. We used his Atom approach as a way to finding mutual understanding between developers and designers.

Deliverables

1. Templates
2. Component library
3. Documentation

Inspiration

The founder shared a list of competitors, five of which shortlisted as the strongest to analyze for the comparative research based on notoriety, visual design, and feature offering.

Style Guide

The founder shared a list of competitors, five of which shortlisted as the strongest to analyze for the comparative research based on notoriety, visual design, and feature offering.

Style Guide

The founder shared a list of competitors, five of which shortlisted as the strongest to analyze for the comparative research based on notoriety, visual design, and feature offering.

Results

Inventorying the UI elements was the most tedious and time-consuming phase next to the editing cycle. Some of the things I struggled with were:

1. Templates

   Also called "component library" includes what you see above

2. Documentation

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

3. Visual language

   Guide to what the brand feels like.

4. Pattern library

   Also called "component library" includes what you see above

5. Brand guidelines

   Reduce product complexity and provide more clarity.

6. CSS framework

   Front-end code that developers use to build a product.

Products

The founder shared a list of competitors, five of which shortlisted as the strongest to analyze for the comparative research based on notoriety, visual design, and feature offering.