top of page
lottie playbook.png

WORK PROJECT

Lottie Playbook

ROLE

Content research

front-end development

IOS, Android and Web programming

DURATION

2020.3 - 2020.5

2 months

TECHNOLOGY

Kotlin, Swift, JavaScript, React, Sketch

ACHIEVEMENT

Lottie Playbook now has over 200 unique users. 

Challenge

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON and renders them natively on mobile and the web. Intuit's designers have widely used it to create and ship beautiful animations. Yet, Lottie is a relatively new library. When designers hand Lottie animations in JSON format to developers, it will take a while for developers to figure out how to apply the animation in current products. Thus, to fix the knowledge gap, it is necessary for design technologists to create a tool to ease frictions and boost production efficiency. 

Process

After collecting all the code snippets, I used React.js to build the "Lottie Playbook," a playbook that includes code snippets about how to use Lottie animations in IOS, Android, and Web environments. Lottie Playbook successfully speeds up the design and launch process, and as a result, benefits our customers.

​

The current version of Lottie Playbooks includes the following code snippets for IOS, Android, and Web:

  1. how to get started with Lottie 

  2. basic animations, such as looping, playing animation by frame, time and markers 

  3. how to dynamically change content, such as changing color, text and images

  4. advanced animations, such as using motion as a transition and putting several motions in a carousel 

  5. related links and resources 

​

For each example, I include the following features: 

  1. example code

  2. corresponding After Effects files for users to download 

  3. animation preview 

Demo

Takeaways

Research

Throughout this project, I researched tons of code snippets, articles and tutorials to determine the necessary content for the workbook. In my later projects, this research skillset enables me to gather the right amount of valuable information in speed. 

Coding

In order to generate code snippets about how to use Lottie animation in mobile platforms, I self-taught Swift and Kotlin. Later on, I completed an IOS Udemy course with my team members. I also crafted my front-end development skill through this project.

Promotion

After completing the Lottie Playbook, I learned regular (and creative) ways to promote the playbook to its targeted audience. That includes posting on slack channels, giving presentations, discussing with motion designers and engineers, and a lot more.  

bottom of page