Common Onboarding/ 2024

After Effects, Figma, Lottie, BodyMovin

Creative Director: Dillon Chen (CEO)
Art Director: Danqi Qian
Visual Designer: Danqi Qian
Motion Designer: Danqi Qian

Common is designing onboarding pages to highlight key product features from the start — helping new users quickly understand what we offer and why it matters.

OBJECTIVE

Create on-brand visuals that are fun and playful, while clearly introducing key features — Launchpad, Memecoin, and Voting — with a focus on clarity, visual cleanliness, and strong visual impact

As the designer, I started with sharing two visual concepts.

OPTION 1

The 1st option is to use colorful blurs from the brand language, layered with UX elements and weighted text for hierarchy.

OPTION 2

Option 2 features brand illustrations paired with bold, dynamic layouts. The goal is to create a cool, eye-catching visual experience.

FEEDBACK

After team review, we decided to combine the two directions — welcoming new users with playful brand shapes while gradually revealing key product features. We also want to incorporate image elements into the meme feature, capturing shared moments that feel familiar to both us and our users.

FINAL DESIGN

I presented the final design along with a storyboard outlining the animation flow.

FINAL ANIMATION

Here’s the final animation, delivered as Lottie JSON files.
One of the main challenges was working with gradients in Lottie — we ultimately used embedded image assets to achieve the desired look.