Uber Redesigns Shared Rides

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

asha

Ashanya Indralingam

February 8, 2017

uber cover

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 a 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.

But 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 that 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.

“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.”

bradley from uber
Bradley (right) and a coworker present a prototype during an internal design review

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.” 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 so handing off a flat file was never an option," says Ryan.

“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.”

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. Researchers 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.”

uber office uber app
Ryan (left) and Lo (middle) use Framer prototypes of Uber during user testing sessions

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," says Ryan.

"Framer is closing the gap between design and development — we’re all speaking the same language now."

uber car

The result of that is just an exceptionally well-designed, well-tested and well-developed product, one that is being used by millions worldwide. To learn more about how Framer can improve your product team’s workflow, check out all the features included in our integrated design, prototyping and collaboration tool. Or talk to us to find out more about the additional features included in our Team plans.

Like this article? Spread the word.

Want more design articles?

Sign up for our newsletter and get resources, curated content, and design inspiration delivered straight to your inbox.

The Official Loupe 2018 Recap

Read more ›

Featured Framer X Packages: October

Read more ›

Interactive Components From Top Design Teams

Read more ›

Try Framer X.

The world’s most advanced tool for interactive design has arrived. Get started with Framer X today.

Try it for free ›

Start your free 14‑day trial.

Enter your email and we‘ll send you a download link for later.

We recently introduced Frames and Shapes, so some information in these videos may be outdated. To learn more visit our Help Center.