The Way We Build

How rethinking the Airbnb app changed the way we approach design

Categories: Perspectives — Alex Schleifer

This article kicks off an ongoing series on Airbnb’s new Design Language System. Click here to read other installments.

From an early age, I wanted to create things on screens. I began by experimenting with code, plotting pixels to form shapes and words. I became an engineer. Engineers created things, and could bring concepts to life.

As time passed, tools emerged that allowed me to concentrate on interaction design. I’m convinced that code remains one of the most powerful design tools, but software–like Macromedia Director or Adobe Photoshop–lets us move quicker. This has enabled a generation of designers to become the architects of the digital experiences we find ubiquitous today. I can’t overstate how visual tools like Photoshop fundamentally changed the process of designing software and shaped the course of my career plotting pixels.

The challenge today is that we are often still using the same methods we were 20 years ago. Tools don’t communicate well, if at all, with each other. We continue to mock things up. The way we work today can broaden the gap between engineering and design, and the many layers between designing and building are a burden.

We can do better. We can work better.

The Collaboration Gap

Technology companies are expected to move at an incredible pace, and building software is complex. Add ever growing teams to the mix and you often end up with disjointed experiences. This has led us to try to better understand how multiple teams can efficiently collaborate to build great, cohesive software.

Engineers have kept pace with this new reality. Building better tools and processes that allow hundreds, if not thousands of individuals, to contribute to a single codebase. Things aren’t perfect, they rarely are, but coding today is fundamentally more efficient and collaborative than it was five let alone twenty years ago.

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.

Software design has unfortunately not evolved at a similar pace. The gap between designers and engineers has only increased. Design teams can often struggle to reach a cadence that balances the creative process and cycles of continuous innovation. Quality suffers, the experience becomes less cohesive, and talented people spend an inordinate amount of time simply managing communication across disciplines.

Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. Industrial design and architecture have operated under that premise for decades. At Airbnb, we want to invest in a better way to build. We believe we can achieve this by investing in our own internal tools, partnering with others to solve similar challenges, as well as supporting the community through open-source projects and information sharing

A Better Way to Build

Our ambition required us to rethink some of the ways we worked. Today marks the rollout of the most ambitious update to our Airbnb app — a new entirely mobile way to explore the hosts, homes, and neighborhoods of our community.

This process led us to the development of our new Design Language System (or DLS), as well as a suite of internal and third-party tools that allow our teams to not only work smarter, but also closer. The DLS is a collection of components defined by shared principles and patterns. This allows for rapid iteration using a shared vocabulary across design, engineering, and other disciplines. The structure of the DLS is simple and coherent, easing communication across teams.

Christopher Alexander, who wrote the seminal The Timeless Way of Building, states that “when language is shared, the individual patterns in the language are profound.” For this to happen, these patterns need to be fundamentally simple. “Nothing which is not simple and direct can survive the slow transmission from person to person.”

It focuses on common ingredients that follow our core design principles: unified, universal, iconic, and conversational. Universal and Unified define the system’s approach we apply when defining patterns. Is it part of a greater whole? Does it work across devices? Iconic and Conversational help define the character of the system — its unique human qualities that tie back to our community and brand values.

 

Designing the Workshop

The biggest existential threat to any system is neglect. The attrition generated by how difficult it is to use and maintain a cohesive system across various teams with their own specific needs. This is where our investment in tooling comes in. We are launching our brand new app with the help of an array of tools that work more coherently together. Like a well run workshop, our tools need to complement each other. This frees up space to focus on craft and creativity.

Our newly-formed design tools team is tasked with creating an environment built on top of the foundation of the DLS. We now have deep integration with third-party tools, like Adobe Photoshop and Bohemian Coding’s Sketch, allowing designers to quickly access all components and even real data from within the tools they use daily.

A piece of paper on a table showing doodles of various icons Airbnb's DLS team in conversation at the office.

We have also deployed homegrown efforts, like our native component browser and Airshots, which allows anyone at Airbnb to access thousands of screen permutations instantly. Imagine being able to see any screen from any version of our app in any language on any device that we support.

Lastly, we’re investing in code as a design tool. Moving closer to working with assets that don’t only include layout and design, but also logic and data. This helps bridge the gap between engineers and designers, thus reducing the need for design specs–or redlines–and the steps between vision and reality.

The Future is Bright

By focusing on the methods of working across disciplines, building better tools, and creating a unified system, we can use our time to apply creativity to solve bigger challenges. Over the coming months, we aim to be fully transparent and release detailed case studies on how our system is defined and what decisions go into designing components, patterns, and rules.

There is a groundswell of activity that is helping us all get to a better place. The next year alone will see giant leaps in the way we design and build software. We are building a world where the differences between disciplines are blurred, where logic and design truly coexist, and where collaboration is not painful but inspiring.

Alex Schleifer is the VP of Design at Airbnb. When not designing product at Airbnb he works on becoming an adequate engineer and mediocre musician.

Up Next