We had the chance to catch up with Uber’s design system engineering manager, Gergely Nemeth, and hear all about what they’re up to with Base Web. Here’s some of our top questions answered, enjoy!
What is your role at Uber and how long have you been doing it?
I joined Uber as an engineering manager last year, working on the UI Platform team. We are the team building and maintaining Base Web, an open source suite of tools for initiating, evolving, and unifying web products. In short, Base Web is the React implementation of the Base design systems.
Do you have a name for your design system? How did you come up with that name?
It’s called the Base Design System. We wanted to create a base set of components and design tokens that other design systems can build on top of. These new design systems are just a thin theming layer on top of Base.
How supported is the design system effort in the company? Did it start off that way or did it take time?
Base Web fully developed by Uber, and we have a team of five engineers plus four designers working on the project full-time.
Over the past several years, Uber’s suite of products, including our internal web applications grew, and to create greater developer productivity and efficiency, we quickly realized that we needed a centralized design system. Base Web was developed as a result of this effort.
What is the layout of your design system team? Does anyone outside of the team contribute?
We have two dedicated teams to build out Base: the engineering and the design teams, who work closely with each other.
Base Web started as an inner-sourced project while we built out the dedicated team. We have contributors from all over Uber – currently more than 20 collaborators beyond our direct team.
What are the major pieces that make up your design system?
The two biggest parts are the Figma component library and the React implementation. When designers start building user interfaces, they can utilize the Figma library, and once it’s ready for development, the React component library can be used by engineers to implement the application.
How have you approached documentation for your design system?
We’ve started using Storybook for the React implementation. In the early days, it worked well, but also caused some frustration, as it’s hard to provide copy-pastable code examples.
In our developer surveys we learnt that the Storybook-based documentation site was one of the project’s biggest pain points, so we’ve started to roll our own, with plenty of copy-pastable code examples.
What technology are the components built on?
We build our components using React. The styling API is provided by Styletron, which is a CSS-in-JS solution. Other than these, Base Web barely has any other production dependencies to make sure we have a small footprint in your applications.
What are some of the next biggest challenges that you’ll be tackling for your design system?
As the adoption grows for internal applications, our next biggest challenge will be to enable teams building external applications to leverage Base Web. Through the theme configuration and overrides pattern, we believe we can make this happen.
Another challenge we face is how we’ll address requests from the open-source community. Base Web is a project created and maintained by the UI and Design Platform teams at Uber, and because of this, most of the components will address the requirements of internal Uber applications. We’ll have to find the fine line between the need of the internal applications and the need of the broader web community.
What advice do you have for someone in the early stages of starting their design system?
Invest in documentation early on–if you have good documentation, developers will love your design system. If you don’t, adoption will suffer and you’ll have to deal with a lot of incoming support requests.
About Gergely Nemeth
Software engineer manager, architect, conference speaker, focused on Node.js and its ecosystem. Design systems keep me busy these days. Loves a good cup of coffee.
Built RisingStack & JSconf Budapest