App Launch Animation

New leadership → New animation

In 2023, Lyft was under new leadership, and there was an urgent desire to make a splash. The lowest effort, highest impact way to deliver delight was determined to be an updated launch screen animation.

The initial request from the CEO and Head of Design was exactly that specific — something new, something Lyft-y.

The constraints, on the other hand, were strict:

1. The animation could be no longer than 1.5 seconds long, or else we'd risk delaying app start in some cases.
2. It needed to be built using Lottie, which lacks support for many key After Effects features across platforms.

The existing launch animation was well-implemented, but relatively utilitarian and lacked the signature Lyft wink.

Process

Brainstorming

I began by running a workshop to generate some ideas, which could then be presented to the Head of Design for a gut-check before moving forward. Crazy 8's is a favorite of mine for these situations — when working with the right crew (as I did here), ideas flow freely and without criticism, often surfacing incredibly inventive concepts.

Ideas were sorted into two buckets: Simple (relatively straightforward) or Fabulous! (more distinctly branded). We then selected a top 4 from our 24 concepts.

One concept was selected ("a ball revealing a logo in its wake") and I was off to the races.

Pivoting

Once the concept moved from sketch to animation, opinions were divided. A few of the stakeholders were fans, but the decision was ultimately made to move away from this direction and instead towards something entirely different.

Leadership suggested evoking the Map Pin that users drop to set a destination, and requested an illustration as well.

Rebuilding / Implementing

After landing on a final animation, I discovered some implementation details with large ramifications. On Android, we were using AndroidVectorDrawables (not Lottie) to display the animation.

Though Bodymovin exports to Lottie and AVD, the supported AE featureset is even smaller than that of Lottie, most notably not supporting mattes, only masks. Performance on iOS was also subpar, likely due to the existence of mattes, though masks would likely have the same issue. Unfortunately, the entire animation relied upon mattes.

The only way out was through: I rebuilt the final animation using opaque rectangles instead of masks or mattes. After working out further kinks with engineering, we could finally move onto experimentation.

‍

Outcome / Impact

Through A/B testing we discovered that this animation actually reduced perceived time-to-interaction in most cases by a statistically significant 0.72%, or 1.4s on average. It also would've been more effort to separate the code for launch screens on our Rider and Driver apps, so this animation was able to reach even more users than originally planned.

If I were doing this again, I'd save time up-front by ensuring which implementation we'd be using, since rebuilding took nearly a week.

Truth be told, I had no idea Lottie files had multiple ways of rendering within Android, so I'm now armed with that valuable knowledge. Most of the time, using the Lottie Android package will likely be the case, but we had to opt for AVD here due since performance was a priority (the app is doing a ton of other things while launching, and we can't risk making a bad first impression with a choppy animation).