How Uber is prototyping the future of transportation

We sat down with Bradley Ryan to talk shared rides and Framer.

Traffic, the bane of every commuters existence. Throw in the rising cost of oil, worsening air pollution, unbridled road rage and the arguments in favor of ride-sharing stack up. Tech titans like Uber, Lyft and China-based Didi Chuxing have helped decrease rates of vehicle ownership but until recently, hadn’t moved the needle on space-efficient travel. Now Uber is betting on uberPOOL as the way to get more people in fewer cars. Using data, algorithms and product design, the company plans to crack the complexities around a single issue — carpooling.

What started out as an experimental play by Uber in late 2014 has since blossomed into a complete pivot in the company’s original concept of a luxury car service. UberPOOL now accounts for more than half of the rides taken in metro areas like Los Angeles, New York, Chicago and San Francisco. But its burgeoning popularity on the homefront (and accompanying social conundrums) represent just one piece of the pie. Vastly more difficult to solve are the problems Uber faces in newer megacities across Latin America, Africa and parts of Asia, where population growth and dense urban sprawl are threatening to overwhelm both public and private transportation systems. So how does a design team — predominantly headquartered in the tech bubble of San Francisco (population 890,000) — even begin to tackle a task with such global implications?

Turns out product design has a major part to play in incentivizing this paradigm shift, and Framer has been integral to the process. We sat down with Bradley Ryan, a product designer on the UberPOOL team, to find out more about Framer’s place in their workflow and the complexities involved in designing for group shared rides, a core part of Uber’s future and one with an increasingly large and vital global impact.

“Before the emergence of prototyping tools like Framer, we designed mostly in a static world. But when you’re designing highly interactive experiences, static designs don’t capture the complexity — the nuances — of your designs,” says Ryan, who first joined Uber as a web designer, only to later make the switch to mobile UX design, buoyed in part by his mastery of code-based prototyping. “Framer unlocks a new level for us, pushing our designs closer to reality more than any other tool.”

Ryan himself hails from small-town Illinois, an unlikely candidate for designing the details of a global transportation technology app. But after simultaneously teaching graduate-level UX design and clocking 2 years at Uber (a veteran by startup standards), he felt unequivocally equipped to tackle the task at hand: “ensure that the end-to-end experience with shared rides is as efficient and delightful as possible.”

Bay Area UX designers often talk about the “delightful experience”, but that comes with a particular set of challenges when you’re designing for an on-demand app that uses vehicle routing and real-time traffic data to efficiently coordinate a single person’s transportation needs. Now tack on the difficulty of predictively matchmaking groups of riders based on a common point of origin or end destination and user experience becomes a make or break part of the process. The app has long given equal real estate to its premium black cars, UberX and UberPOOL services in its initial request screen. But as design director Didier Hilhorst detailed in a recent Medium article, some of the cracks were beginning to come through in the design.

“A great interface when you have, say, three to four options… not so much when that number balloons to more than eight — as our riders in Los Angeles and other cities can attest. It got even worse: when we launched a scheduling option, we simply ran out of space and dropped it pretty much in the middle of the screen,” said Hilhorst. In the face of such wildly insurmountable goals, Uber decided a complete overhaul was the way to go. In 2016, the design team, led by Hilhorst, began a complete redesign of the app. Because interaction design plays such a major role in Uber’s user experience — from the animations of cars moving across maps to the transitions between request to match — the team needed a design tool that went beyond mere static wireframes.

“We were being tasked to design experiences — not simple graphics — so handing off a flat file was never an option. As a designer, you need to consider interactions in a non-linear flow and a code-based tool like Framer is the best way to express that,” says Ryan.

Almost all of Uber’s designers contributed in some way to the redesign, but Ryan’s team was given a particularly complex set of issues to solve — “In the old app, you had no idea how long your Pool was going to take vs. an UberX, so users were having to make uneducated guesses, which sometimes resulted in a less than optimal experience,” says Ryan, who works on UberPOOL with a multi-disciplinary team of UX researchers, developers and product managers. “As part of the redesign, we were tasked with delivering an experience with more informed transparency.”

