Go Back

Animated Assets for Thepeer's New Website

Client
Thepeer
Project Type
Interaction Design
Duration
1 month
Year
2023

Overview

I had the responsibility of contributing to my company's freshly created website earlier this year. Before carrying on, please take a look at the finished website and animation— and I'll be breaking down everything about my specific role in it.
As a company, our primary objective was to align our website with the recent rebranding efforts we underwent and elevate the presentation of our product offerings . We recognize the importance of creating a compelling narrative that prominently showcases our products and their specific features and while we have made satisfactory progress in describing each aspect independently, we acknowledge the need to bring them together more effectively.

My Role

My focus was on the animation and motion parts. I collaborated closely with three other designers, to make sure our vision was aligned. Once we all signed-off on the animations, I then worked closely with the developers, to make sure that the export process from After Effects to Lottie, GIF, MP4 or WEBP (whichever format was required) was seamless.

Scope & Goal(s)

For this project, my motion design objectives were simple and precise:

- Describe each feature's capabilities to users.

- Raise our audience's delight a teeny bit.

Despite the seeming simplicity of both, they actually require a certain amount of balance to be successful.

Setting the Stage

My Workflow

- The original designs were mostly done in Figma (except for the icons, they were mostly done in Adobe Illustrator).

- I exported elements that relied heavily on photography (or were static) as PNG files.

- Everything else (like vectors) were shipped to After Effects via AEUX.

- I created each animation in its own comp, and exported as mp4’s and shared with relevant teammates via Slack.

- Once animations are finalized, I would export as Lottie (or whatever file format was needed), and would begin the debugging process.

No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.

Key Learnings

I had a couple takeaways from this project and they were:
This project took many turns at the start because many things that you would assume would "simply work" required extensive debugging. Lottie has a few drawbacks and this project actually pushed me to begin learning about Rive. For more information on some of the drawbacks of utilizing Lottie, see this article.

Big shoutouts to:

- Benjamin Osemwingie (Product Designer)
- Chuxduru (illustrator & icon creator)
- Israel Sanmi (Brand & Comms Designer)
- Oleka Kamsi (Developer)
- Victor Adedapo (Developer)

Next Project

Widgets for E-commerce

Good stuff incoming!