Badge
System Redesign

senior product designer

Designing a scalable progression
and recognition system

My role

Badge experience evaluation
Hierarchy, states & progression logic
Scalable visual & interaction patterns
System guidelines for expansion

About the project

The badge system was introduced to recognize user achievement, but over time it became visually inconsistent, difficult to understand, and disconnected from meaningful progression.

I was brought in to evaluate the badge experience end-to-end and redesign it as a cohesive system that improved visibility, hierarchy, and perceived value.

The outcome was a scalable recognition system that reinforced achievement and long-term engagement across products and surfaces.

The Problem

Users frequently earned badges without noticing them or understanding their significance. Even when discovered, badges lacked clear meaning, hierarchy, or progression value.

Low visibility of earned achievements
No clear differentiation between rarity, progress, or importance
Inconsistent visual language and placement across surfaces
Badges felt decorative rather than motivating

As a result, the system failed to reinforce achievement or long-term engagement.

Research & Insights

To ground decisions in real user behavior and system constraints, I reviewed existing badge usage and discovery patterns, cross-surface inconsistencies, gamification patterns from comparable systems, and internal feedback.

Rather than over-documenting theory, the focus was on identifying friction points that weakened motivation and clarity.

Key Findings

Users often missed earned badges entirely
Lack of hierarchy made all badges feel equally unimportant
Progress toward future achievements was unclear

System Issues

Inconsistent placement reduced recognition
No visual distinction for rarity
Missing progression indicators

Key Design Decisions

1 Badges as Progression, Not Decoration

Instead of treating badges as static collectibles, I reframed them as part of a progression system—communicating what was earned, why it mattered, and what could be earned next.

2 Visual Hierarchy & States

I introduced a clear hierarchy to distinguish earned vs. locked badges, rarity and status, and progress toward completion.

Color, contrast, shape, and subtle motion were used intentionally to reinforce meaning without adding visual noise.

3 Standardized Placement & Behavior

Badge placement and interaction behavior were standardized across experiences to reduce friction and improve discoverability.

This consistency helped users recognize achievements instantly, regardless of surface.

4 Designed for Scalability

The system was designed to support new badge types without redesign, accessibility and localization needs, and future gamification layers.

Every decision favored long-term maintainability over one-off visual treatments.

Outcomes

Improved discovery and understanding of earned achievements
Stronger sense of progression and motivation
Reduced visual fragmentation across platforms
A reusable system that scaled beyond the initial release

Reflections

This project reinforced the importance of treating gamification elements as systems rather than isolated UI components. Clear hierarchy, consistency, and scalability were essential to making recognition feel meaningful instead of superficial.

It highlighted how small structural UX decisions can have an outsized impact on motivation and engagement.

BadgeSystem Redesign