Designing a Ceremony‑Driven Honor System: Medals, Visuals, and Animation Pipelines

This article details a comprehensive case study of an honor‑system design project launched in August, explaining how virtual medals are defined, categorized, and visually expressed through ceremony‑focused UI, environment design, and a unified animation workflow using Lottie and AE.

58UXD
58UXD
58UXD
Designing a Ceremony‑Driven Honor System: Medals, Visuals, and Animation Pipelines

Project Overview

In August we launched an honor‑system design project aimed at motivating employees through virtual medals that enhance professional achievement and a sense of recognition.

What Is a Medal?

Medals are honor symbols traditionally awarded for merit, originating from ancient European knighthood. They serve as emotional rewards, satisfying higher‑order needs such as respect, recognition, and belonging.

Real‑World Analogues

Examples include kindergarten red flowers, athlete medals, military ribbons, Oscars, and other trophies—each reinforcing an honor system. In digital products, similar “medals” or “red flowers” are used to boost user engagement.

Design Theme: Ritual Sense

Using Maslow’s hierarchy, the system targets esteem needs: honor, respect, and recognition. The design theme emphasizes “ritual sense” to convey these emotions through visual and interactive cues.

Medal Classification

Award‑type medals focus on formal recognition, featuring solemn colors (gold, silver, black, red) and trophy‑like visuals.

Label‑type medals highlight corporate culture, growth, and accumulation, using vibrant colors, simple graphics, and three‑dimensional textures.

Ceremony Design

Subject Design : The core medals were broken down into key attributes and grouped into the two categories above.

Environment Design : Inspired by award ceremonies, religious rites, and cinematic scenes, the visual backdrop includes dark textured backgrounds, top lighting reminiscent of stage or cathedral illumination, and upward‑moving particles to convey positivity.

Behavior Design : Dynamic effects were added to both medals and environment to create a time‑based experience, ensuring a surprising reveal when users interact with a medal.

Implementation Pipeline

To handle the large volume of medals, a design specification covering graphics, color, texture, and structure was created, establishing consistent standards.

A motion library was built by dissecting basic animations and exporting them as Lottie JSON files via After Effects. This library guarantees uniform rhythm while allowing designers to customize individual medals efficiently.

Animation formats were evaluated (PNG sequence, SVGA, Lottie); AE+Lottie was chosen for its balance of visual fidelity and low development overhead.

Production and Scaling

The unified motion library enabled rapid, consistent production of both medal visuals and environmental effects, reducing effort while maintaining high quality.

Conclusion

The project demonstrates that a strong sense of ceremony requires holistic design across subject, environment, and behavior, supported by clear standards and an efficient animation workflow.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

animationProduct DesignDesignUXhonor systemmedals
58UXD
Written by

58UXD

58.com User Experience Design Center

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.