AOL Trivia Quiz Animations
For AOL.com’s interactive trivia quiz, I designed a series of lively animations to celebrate each correct answer with a cheerful burger character. Starting as a single-patty burger, the character grows with each correct response, adding layers and joyfully jumping with excitement. For a perfect score of 10/10, users are rewarded with a towering 10-patty burger and a festive grand animation, visually marking their success in the quiz.
AOL Quiz Animations:
Build the Perfect Burger
Objective: Elevate AOL.com’s trivia quiz, “So How Much Do You Really Know About Grilling?” with engaging animations that celebrate correct answers, visually represent progress, and motivate users to achieve a perfect score.
Task: Design a series of celebratory burger animations that reflect quiz progress, integrating them seamlessly across devices.
Tools: Adobe After Effects, LottieFiles plugin, JSON
Design choice: The design prioritized interactivity and reward through playful burger character animations, featuring cheerful expressions, sparkles, and stacking patties to celebrate user progress. Using the LottieFiles plugin in After Effects, I exported animations as Lottie JSON files for web and mobile, ensuring lightweight, seamless playback on AOL’s platform and delivering an engaging experience.
Project Overview
For AOL.com’s quiz, “Quiz: So How Much Do You Really Know About Grilling?”, I designed animations that reward correct answers with a playful burger character. With each correct answer, the burger gains an extra patty, growing up to 10 patties for a perfect score. Each animation features a smiling burger that jumps with joy on a correct answer, surrounded by celebratory sparkles, adding fun visual feedback.
My Role
My Role
I created these animations in After Effects and exported them as Lottie JSON files, ideal for web and mobile use. This format ensured seamless integration on AOL.com’s quiz platform. I worked closely with developers to enable animations to play in sync with quiz responses, making the experience interactive and engaging.
Core Animation and Execution
Upon answering correctly, the burger jumps for joy, its eyes lighting up and a smile appearing, enhanced by sparkles around it.
Correct Answer Reaction
As scores increase, the burger visually grows with added patties, creating a seamless build-up of success.
Progressive Animations
If not all answers are correct, the animation reflects the user’s score, such as a 6-patty burger for 6 correct answers. Users can retake the quiz to improve their score and experience the full animation.
End of Quiz
Animation and Execution
1
4
10
Animations
Upon answering correctly, the burger jumps for joy, its eyes lighting up and a smile appearing, enhanced by sparkles around it.
Correct Answer Reaction
As scores increase, the burger visually grows with added patties, creating a seamless build-up of success.
Progressive Animations
If not all answers are correct, the animation reflects the user’s score, such as a 6-patty burger for 6 correct answers. Users can retake the quiz to improve their score and experience the full animation.
End of Quiz
1
Burger Score Representation
5-second animation, 60 fps, 282x320 resolution
Burger gains a patty with each correct answer, jumping and smiling in celebration
Final burger reflects the user’s score, featuring up to 10 patties for 10 correct answers.
Users can retake the quiz to improve their score and grow the burger further
Original designs were created in After Effects and exported as .json files for Lottie. Each animation has its own composition and is exported in both .json format for developers and MP4 format for the product manager.
