TuneIn’s Approach to The After Effects-Centered Prototyping Process

TuneIn’s product design team is a small organization consisting of one senior design director and three product designers, and it has its unique creative process for product development. We heavily integrate motion design into our workflow, and I have been supporting the team with building prototypes for user journey videos and user testing sessions. Recently, I found myself keep rebuilding assets and thought we need a formalized process within the team to increase productivity. Because the company is running a large research project, I felt it was a great opportunity to build a scalable system and test it along with the project.

YEAR
2019
ROLE
Lead Design, Documentation, Prototyping

The goals and challenges

Our team has two main goals. First, producing video prototypes based on our personas. Second, turning ideas from those video prototypes to user testing for validations.One challenge is to build a system that supports dramatical design changes. We are looking for ways to improve our products, meaning some designs might not last long as the research project goes. Also, we need a unified asset library that could convert the ideas from user journey videos to user testing session in the future. Most importantly, we need to find the right way of the developer handoff when we decide to build the real thing.

The solution I came up with is making an After Effects template and managing an appropriate folder structure around it.

The After Effects template

The Google Motion Design Team shared a inspiring article about building a sticker sheet for animating user interfaces in After Effects. I made a very similar but more optimized sticker sheet template to meet our needs. Most of our final outcomes are videos of a user’s day interacting with our app with different specific purposes. As an audio company, we often design with album artworks from a wide range of content. Libraries allow us to store collections of images with a standard size; therefore, replacing images requires just easy search and drag. Animated components like progress bars, live badge, and go live button, are linked to slider controls with expressions. Current view models created with Master Properties enable us to override texts. Flow is my favorite plugin for managing a set of easing curves shared across products.

Demo of resembling a home screen with the sticker sheet

A "Shared Assets" folder is in the top level of the master folder template, serving as a common library for both the Project folders of After Effects and Prototyping Tools. This way, we can reuse assets for future testing and ensure those assets are up to date. Also, all assets are in the same dimension, meaning we can replace it with correct ratios in any programs with new design changes.

Taking our research project as an example. We as a team mapped out user stories we want to address and decided design styles. Then I broke screens down into various components. Some components are better to be kept as a png since I can anticipate there will be layout changes based on ongoing content strategy discussions, while some are worth to rebuild in After Effects.
Once we completed user journey videos, we began to evaluate the interactions we would like to carry forward. As I mentioned before, we keep the same assets organized in the Shared Asset folder for user testing.

Maintain

Maintaining the After Effects Template is easy thanks to the Save Comps as Project plugin by Sébastien Perier, I can always export interactions I like and add it to the master After Effects file.

Handoff

Last but not least, we need to deliver the assets for our Clients' team for final production work. We discovered that there are two ways we all like. One is the animated diagram specs sheet, and the other is Lottie by Airbnb.The second method is very straight forward. I can just export from After Effects with Bodymovin, which is extremely useful for micro-interactions like button states transition.

However, there are lots of situations that require our engineers’ hard work to build complex interactions; that’s how the animated diagram specs sheets come in handy. I created a Sketch template that includes timeline and property components and connected these files to an After Effects template. When the sheet is ready, I can export it as a PNG to replace the image file in the After Effects folder. A video placeholder is included in the folder as well, which I can replace it with my final video.

Final thoughts

I believe that the definition of design system for every design team is different. It depends on what stage of the product you are working on at the moment or even the tools your team prefers to use. But the goals are very similar, to help the team move faster and collaborate better, I would expect that our approach will make impacts across the organization as we keep iterating on the process.

Thanks for watching

BACK TO HOME

© 2019 Hongwei Huang. All Rights Reserved.