Building a Design System like Uber and Airbnb
Learn how Uber, Pinterest, Shopify, and Airbnb are leveraging components to build a consistent UI/UX design system.
Creating and maintaining a consistent UI and UX across every part of your product helps your users intuitively navigate and successfully interact with different sections of your applications without confusion.
Keeping your UI consistent between multiple sections of your product and across apps creates something even much more valuable: your brand. Branding your UX and UI is the key to making users “feel at home” while interacting with new products, increasing their loyalty and satisfaction.
Visual and functional consistency
Functional consistency makes your product more predictable. Users know how an element behave, and therefore will also feel more safe and secure to interact with it even on a page / screen they visit for the first time.
Visual consistency includes the colors, fonts, sizes, positions and other visual aspects of your UI which help your users cognitively identify and classify UI elements. A certain font color, for example, could be strategically used to help your users understand what they will get if they push a specific button.
In today’s ecosystem, UI components can also function as UX components, combining the power to create both functional and visual consistency.
A component-based design system can grant your applications both visual and functional consistency, helping to make your users feel at home and easily navigating their way to complete the desired interactions with your product.
Why do I need a component design system?
Components are a great way to design and develop your UI using smaller, reusable pieces with better consistency.
Companies like Uber, Pinterest, Airbnb, Walmart, Atlasssian and many more achieve consistency in their UI through a component-based design system.
Airbnb’s Design Studio used this approach when building their design system: “Our designs should be unified platforms that drive greater efficiency through well-defined and reusable components”.
Here are some of the key advantages of a component-based design system.
- Reusability encourages consistency for both UI and UX as components create a consistent experience wherever they’re used.
- Atomic Design can be leveraged for better consistency as larger components are composed out of smaller components, reducing unexpected and disjoint experiences.
- Components provide better collaboration between design and development, allowing your design language to evolve over time. Ideally, what you see on Sketch is what you build with React.
- Design aspects such as typefaces, typography, primary and secondary colors can still be specified as part of the component design system.
Build your component design system
So far so good. But, how can you actually create a component-based design system on which UI/UX designers and developers can collaborate? This can be easier said than done (see: “UI Design System and Component Library: Where Things Break”).
So here’s a question… “what is your design system really?”
Ask a designer, and they will say it’s some images and guidelines. Apart from components, it will include guidelines for fonts, sizes, margins, positions, and other important aspects of the visual experience you provide to people.
As a developer, and they will say it’s a component library on GitHub, written in React, Vue, Angular or just JavaScript.
A UI design system is more than a component library. It’s more than the colors of your components. It’s an ever-growing and ever-evolving source of truth for the basic parts from which your entire product experience is made of.
Therefore, before implementing the first component you would have to set the styleguide and design language ruling these components. Here is a good start.
Then, these design principles should be translated into a code implementation of your components, from smaller Atoms to larger compositions (see: “Atomic Design and UI Components: Theory to Practice”).
Building a reusable component system
At the end of the day, the real source-of-truth of your design system is the code you write. Why? because that is what your users really get in your apps.
So, you need to consolidate your design system and components into a unified system where both developers can designers can collaborate over components. You are really building a reusable component system, which should let you build, distribute and get adoption for shared components.
Modern tools like Bit, can come in very handy:
Bit is a developer-first component collaboration platform. It helps you bridge the gap between design and GitHub, through shared components.
Through Bit all your components become available for all developers to use and collaborate on across projects and teams. They also become available for the designers to visually view, sandbox and monitor for changes. Mainly, they become available for everyone to share and collaborate-on in one place.
Take a look:
Solo developers or small teams can use Bit to easily share components between different Vue applications while syncing changes between them. Gradually, your components will be added to your reusable collection.
Larger organizations can leverage Bit to grow their component-economy and help component-builders and applications-developers work together. More collaboration means greater component adoption which leads to faster development and a smoother and more consistent UI/UX for your users.
Bring development and design together
Developers can leverage Bit’s open-source CLI tool to build, test and publish individual components from any project or library in minutes, no refactoring or configurations required. Bit seamlessly detects and tracks components in your project, defines each component’s dependency graph and wraps each component in an isolated capsule so it can be used and run anywhere.
You can export all your components to bit.dev (or set up your own server), where your team can easily discover and use components in different projects. Bit even lets you import each component’s source code into consuming projects to make changes and update the component (and its dependents) without context switching. More adoption for shared code.
Designers can now view all the actual code components implemented for their design system. Not a documentation site, not images, but a live and interactive view of the actual components your users will get. When a change is made, the designer instantly sees the new version and can provide input. They can play with examples, change stuff, and stay on top of code changes.
A UI component library
Shopify uses Polaris, a design system that includes a react component library internally used to create a more consistent experience for merchants using Shopify. Airbnb’s component library led to a huge leap in productivity.
Pinterest uses Gestalt, a React UI component library which “enforces Pinterest’s design language.. streamline communication between designers and developers by enforcing a bunch of fundamental UI components…”.
A shared component library is an effective tool to enforce consistency across your UI. In my view, consistency shouldn’t be enforced but rather achieved.
A component-library is basically a way to enforce a bunch of UI components across every app or app-part your team is building. But, developers are limited not only to the library’s visual language but also to its on-going development.
When a component is needed in a specific part of a specific app, it might need some adjustments and modifications. The designer and developer together should find the right balance between flexibility and consistency.
A shared library often breaks this balance and slows down development, which in turn impairs the adoption of the library itself by the development team. It also makes very little sense to enforce a huge heavy library wherever a single component is needed (let’s not go into the tree-shaking debate).
If you don’t use tools like Bit, then to enable designer-developer collaboration you would also have to maintain a live docs site for the components, and somehow make it editable for designers and developers (tools such as Airbnb’s react-sketchapp and Figma can help). Here are also some useful tips.
Here are 23 popular React UI libraries you can use out of the box, in case you choose this option. If you implement your own library, remember to leave enough design room for developers to play, without breaking the rules.
Components in a UI library can also be shared to Bit to unify component discoverability, playground and consumption, to reflect your library as a visual system of actual components that can be shared and used anywhere.
Here’s an example of the semantic-ui project turned into shared components:
Balancing consistency and flexibility
Churchill once said that “to change is to improve” and “to be perfect is to change often”. If we enforce too strict consistency, we will stop to innovate.
As we build new things we’ll have to bend the rules just enough to allow some room for growth, but not let things slip into chaos.
Although there’s no magic here, the right philosophy, methodology and tools can help you achieve this balance between UI consistency and innovation. Here are a few useful tips.
From design perspective, not every style should be reusbale and pre-defined.
For example, a certain component (nav-bar, item etc) could have a relative size or margin compared the rest of the application. In different instances these variables might change, so it’s ok to leave some room to play.
Another useful methodology used by Uber and other teams is to separate basic / global / foundation components from “secondary” components.
For example, Uber uses primary and secondary components with more than 22 different colors and 22 values, 484 unique hues in total. More than 70 unique patterns were created — one for each of the countries Uber serves.
Designer-developer collaboration is the key to finding this balance. Some teams (like Walmart Labs) put effort into increasing the reusability of UI components themselves, bridging the gap from the developer’s end as well.
The right tooling and workflow can also go a very long way for your UI. Tools like Bit and Storybook can help to facilitate this balance.
Where there’s no choice but to break consistency, Patterns, visuals and words are a great way to give users a familiar feeling and reduce confusion. Consistent patterns, recognizable visuals and a consistent tone of voice can help your users feel safe and intuitively interact with your product.
Recap
- UI and UX consistency helps users successfully interact with your product.
- A design system is the ever-evolving body and soul of your UI/UX. A component-based design system breeds visual and functional consistency.
- Uber, Airbnb, Pinterest, Netflix and other great teams use a component-based design system to create and evolve their visual language.
- To build a component-design system, you can create a library, use Bit and leverage different tools and methodologies to grow it over time.
- It’s important to balance consistency with flexibility by leaving room for changes, using helpful tools and encouraging a collaborative culture.
- Remember: balance and collaboration is everything. It’s not a single effort, but an ongoing journey which designers and developers take together.
