advertisement
advertisement
advertisement

The Airbnb Tool That’s Changing UI Design

Uber, Google, Instacart, and others are all adopting Airbnb’s prototyping tool, Lottie.

The Airbnb Tool That’s Changing UI Design
[Image: courtesy Airbnb]

There’s a hot new design software being used today by major tech companies like Airbnb and Google to build new apps. But the tool, called Lottie, wasn’t born from your typical designer. Instead, it has its origins in a Madison Avenue creative.

advertisement

[Photo: courtesy Airbnb]
Salih Abdul-Karim spent a decade in New York City, creating commercials for clients like Nike and Sony, and networks like Comedy Central and HBO. Like many animators, he spent his days inside Adobe After Effects, building these visual spectacles a frame at a time. 

It wasn’t until he moved to the West Coast and took a job producing videos for Square that he realized the greater potential of his own talents. He was doing a typical compositing jobSquare would shoot a commercial featuring some small business owner tapping away at the Square app on an iPad, but because tablets look horrible when shot on video, it was Abdul-Karim’s responsibility to edit out the iPad screen and replace it with his own reconstruction of the Square interface–built from scratch inside After Effects. He would recreate the words, the buttons, and the animations, and then superimpose them over the real commercial footage, all to make the Square app look as good as possible on TV. And he did this again, and again, and again. 

[Image: courtesy Airbnb]
“I did so much fake UI that I ended up thinking, let me try reaching out to the product team to see if I can help prototype some of this stuff before we even make it,” says Abdul-Karim, who wanted to help build products rather than just advertise them. “I did a couple projects at Square. That’s what got me interested not just in using motion or animation to sell you something, and entertain you, but use motion and animation once you’re in the product, too.” 

In 2015, Abdul-Karim headed to Airbnb, where he ditched his old video team position to work on the UX team. To build new interfaces, he still worked in his beloved After Effects to prototype animations and transitions–which, while not unheard of, isn’t exactly standard practice in the industry, either. But often, those animations wouldn’t make their way into Airbnb’s own apps because, as is common in app development, it can take an engineer working for weeks to translate those pretty images into working code. Why did Hollywood’s favorite tool work so well for the big screen, and so bad for tiny ones?

Frustrated by the same design-to-development bottleneck experienced across the industry, Abdul-Karim began to think. If he could use After Effects to build an app interface simulation or prototype, why couldn’t he just use After Effects to just make the real app itself?

Now he can, thanks to Lottie–Airbnb’s own UX prototyping tool, developed by Abdul-Karim and a pair of engineers at the company.

advertisement

[Image: courtesy Airbnb]
In the six months since it debuted, this open-source software has been adopted into work flows at Google, Uber, the New York Times, and Instacart. And for good reason. Lottie lets you make an animation inside After Effects, and export it to an iOS or Android app as part of an app’s actual interface. “Whereas in a prototyping tool like Framer, Sketch, or Principle, you make something and an engineer needs to recreate it, with Lottie, what you make goes exactly into the product as it is,” says Abdul-Karim.

Technically speaking, Lottie just exports a fancy video to your touchscreen. But the brilliance is that such videos can be strung together in a series to make animated buttons, or looped on just part of the screen to create status bars. The videos can also be cued to play on-screen to respond to all sorts of gestures, including swipes, taps, and scrolls.

[Image: courtesy Airbnb]
Quickly, developers have learned that thanks to these gesture playback controls, they can actually use Lottie to simulate something as complicated as a social media feed. Pulling down is play. Pulling up is rewind. And the end user is no wiser that they’re essentially just scrubbing back and forth through a very clever YouTube clip. 

At Airbnb, not all app development is done through Lottie–and it’s considered an optional tool for designers. But Lottie’s influence is quickly seeping into the app through features you’ve either seen, or will see soon. Lottie is now powering many of Airbnb’s UI transitions. You’ll also see it in a future app update: When you book a stay in a new city, the confirmation page will play 1 of over 50 custom animations, highlighting cities’ most famous sites.

Airbnb also just used Lottie in a partnership with the Noun Project–the open-source icon catalog–to release a series of open-source, animated pictograms. They’re basically nice-looking buttons that any app developer is free to use.

[Image: courtesy Airbnb]
Of course, to the close observer, these uses of Lottie are still just videos. Because after all, playing videos is what Lottie was built to do. But now, the Lottie team is building more interactivity and dynamic graphics into the platform, which will allow it to grab elements on the page–like text and photos–and animate them as part of the effects.

advertisement

“We’re there,” says Abdul-Karim about deploying these new, more dynamic options. “The thing is we just got there. And whenever you just get somewhere, there’s still gonna be some massaging that needs to happen.” In other words, Lottie’s technical prowess is outpacing its user friendliness. And the Airbnb team needs to figure out how to translate complicated animation-meets-code capabilities into turnkey features inside the software.

As mature as UI and app development may seem today–there are literally millions of apps available for iOS and Android–projects like Lottie prove that it’s still early days for the entire industry. There’s no logical reason that an amazing animation built inside After Effects can’t be the foundation for the next hit app, save for one: Our digital tools were constructed for another era, one that is fading away to obsolescence even faster than your current smartphone.

About the author

Mark Wilson is a senior writer at Fast Company. He started Philanthroper.com, a simple way to give back every day.

More