KitTea Cafe Animation
Rebrand KitTea Cafe through animations on Adobe After Effects.
March - May 2024 11 Weeks
Final Results
Final KitTea Website Animations
Final KitTea Cafe Instagram Reel Animation
Final KitTea Cafe Instagram Post Animation
Final KitTea Cafe Logo Animation
Project Summary
KitTea Cafe needs updated branding(website, social media, etc.) that draws in new users through empathy, cuteness, and surprise. The current website and branding are not reaching as many new people as intended.
Project Objective
Create social media posts and a website home page that uses animations made by Adobe After Effects.
Convey emotion and curiosity by using animation and micro-interactions.
Learn animating with Adobe After Effects.
The Challenge
KitTea Cafe needed brand elements that would differentiate it and draw attention. It must have social media posts and a website home page that further shows who it is to the audience. Also, it should use animation to create interactions that will make the user want to interact further.
Target Audience
Young adults, families, cat lovers, and people who want to adopt/interact with cats.
Research
KitTea Cafe has a lot of recurring customers who then bring in new people. The social media on Instagram are primarily showing the cats, but not the information people need to take action. It works to show the cats and the personalities of the cats, making people more inclined to go see/adopt them, but there also needs to be posts that show the location, where to adopt them, etc. The website for KitTea Cafe has a strong color palette and imagery, but it is also very straightforward, without any surprise: This may not make people feel the curiosity to continue to browse.
Findings
The target audiences are younger adults or people who love cats.
There are no animated micro-interactions until the very bottom of the website.
The website has a lot of illustrations that are not shown on social media.
One really helpful thing that I learned while animating was to “Pre-Compose” groups of animations. It helped to label everything and keep it organized. While animating, a lot of layers will be used, and it can be confusing.
Social Media Animations
After I completed the animation for the logo, I worked on the animations and promotional material for the two social media posts. I decided to create an Instagram Reel and an Instagram post. I took clips of the cats from the cafe that I took or from the KitTea Cafe's official Instagram. Social media is fast-paced, so my focus was to make the posts fast and speedy to grab people’s attention. I wanted to combine both real clips of the cats and illustrated cats to tie into the brand of the website. Here are some drafts of the social media that I created:
Draft for KitTea Cafe Instagram Reel.
Website Animation
The website animations were challenging due to the large amount of content I had to put inside. So, I first focused on creating a layout in Adobe Illustrator, making everything on a different layer and labeled.
Website layout on Adobe Illustrator and file layers.
Draft of the KitTea Cafe website.
of users would want to go to the KitTea Cafe after seeing the website and social media.
Draft for KitTea Cafe Instagram Post.
Micro-Interaction Button Animations
Before working on the website's animations, I began with the animations for the micro-interactions (buttons). I wanted the website buttons to have small animations that pop up, alluring users to continue looking for more pop-up animations. I planned to use cats for the pop-ups so that they would stay in line with the website's theme. I created the cats by drawing on Procreate.
Micro-interaction buttons for KitTea Cafe website.
95%
Once that was completed, I began animating in After Effects. Because of the large content amount, I worked in sections. For example, the header, main photo, first set of buttons, events, “Need to Know” section, and more. Breaking it apart like this helped me not get as confused and overwhelmed. I wanted the animation to show the different elements of the website one by one. In addition, I wanted to add a curser that would help guide the viewers’s eyes. After the first draft of the website, you can see below. I changed the layout so the margins would make more sense and the buttons look like they could be pressed.
Above are the buttons in the first draft, and below are the buttons in the final.
I created the website using a color palette based on the original website and the illustrations of the cats. I wanted the website to look soft and complementary in color. I also included the spray paint grainy look to show some depth and gradients on the website. I made this using Procreate. The focus of the website was to make the user want to continue to scroll and feel emotions due to the illustrations and animations.
User Feedback
To get user feedback, I sent the final animation video to people with minimal knowledge about KitTea Cafe to see what they thought. I gave the video to 11 people and called them on Zoom or phone. Together, we went through the website and social media animation. I had them stop and pause when they had any comments, and I would take notes.
User Information
The range of ages I asked was from 20 - 50 years old.
There was a mix of college students, people who worked, and people who were both full-time students and working.
80% of the users are interested in cats or are looking to adopt cats in the future.
User Feedback
“The buttons are very cute, and I really like the color palette on the website.”
“The website is really easy to understand and it flows nice.”
Did the animated elements and illustrations peak your curiosity and make you want to explore the website more?
User Results
90%
of users would continue to visit the website and show it to other people.
80%
of users felt the website piqued their curiosity and made them want to explore more.
Conclusion
This project really helped me see and learn another way of reaching people through design. It was interesting to see how animations, motion, and micro-interactions made people feel and interact compared to not having any motion design. I believe it was a valuable experience to learn how to animate with Adobe After Effects and work with it a lot.
Process
The beginning of the KitTea Cafe rebranding animation project involved learning how to use Adobe After Effects and the basics, like frame rates, easy-ease, anchor points, and more. I practiced using the software with help from YouTube and Skillshare. A skill like motion and how to apply that to convey what I need is a skill that I believe is important to learn as a designer. Motion graphics like micro-interactions make the material (website, social media, etc.) have character and stand out as a brand. Making sure that these interactions and animations reflect actual life helps users further understand the action. These interactions also help reassure the user that their movements, like hovering over something, are actually working.
Logo Animation
After getting more experience with the software, I started to work on the first animation, the animation of the KitTea Cafe logo. The first step was to bring the logo into Adobe Illustrator, turning everything into a vector, and separating each element into layers: For example, each letter, each circle, the head of the cat, and the body of the cat. Once that was completed, I brought it into Adobe After Effects and began animating. Below is the first draft of the logo animation:
This is one of the many drafts I did for the logo.