Fifteen million times a day, tiny 3D cars travel across smartphone screens around the world, helping Uber drivers and passengers find each other. But we realized that it was time for an update. We have completely revised the design of 3D car models. Below are some highlights of this project.
The original 3D cars debuted as part of a redesign of our Rider app in 2016. Initially, they were functional elements of the map showing the location and availability of a car. Each has been carefully optimized for use on maps – aspect ratio, detail (or lack thereof) and shape have been designed to be viewed at 64x64px.
Since then, our application has grown in complexity and the demand for 3D resources has increased. As the business expanded, the lack of car detailing became a problem for advertising campaigns. Someone once called them “soap dishes on wheels.” This is because they were not meant to be used outside of the map. But now such a necessity has arisen. Therefore, we decided to revise them.
Playmobil meets Porsche
This project quickly became a real hobby for most of the designers on the team. First, we asked ourselves, “What does an Uber car do?” Uber offers a wide variety of ride options. There are familiar products like UberX and Uber black, special options such as vans adapted for wheelchair users, helicopters, and local vehicles such as rickshaws and motorcycles… How can we put them all together?
Designing a car dashboard is tricky … really tricky. In terms of digital design, this is similar to creating a visual design system. Basically, this is how the features of the front (grille and headlights) and rear (taillights) connect to the interior and common shapes that can be found throughout the car.
Naturally, we turned to brands that have a strong heritage in this area. We found inspiration in two places: the powerful aesthetics of the German automakers and the gorgeous miniature toy cars of the Playmobil brand.
Guided by the experience of these original brands, we have defined our goal to create a universal language that unites the range of vehicles in our portfolio.
The world’s first car designed with a logo?
We wondered: “Is it possible to design a car based on a font? Has anyone done this before? “ This was a new idea. Easier said than done.
Our new brand is mainly based on transportation. Colors, font, iconography and logo are inspired by universal language of transportfound all over the world. It seemed like a good start.
These early studies were not necessarily successful, but they helped us understand the role of geometric shapes in the overall system. In hindsight, some of these early iterations were pretty esoteric. ?
After choosing a few common elements to control our visual system, the next step was to apply them to the entire fleet.
From machines to people
Over the past few years, our travel app has evolved from an A → B transition utility to a larger and wider transportation service. Today it is not so much about ordering a car as about delivering people to what is most important. We started this project with the development of cars, but our goal has evolved rapidly to provide people with the opportunity to choose the best travel option for their needs.
After receiving a complete list of travel options from our operating partner, we were surprised to learn that Uber offers over 50 different products all over the world! This project provided a broad perspective on the unique ways people move around the world.
Behind the scenes of the project. Questions and answers
This type of design cannot live on paper for too long. Fortunately, our very talented 3D artist Mike Gaynor helped us with this. Let’s ask him a few questions:
How did you get into this project?
I am a motion designer by profession, but 3D is a big part of my work. My knowledge of 3D tools and workflow seemed like a natural fit for this project, and I ended up building a whole fleet of vehicles!
What was the most challenging part of the project?
It was difficult to differentiate vehicles enough to represent the product and maintain visual consistency across the entire fleet. Elements such as lights and wheels were matched and all cars had the same level of detail. This balance needed to be maintained over many iterations.
Tell us about the workflow and tools used?
The cars were modeled in Cinema 4D and Octane Render. Since we’ve done so many iterations, I’ve kept most of the geometry using splines, primitives, and deformers. This allowed me to make changes very quickly, such as the slope of the roofline or the width of the wheelbase. The rendering was finished in After Effects and formatted for use by our development team.
Bonus – interactive WebGL garage
Most people are unable to see cars outside of the 250x250px frame, so we created an interactive website to give others the opportunity to get to know some of them in person.
Try it yourself at the link: http://t.uber.com/3dGarage. * Sorry, for desktop only *
Special thanks to:
Brian Wong, Vinny Catricala, Lori Mann, Alissa Sanchez, Didier Hilhorst, Mike Gaynor and our friends at Wolff Olins for their help with the project!
Thanks to Christopher Starr, Marco Paglia and Remon Tijssen.