Creating Amp: Part 1 of 3

Overview

As one of Lyft’s most visible brand symbols, the Amp has been one of my favorite projects. I was privileged to be involved in the development of Amp from its inception, and created all animations on the device. The Amp garnered much praise at launch and even earned Wired magazine’s #1 slot in The Best User Interface Upgrades of 2016. Since Amp's launch, it has rolled out to hundreds of thousands of drivers and can be seen in all major cities. Drivers and passengers enjoy Amp for its utility, but it is both playful and personal too. Below is a breakdown of the work I owned as we upgraded the Glowstache and evolved Lyft as a brand with the Amp.

Amp Development

From the beginning, Amp animations have been a challenge to create. There was no process for building animations until I developed one, and it needed to be flexible enough to adapt to the different form factors we were considering. There are two LED displays on the Amp: interior and exterior. The exterior animations are projected through 20 RGB LED’s and 4 white LEDs in the logo. The interior display has a grid of 120 white LEDs and is used mainly for messaging and status updates.

We worked closely with the award winning Ammunition Group to create the physical product; Igor Institute provided the engineering and firmware development. Jesse McMillin (VP, Creative Director), Ethan Eyler (Director, Ride Experience), Sebastian Brannstrom (Software Engineer), and myself were Lyft's initial internal Amp team and were closely involved in early hardware development. Several times I was asked to visualize the effect of changing hardware elements, or illustrate how a non-functioning device would appear to work. Amp is Lyft’s first connected hardware device, and went through months of prototypes, adjustments, and reviews.

Interior Amp Animations

The interior display affords a great deal more detail than the exterior display. From text messages to animated abstract shapes, the interior animation library required a great deal of trial and error before it began to look the way we wanted it to. The animations are created in After Effects and piped through a series of expressions and effects to create individual pixels for each of the 120 LEDs. Below, you can see a wide array of animations that have been created for the interior.

The interior display shows text most of the time, which required a pixel sized font to be created. I went through a few iterations before the font was considered ready, but the entire process was very meticulous and thought through. When your canvas is only 24 pixels wide by 5 pixels in height, every single individual pixel counts. In all, the font ended up being 107 characters, including 45 special symbols and icons.

The Amp required a specially designed font with a max height of 5px. This typeface is used to create custom messages that are generated directly on a phone.

Exterior Amp Animations

There are several recurring animations that appear on the front that Lyft passengers may recognize. These animations are often seen during pick-up, drop-off, and ride in-progress. There are campaign animations for holidays and special events, and firmware animations to show pairing status. The most visible animations for passengers would be the six colors used for *Beaconing.* When a car is pulling up to a passenger’s location, the Amp will play a pulsing animation in green, grey, orange, purple, teal or yellow. The passenger’s app will display the color they should look for and the app can make sure no two passengers will see the same color.

Improving Amp

At one point in a real-world test of Amp, we realized that we weren’t getting the battery stamina of 8+ hours we had announced. I used a USB voltage meter, provided by Igor Institute, to begin testing the energy usage of my animations. I started the process of optimizing the energy usage of animations that played often, and was able to provide multiple energy efficient options to be tested with drivers. I was able to reduce the energy draw from our most prominent animation from 0.45 amps down to 0.17 amps; along with Sergey Shlykocich’s dynamic brightness logic we achieved a 15 hour battery life.

Scaling Amp

Along the way it became clear that we would need to bring in more animators to keep up with the demand. I documented the entire process for Amp animation development and deployment. This documentation is now the tool I use to train new animators to begin creating, sharing, testing and reviewing animations.

Documentation was essential to be able to scale the process and introduce new team members to the technical process.

Creating Amp Series

This project is part 1 of 3 in a series.
Be sure to check out the other two parts.