Opendoor
Design Systems

Role
Senior Product Designer

Team Setup
PD and 1 Engineer

Date
April 2019

As the design team grew quickly at Opendoor, almost every single experience in the product was bespoke and didn’t have any shared commonalities. I advocated for a design system with a pitch deck and got buy-in from leadership to establish one to help both the design and product team’s move faster.

Over a one-month sprint, I set out to quickly define and establish ODS v1.

The pitch

To kick off conversations with leadership and also share the idea with other designers, I created a pitch deck to outline the opportunity of creating a shared design system and defined the problem it would be solving.

I found this especially useful for getting non-design folks aligned on developing a design system and making it map to our eng shared component library, which was using Storybook.js but there wasn’t any sort of bridge that connected our designs to the eng component library together.

Tooling impacts success

Before going to deep on establishing the design system, I started out by questioning if our current tool could handle a design system and if designers would be set up for success. I found that our current tool, Sketch, out of the box didn’t provide the right capabilities without a lot of add-ons. Pushing updates via the add-ons to the system seemed like a headache and designers want to use a design system but don’t want to work for it.

I pitched to the team a trial period to test out Figma, the designers instantly loved it and so did our PMs and eng because of it’s rich collaboration features.

Getting all designers invested

To help define the design principles, goals, and needs of the initial design system, we had a quick series of workshops where all designers helped define the high-priority elements to focus on but more importantly the essence of the experience we wanted customers to have.

This made sure the design team was not only just involved but invested in defining the design system collectively from day one which I found to be crucial for the success and adoption of a design system. Design systems are successful when it’s a federated model where everyone contributes and it isn’t just a centralized service.

Establishing the grid, color and type scales

After reading through every design system Medium post, like this one on 8pt grid system  and Good Vertical Rhythm, and getting coffee with Design System designers from Uber, Airbnb and Twitter, I learned that you should always start with the atoms/basics of your design system.

These foundational pieces influence every aspect of a design system, both from a brand perspective to how it maps to screen density.

I found that grid and typography scale both aligning to an 8pt grid system work across all platforms. For the color scales, I found it was a mix of art and science. I based all the colors off of the main Opendoor brand blue, explored linear mixing but used Lyft’s color box to have the color’s tinting have more contrast/richness.

 

 

 

 

Atomic design helped as a starting point but proved too complicated

Learning Atomic design was a great way to create a foundation for how to approach the build-out of elements and components in Figma.

However, I found Atomic design to be complicated and hard to discuss with other designers since the OG version of Atomic Design used foreign terms outside of the design norms like “Molecules” and “Organisms”. So I flattened the typical Atomic design structure from a 6 part system to just 2 parts: Atoms and Components.

This is how I built them out in Figma always so they were easier to iterate on and maintain, just keeping it to 2 levels with the rule of only 1 component can be nested in a 2nd.

 

 

Launching and iterating quickly

After we had the styles, components, and quick start guide done, I pushed it out to the Product Design team to start using. For the first 2 weeks, I checked in with the designers who flagged bugs to fix and also flagged that components which purpose made sense and some that needed some documentation and guidance. I used the Figma description to give lightweight guidance on when to consider using it.

Overall, designers loved the design system and said it made it a lot faster to whip up designs for meetings quicker and eng loved it cause Figma was easier to get specs from and also the naming of the components mapped to what was built in Story.js.

 

 

 

 

...

This is a unique website which will require a more modern browser to work!

Please upgrade today!