Now the app experience starts off with less limitations, asking “Where to” and delivering enough information for the user to make a choice that falls somewhere in the middle of a price vs. time tradeoff. Bradley shares that one of the hardest things for the team to get right was around how to present arrival to destination times. The team mocked up multiple variations, going through numerous iteration loops: “We considered and tested every detail. Do we show a time-range or a singular time for POOL? How do we represent time — as 1:45pm or 17 minutes?”

The Uber design ethos demanded an authentic user flow, so the team rebuilt the entire app in Framer and then redesigned it in parts, always emphasizing the end-to-end experience. The upside is that this enabled designers to handoff Framer prototypes that looked and felt like the real thing. Researches used these prototypes to test animation and flow on the field in markets from Mumbai to Rio de Janeiro. Jenny Lo, a design researcher on Ryan’s team, says that this workflow helped uncover a host of unexpected results, some with far-reaching impact on the final product.

“When we showed a time range for UberPOOL, riders trusted it a lot more, because it fit their mental model that POOL is a variable product,” says Lo, who adds that Framer has allowed Uber to make a lot of design decisions based on input from real users, instead of spending time debating in isolation internally. “When we showed 17 minutes versus the actual time, users didn’t like that because they’re now having to do math. Surprisingly, we even saw some riders confuse it as their estimated time of arrival.”

Because this was such an important detail, the UberPOOL team were asked to present — or “jam”, as the process is called internally — a solution to upper management. When presented with the plethora of user-research and testing conclusions, Uber CEO Travis Kalanick himself signed off on the new design. This laborious attention to detail is echoed throughout the company and a hallmark of the company’s success.

Uber is not the only e-hailing app that is banking on collective group transport as both a savvy business move and a way to cement its place in the transportation infrastructure of the future. But its worldwide dominance remains largely unparalleled, thanks in part to the quality that comes through on the design and development front. Though undeniably a data-driven company, the design team’s dedication to qualitative research is what sets it apart. “Framer is integral to our workflow, allowing us to perfect animations and motions and then validate and test flows even before handoff to the engineer. It’s also closing the gap between design and development — we’re all speaking the same language now,” says Ryan. “The result of that is just an exceptionally well-designed, well-tested and well-developed product.”

Already active in 81 countries and serving 563 cities worldwide, Uber is well-suited to propagating projects dedicated to decongesting urban roads internationally. A recent study by MIT’s Computer Science and Artificial Intelligence Laboratory theorized that just 3,000 Uber shared ride cars could fulfill 94% of all ride requests in New York, a city with a whopping 14,000 taxi medallions in circulation. In Dubai, a recent deal with the country’s Roads and Transport Authority (RTA) plans to study the benefits of introducing a fleet of low-cost options designed to reduce traffic congestion and offer an alternative to vehicle ownership. But perhaps the biggest argument in favor of shared rides are the success metrics coming out of India, where UberPOOL was launched in 6 cities around late 2015. “Since the launch of UberPOOL in the country, the company has partnered with citizens in saving over 32 million km of vehicle-travel, over 1.5 million liters of fuel, reducing CO2 emissions worth 3.5 million kg,” Apurva Dalal, Head of Engineering for Uber India, said in an article published by IANS. “UberCOMMUTE — a ride-sharing feature specific to cities with significant rush hour traffic — is also picking up.”

As part of design sprint, Ryan helped come up with a few ideas around UberCOMMUTE — and as per what is quickly becoming protocol within the company—used Framer to validate their ideas. Ultimately, they didn’t ship any of their designs, but that’s besides the point, argues Ryan. “While some may view that as a failure, we see that as a success. That’s what prototyping is for. It saves us valuable time from building stuff that doesn’t work.” For a company that is already hedging its bets on self-driving cars and taxi helicopters, prototyping before developing seems like a smart way to go.