My responsibilities as a Production & Motion Designer were-

• Working with product owners and managers in an agile environment

• Work closely with developers to implement the app designs.

• Enhancing user experience by adding motion graphics to interactions.

• Conduct thorough UX reviews on product periodically to ensure quality and functionality

Treehouse Home

Design and Vision

A particularly unique feature was the seamless environment experience which had hidden easter eggs that the kids were delighted to discover and interact with. For example, tapping on the blue jay made him sing, tapping on the mushrooms produced musical notes, tapping on the passing turtle made him recoil into his shell.

The wireframes (by Jessica Lo) and designs (by Matt Emond) proposed rich graphics and engaging animations to capture and keep the kid’s attention.

Approach

The UI production files would have to be simple yet fit within the You.i Engine framework, while still maintaining performance. This was achieved by splitting the feature across multiple AE files and working with the developers to connect them in code at run time.

Execution

I split all the entities like grass, clouds, hills, buttons on screen in their own containers and arranged them to give it a parallax effect, which you can see in the video below.

Since the characters on screen were going to be replaced by the kids shows, I made as interactive dynamic buttons inside a scrolling list. To add interactivity, I have a press animation on each button if you notice it in the timeline of the 2nd image.

Challenge and Solution

The performance was still affected by the easter eggs animations throughout the scene. I discovered that the memory footprint was directly related to the size of animation sequences. I optimized these images to find immediate improvement in the app’s performance.

Completed Feature

Here is a screen recording of the feature during runtime in the in-market app.

Download to go

This feature was added so parents/kids could download their favourite episodes and watch it on the go.

Design

For appeal to kids, this feature was designed (by Jessica Lo and Matt Emond) to mimic a backpack which stores all the episodes that you download. The Zipper on the backpack was interactive, which opened on slide/swipe and then switched to the next screen which looked like the inside of a backpack. Selecting any one of these assets brings you to the download to go player.
You can drag and drop items in backpack, which gave you a feedback of the flying dragonfly across screen leaving a trail of stars.

Execution

While implementing this feature, I realized user was unaware on the interactive zipper on this page. Hence, I added a jiggle animation on the zipper handle, to draw their attention and nudge them in the right direction.

Inside the download to go player, the item added in the backpack was expected to disappear from the list. While implementing, I realized that kind of list behavior was not ideally supported by the Engine, and would require significant time and developer effort. In light of the tight deadline and limited resources, I proposed a visual distinction of making the downloaded item non interactive, which worked out well, while saving us valuable time and effort.