ByteDance - Interactive Motion
This is a series of interactive motion design for information and social media platform APPs during internship. The design was to enrich the form of "conversation" between users and content, users and other users, creating emotional resonance between the product and users.
ROLE
Motion Designer
Interactive Prototyper
SKILLS
AE
Javascript
Origami
TYPE
Group
DATE
Jan - June, 2021

1/4 Interactive Stickers in Video Player

The essence of interactions within video player in XIGUA APP, which is an online video sharing and social media platform, is the  "conversation" between users and video content, users and authors, users and users.

This design is to enable users to use popular expressions in time-sync comment  ( or bullet chat )  in a quicker and easier way, resulting in an increase of the bullet screen function usage rates by 200% .

2/4 “Please update” function Animation

“Please Update” function is based on users’ behaviour of urging authors to update / create more contents in the information APP TouTiao.  Different interaction forms may trigger users’ different emotions. This experimental motion design explored new forms of interaction to

- augment the emotional expression of interests and encouragement to the author
- close the distance between followers and authors
- arouse users' interest in exploring new product’s features

This is an interactive prototype.
👉 Continuously fast click the button 👈

3/4 Like Button Animation

How to create emotional resonance with users through interaction?
This motion experiments explored creative ways of expressing liking and agreement toward the content by interactive animation.

This is an interactive prototype.
👉 Try to continuously click the “like” button! 👈
Solution 1 - Bubble Shooting
Solution 2 - Particle System

4/4 Motion Background for FanQie APP

This background motion is designed for FanQie APP, an audio APP, to create an immersive visual effect. The background motion is generated from the cover image.

Using webGL/shader, we delivered a web-based prototype that allows team of designers, products and developers to experience, and created reusable tool for better collaboration between designer and developer.

This is an interactive prototype.
👉 Click the cover image 👈
to generate background with different images!

discover more projects