Upleveling LyftNav
ROLE
outcome
team
Josh Griffin | Frontend engineer
Nathan Cozlowski | Data science
Samantha Willis | Ops
Shereen Idani | Product
Sangwoo Kim | Design
By the time I joined the Mapping team at Lyft in late 2022, they had just launched the pilot version of their in-house navigation product made with Open Street Map and couple of other data sources such as TomTom and MapBox. It was a bold move for the transportation company to develop its own mapping solution while there already exist a reliable map provider like Google Maps.
I joined at a time when the team’s focus was achieving parity with Google Maps, which served the vast majority of our drivers and riders. Striving for parity was a reasonable direction when the product was in a nascent stage but along the way usability issues and rideshare-specific use cases were left unaccounted for. On top of that, our team set a goal of converting 70% of drivers to Lyft Nav by H2 2023. So it became apparent that we needed to come up with unique set of values beyond parity so that our users would feel compelled to try out our new navigation system in place of Google Maps, which they were already used to.
Glanceability
40% of color pairs in Light mode, 53% in Dark mode failed to meet our accessibility standard across our cartography and map UI elements. It led to users complaining how “the rendering on the map compared to the regular app is horrible.”
Functionality
Rideshare-specific nuances were not captured as the priority was set to achieve parity with Google Maps. Having full control over our map and routing API unlocked new set of possibilities but those weren’t utilized to its full potential.
Brand
Our product was devoid of brand personality, which led to poor recognizability and lack of differentiation. In light of those, there was an opportunity to imbue more Lyft spirit to stand against competitors.
Reinventing Puck and Pill
On the road, all kinds of unexpected situations can impact driving. Especially as a team that puts our users safety first, it was crucial to provide pertinent heads up at the right moment so that drivers can adjust accordingly. But the challenge was that bombarding users with too much auxiliary information could not only increase cognitive load but also compete with other primary information. That’s where the idea of using existing navigation elements, puck and pill, in a dynamic manner came to birth.
- Helps orienting users
- Communicates status
- Provides visual guidance
- Indicates current street
- Elaborates status
- Provides text guidance
Puck anatomy
Brand easter egg
Brand could be manifested in myriads of different ways. But in light of graphic-heavy aspect of navigation product, it needed to be done in a subtle way. Among available brand assets, the iconic Pink Mustache seemed like a great option because it used to be a physical identifier of Lyft drivers in the early days. So I started experimenting with it and ended up landing on the idea of extracting the distinctive shape and apply it in the compass.
Application
Default state
During normal driving condition, Puck indicates normalcy with primary color, which also helps it stand out against the map and Pill shows the current street you’re on.
Low connection
Puck and Pill both turn gray and Pill states the cause of such change. Explaining the external condition is important because it affects the loading time of the turn-by-turn guidance.
Special Conditions
When drivers enter work zone or school zone where the speed limit changes, LyftNav inform them of those changes via Puck and Pill color, along with speed limit shield that reflects such change in the environment.
Safety alerts
In tricky situations like when the pick up location is in the vicinity of bus stop or restricted curb, LyftNav not only informs users via Puck and Pill but also signals which side of street via Halo so that they can adjust their pull over spot.
According to our user research it was found that lane guidance with “ghosts” (invalid turn types) and hyper- accurate intersection geometries would be the most prized banner information. However, the initial implementation failed to generate optimal visibility of the very information drivers attended the most.
Space constraint
Because we overlaid icons via code on the fly, icons had to be designed in such a way that enables all kinds of permutations without repositioning. Such approach posed signifiant constraint on the use of space, leading to low visual weight.
Imbalanced alignment
Center of mass for each icon was different, resulting imbalance of visual alignment. This issue seriously impaired overall glanceability of the information.
Illegible icons
Overall size and lack of space between ghost and solid icons deteriorated legibility of icons. Problem exacerbates when two icons are pointing in the same direction as arrow heads would almost overlap.
Solution | New system
Route visualization is arguably one of the most important piece of information, if not the most important, in navigation space. It guides users where to go, make turns, and informs them of congestion level. The challenge is that the route needs to be highly visible against any part of the map, whether it be park or highway. Especially since route itself contains congestion information, ensuring visibility of the route and congestion at all times is not an easy feat. After the initial launch, we learned that there are few more cases to be thought through more deeply.
Insufficient contrast
Heavy traffic against the primary color didn’t generate enough contrast, making it hard to catch at glance.
Color similarities
Medium traffic color was too similar to the highway, reducing utility of the information.
Dark mode confusion
Due to inverse color scheme in dark mode (lighter colors being primary and darker colors secondary), users were confused which line represents the main route.
In this milestone, I had to consider couple of constraints. First, cartography color scheme goes hand in hand with route line visualization, but due to its scope, cartography change was ruled out for this milestone. Second, design systems team had just updated the UI color palette so we had to work within the palette they provided. Lastly, time. Since this issue was affecting overall trip time and route compliance, we had to fix the problem with urgency. With these in mind, I came up with a principle.
Start with brand primary color as the basis
Use color theory to find harmonic pairs
Ensure key color pairs are accessible
Stress test colors on the actual map
In terms of visualizing route line, we needed four colors – main route, heavy traffic, medium traffic, and light traffic. Also they needed to be balanced so that the congestion information would be highly visible without overpowering the main route. When these factors were taken into consideration, tetradic pairs seemed like the best color scheme to adopt, since they produce even saturation.
After identifying core colors, the next step was find the closest color from the brand palette by looking into properties such as hue, saturation, and luminance.
To gain their full trust, we changed our qualification history to display both qualified AND unqualified orders along with reason code (why certain orders were considered unqualified).
For traffic 2 (medium traffic), Amber was chosen due to its proximity to the base color in terms of hue.
For traffic 3 (light traffic), the baseline color contained high level of green, which made it look less like traffic data. So for this one, we decided to draw color from Yellow family. Luminance wise, Yellow 40 and 50 was the closest to the baseline but Yellow 40 was chosen because it produced greater contrast with the main route color than Yellow 50.
Once light mode palette was defined, dark mode palette was derived from it. For dark mode palette, the key was to keep the core color scheme consistent with light mode to address user confusion between two modes. Simply put, rather than using light indigo, we chose more saturated indigo color to be the primary.
Nav 2.0 was a year-long project, proposed and advanced by my personal proposal. It was an attempt to impact our business through set of design-driven initiatives, while keeping users' needs at the core. And the results manifest the efficacy of this endeavor.
Google Maps-free rides
LyftNav-powered rides in 2024
Per-ride cost savings
Reduction in drivers' speeding
Design can and should influence the org to be forward-thinking
Form and function should be sought after as a package