Upgrading Uber’s 3D fleet
15 million times a day, tiny 3D cars travel across screens around the world helping Uber riders and drivers connect. We’ve gotten a lot of mileage out of them, but we realized it was time for an upgrade. We gave our iconic 3D cars a complete design overhaul. Here are some of the highlights.
The original 3D cars debuted as part of our Rider app redesign in 2016. They started out as functional map elements showing location and availability. Each one was painstakingly optimized for use on maps — the proportions, detail (or lack thereof), and shape had been designed for a top-down view at 64x64px.
Since then, our rider app has grown in complexity and the needs for the 3D assets expanded. When scaled up for marketing campaigns, the lack of detail in the cars was a problem. Someone once described them as “soapboxes on wheels”. Because they weren’t intended to be used outside of the map, they weren’t designed for it. But this was now a clear need. We decided to revisit them.
Playmobil meets Porsche
The motor enthusiasts on the team led this project, and it quickly became a true passion project for many of us on the design team. At the onset, we asked ourselves “what makes an Uber car?”. Uber offers a wide range of ride options. There are familiar products like UberX and Uber Black, specialty options like wheelchair accessible vans and helicopters, and local vehicles like auto rickshaws and motorcycles. How could we bring them all together?
Designing car fascia is tough…really tough. In digital design terms, creating fascia is like establishing a visual design system. It’s essentially how the features of the front (grille and headlamps) and rear (tail lamps) connect with the interior and overall shapes found throughout the vehicle.
Naturally, we turned to brands that have a strong heritage in this space. We found inspiration in two places: the powerful aesthetics of German car manufacturers, and the masterful miniaturizations of toy brand Playmobil.
Taking the lead from these seminal brands, our goal was to create a universal language uniting the range of vehicles in our portfolio.
The world’s first car designed from a logo?
We wondered, “Can you design a car based on a typeface? Had that ever been done before?” It was a novel idea. It was also easier said than done.
Our new brand is largely built around themes of transportation. The colors, typeface, iconography, and logo are inspired by the universal language of transportation found throughout the world. This seemed like a good place to start.
These early studies didn’t necessarily pan out, but they helped us understand the role of geometric shapes in the overall system. In retrospect, some of these early iterations were pretty esoteric. 🙃
After settling on a handful of unifying elements to drive our visual system, the next step was to apply them to the entire fleet.
From cars to vehicles to people
Over the last few years, our rider app has evolved from a utility to get from A→B, to a bigger, broader transportation service. Today, it’s less about getting a car and more about connecting people to what matters most. We started this project designing cars, but our purpose quickly evolved to ensuring our riders have visibility into the best ride option for their needs.
After sourcing the complete list of travel options from our operations partner, we were surprised to learn Uber offers over 50 distinct products globally! This project provided a broad perspective into all of the unique ways people move around the world.
Behind the scenes Q&A
This type of design can’t live on paper for too long. Luckily, we had our very talented in-house 3D artist Mike Gaynor helping us along the way. Let’s ask him a few questions:
Your full-time job isn’t making 3D vehicles, how did you end up in this gig?
I’m a motion designer by trade, but 3D is a big component of the work I do. My knowledge of 3D tooling and workflow seemed like a natural fit for the project and the next thing I knew, I was producing a whole fleet of vehicles!
What was the most challenging part of the project?
It was challenging to differentiate the vehicles enough to communicate the product they represent and maintain visual consistency across the fleet. Elements like lights and wheels were kept consistent across the board to help, and the cars all share a similar level of detail. It was a fine balance to maintain while working through many iterations.
What was your workflow and tooling?
The vehicles were modeled in Cinema 4D and Octane Render. Because we were doing so many iterations, I kept as much of the geometry live as possible using splines, primitives, and deformers. This allowed me to make edits such as a steeper roofline or wider wheelbase very quickly. The renders were finished in After Effects and formatted for our product team to use.
👾 💻 Bonus — interactive WebGL garage 👾 💻
Most people don’t get a chance to see the vehicles beyond a 250x250px frame, so we created an interactive website to give others the opportunity to explore some of them up close and personal.
Try it out for yourself here: http://t.uber.com/3dGarage. *Sorry, desktop only*
Enjoy!
Special thanks to
Brian Wong, Vinny Catricala, Lori Mann, Alissa Sanchez, Didier Hilhorst, Mike Gaynor, and our friends at Wolff Olins for helping make this happen!
