Turning a College Exam Promotion into an Engaging H5 Experience with Fun “Exam God” Animations

Creative Background

June 17th is the national college English CET‑4/6 exam day, providing a perfect moment to promote Hujiang’s "Happy Word Field" vocabulary product. Starting in mid‑May, the team collaborated with operations to plan an H5 promotion, completing concept, design, and launch within three weeks.

Creative Planning

The idea leveraged the common pre‑exam ritual of praying for good luck. Users would “draw lots” to take a vocabulary test, then receive a predicted CET score, encouraging them to study with the app or share the result.

To keep the test tolerable, the interaction mock‑up filled the screens with many emoji stickers, adding fun to an otherwise serious test.

Design Phase – Defining the “Exam God” Image

The “Exam God” needed both a scholarly aura and a divine vibe. A graduation cap and doctoral hat suggested academic achievement, while a long beard, sideburns, and a prosperous elder’s look conveyed the deity aspect.

The visual style balanced recognizability with a mischievous, slightly “cheeky” tone that fits the app’s educational purpose without being overly exaggerated.

Key drawing guidelines included varying line thickness (thicker outer lines, finer detail lines), balanced black‑white contrast, and a three‑tone shading approach (highlight‑base‑shadow) to give the character depth.

Designing the “Exam God” Expressions

Research showed that a single emoji often fails to convey nuanced emotions. By combining basic emotions (joy, anger, sadness, fear, disgust, contempt) and their hybrids, the team created nine distinct expressions for the character, focusing on eyebrows, mouth, and nasolabial folds to signal “cheeky” feelings.

Examples include a smiling face with narrowed eyes to suggest a forced grin, and a blended “joy‑plus‑sad” expression to depict a bitter laugh.

Animating the H5

Dynamic effects were achieved using GIF key‑frame animation. By drawing the start and end states of each expression and inserting one or two intermediate frames, smooth short animations were produced.

Physical principles such as acceleration and deceleration were applied to make motion feel natural, and occasional frame‑holds emphasized critical emotional moments.

Design Summary

The H5 ran for a week, showing smooth test flow, high completion and retest rates, and higher‑than‑expected secondary sharing. Lessons learned include clarifying campaign goals early, using music to enhance fun, and investing more in storytelling to improve shareability.

Overall, this was the team’s first foray into H5 design, highlighting the importance of clear positioning, engaging visuals, and efficient animation techniques.