Designing the latest generation of Uber Navigation: maps built for ridesharing
The Uber platform currently powers more than 7 billion trips every year. When we launched Uber Navigation, the world’s first navigation system designed for ridesharing, in 2017, the platform was handling 4 billion trips annually.
After 5 years of growing demands, not only in app use but also in terms of ever-evolving products and features, Uber Navigation was ripe for an overhaul. Notably:
- As we continued to ship new trip and navigation features, cracks were starting to show in the product’s design framework. Over the course of a few years, we had shipped numerous feature improvements to the driver experience, but with relatively few accompanying top-level UX framework changes. At the velocity we were shipping, we quickly reached a local UX maximum. To support future product development, we had to tear down our framework and restart with a clean slate.
- Uber’s brand and design system had gone through multiple reskins and visual language updates; we wanted the navigation surfaces to reflect a polished, professional feel consistent with the Uber ecosystem.
So in 2022, a group of designers gathered at Uber’s New York City office to rethink Uber Navigation.
This story walks through our process of redesigning Uber Navigation using rapid prototyping and data-driven design.
A focus on efficiency and safety
With these issues in mind, we set out to design and build the next generation of turn-by-turn navigation for ridesharing.
Because drivers use our navigation system as a platform to work and earn money, making it different from other mapping systems, we selected efficiency and safety as key design principles. We wanted to provide drivers with the most glanceable view of maneuver instructions to be able to parse as quickly and easily as possible. We believed that would lead to more-efficient trips with improved pickup and dropoff information and fewer missed maneuvers.
Easier guidance to follow
One of the first changes that may catch your eye is the fresh coat of paint. Not only does the new design feature a color refresh, but the guidance chrome and map include typography updates that result in larger and more legible text and arrows.
Stress no more on the highway: we’ve brought greater emphasis to highway exits and complicated lane guidance by visualizing lane maneuvers in a clear manner. The system also highlights highway exits more prominently with special decoration.
Stronger contrast on the map
On the map, we’ve updated the route line to black: increasing the color contrast from our previous implementation by 123%, making the route line have a stronger contrast on the base map and making it extremely visible at just a glance.
The route line is annotated with different symbols that visualize stop signs, traffic lights, and even traffic incidents that are updated in real time.
New detailed data
Finally, we’ve brought substantial amounts of new detail to the map to help with driving or delivering. Enhanced building footprints, building numbers, and areas of interest like hospitals, beaches, and parking lots have all been added to the map as part of this update.
With all the new features being rolled out, let’s take a step back to examine the journey of getting here.
Challenges with designing maps
In general, designing for maps presents a few challenges compared to designing for standard user interfaces.
- Geospatial (map) data is highly dynamic and is going to differ depending on your location. The street geometry, the local language, the road classes, and the land usage is going to vary. No 2 places on a map are the same. The UI of a map screen is going to differ in every scenario, as opposed to a typical UI screen that may contain the same predictable layout with minor changes every time.
- Timing and motion also play a significant factor in the navigation experience. The navigation screen is almost never static or still; it is constantly moving and reacting to the driver’s position and heading. The maneuver timing, audio instructions, and map camera animations all need to work together to deliver a seamless driving experience.
With these 2 unique challenges in mind, we had to think outside the box to develop and use creative tooling in order to properly design for navigation. Our standard ways of working and design tooling weren’t going to cut it for this project.
Getting Familiar
At Uber, one of the design principles we follow is to become experts in the space we’re designing in. This means putting ourselves into the shoes of our users and going as deep into the domain as possible. We knew we had to get knowledgeable about not only how navigation systems work in general, but the ins and outs of our own existing Uber navigation.
To do this, we spent a handful of days driving throughout the busy and hectic streets of one of our top markets (New York City) with not just Uber Navigation, but with other navigation providers — all at the same time. This process was very valuable to us, as we were able to meticulously inspect and discover the different intricacies of each provider. We were able to see how each navigation provider reacted and performed with the same inputs and constraints. This process enabled us to uncover the key themes and values of our design process.
Tooling for a data-driven iterative design process
Once we had a solid amount of knowledge from our driving experiences, we got to work with our design tools and began sketching out, discussing, and debating ideas that aligned with our principles of efficiency and safety. However, these rounds of iteration and design differed from our previous and other design projects.
We incorporated some special tooling into our workflow that ended up being vital to our product’s success. We integrated data-driven designing into our process by building custom web tooling that enabled us to rapidly plug in real data to our mocks. For many of you who have been following along with Uber Design engineering, this is similar to what we presented at Figma Config in 2021.
Above is a preview of an interactive design tool that lets us stress test the new guidance chrome with real maneuver data. This tool lets us step through all the different maneuvers on a route, letting us view and tweak the sizing and typography elements within the chrome.
Not only did this let us stress test the designs automatically, but it also helped us understand the technical structure of the data that would be flowing through the chrome. This was also helpful because it brought us closer to our engineering partners, as we were able to communicate more effectively with them and speak their same language when discussing implementation details.
We also created a similar tool to verify our lane guidance icons:
Bringing it all together with a live prototype
Vehicle navigation is one product where seeing the full picture matters. Similar to our exercise of driving around with the existing navigation systems, we wanted a way to truly put ourselves in the shoes of the users who would be using the new designs on the physical road.
We already had the skills to build isolated prototypes with real data to test our designs, but why stop there? Why not bring the entire proposed experience to life with a fully functioning navigation prototype? While this goal sounded daunting, we knew it was necessary in order to truly validate our designs in real world conditions. Testing behind a computer screen in an indoor office was not going to cut it.
We opted to build a web-based application that featured our new designs. A mobile web prototype was perfect because we were able to still access necessary device sensors like GPS, while also being able to iterate and ship updates faster than we would with mobile code. We would still also have an easy way to distribute the prototype with a shareable link.
Whenever we’d make progress on a design, we’d prototype out the feature, and then hit the road to test it. The prototype plugged into all the mapping services and systems that the normal Uber app uses, so we were able to verify our designs with true mapping data, just like any other GPS system.
Although recreating an entire front-end for navigation added a few extra weeks to the project, the prototype served as a crucial tool in helping us discover and correct design errors that we normally wouldn’t have found until engineers started the development process. The few extra weeks invested into this prototype ended up saving us a multitude of weeks of both design and engineering resources down the line.
Validating with real users
After building the prototype, we came to a pleasant realization: if we could drive around and test our new designs, why couldn’t real drivers do the same?
As such, once we were confident that our designs were mature enough, we began organizing driving user research sessions with real drivers on the Uber platform.
Watching the research participants use the prototype and give us feedback early on in the process was an immense benefit to us; normally, for a product this complex, we would have to wait until an MVP is built by engineers in order to start getting insights and feedback from users. These early hands-on research sessions delivered vital insights and uncovered potential risks that we were able to quickly patch up.
Getting everyone onboard
As many who work in large organizations can relate to, designing and building the product isn’t the impressive task: it’s obtaining buy-in and alignment from your internal stakeholders and partner teams. By nature, organizations will tend to lean conservatively with product changes, because introducing new updates can lead to increased risk and potentially negative business metrics. Due to this, we embarked on an internal roadshow across the company presenting our changes to partners including sister product teams, design systems, user research, and even Uber’s Chief Product Officer.
In addition to standard slide deck presentations, we employed some creative tactics to demonstrate the delta and improvements between the old and new design. Internally, there were some concerns that the new guidance chrome felt bigger, and was thus covering additional map surface, and that some drivers may not be comfortable with the reduced map real estate. In order to prove the size changes were minimal, we created an interactive size comparison tool on an internal website.
Enabling employees to tinker with the old and new designs side by side on this internal website helped quell and alleviate concerns.
Design is never finished
Even after rolling out the updates to the public, we know the design is never finished. Expect Uber Navigation to continue to evolve in the near future as we continue to push what’s possible in defining how maps can be used most efficiently in making the A->B possible.
With this project, we were able to overcome the challenges of designing for digital maps by using data-driven design and rapid prototyping to deliver a refreshed and quality product experience.
Are you a talented product designer or design engineer interested in working on the next generation of mobility experiences? Take a look at our Careers page or interact with us on Twitter (@DesigningUber).
Thank you to the team involved: Dylan Babbs, Yuki Asakura, Vincent van der Muelen, Daier Yuan, Oliver Lukman, and Franklyn Graham.
