BattlePass UI Design

 
 

Small wins, steady progress, and that sense of always moving forward — the core of any good reward system. It’s not always flashy, but it works. Keeps you dialed in, chasing the next unlock before you even realize it.


Focus

Interface Design, User Experience


Facilitator


 
 
 

Project challenge/ Problem

A Battlepass For Could Be Sci-Fi Title

In the ever-evolving world of gaming, battle passes have quickly become a staple for most live-service titles. They not only offer a unique way for players to stay engaged with a game’s content by providing rewards tied to a clear set of progression milestones, but also act as a means of monetization to help fund the games longevity.

Since this project was created for a fictional title, the challenge was to craft a battle pass experience that felt authentic and could seamlessly fit into a real game universe. To ground the direction, I focused on three core principles:

  • Visual storytelling through design. The UI should convey a sense of narrative and tone, even without knowing the game’s full lore or setting.

  • Clarity and efficiency. The interface must be intuitive, allowing players to understand their progress and rewards at a glance.

  • Platform flexibility. The design should feel native across multiple input types — from console and PC to mobile — with minimal changes.

 
 
 
 

REsearch / Highlights

Read the Room, Then Redesign It

To kick off the project, I immersed myself in a wide range of live-service games to understand how different studios approach battle pass and reward systems. Despite aesthetic differences, most shared a core structure — shaped as much by monetization models as by gameplay.

Common patterns included:

  • Daily and weekly challenges

  • Tiered or milestone-based reward systems

  • Point-based progression and unlocks

Instead of reinventing the formula, I leaned into what players already recognize and trust. Familiarity was key — not just for usability, but for setting expectations. That said, I still wanted the interface to feel fresh, immersive, and intentional.

I began by building a moodboard to establish the visual tone and direction. I pulled inspiration from sci-fi universes, anime, and retro-futurist films to create a sense of grounded futurism — a world where the tech feels worn, but still advanced. Think Neo-Tokyo meets Star Wars — where the interface could just as easily belong to a soldier in the field as to a hacker in a safehouse.

From there, I developed early wireframes to define the user flow — balancing visual storytelling with clarity and speed. The goal was to ensure players could easily track progress, engage with challenges, and navigate the system without second-guessing their next move.

 
 
 
 
 
 

Design And UX solutions

Building a System That Feels Used — and Lived In

My design approach was heavily influenced by a blend of anime-styled visuals layered over a futuristic, holographic interface. I kept returning to those fictional UI designs you see in Minority Report, early Gundam, and the gritty overlays in Ghost in the Shell — fast, functional, and just advanced enough to feel slightly unsafe.

I didn’t want the UI to feel like a slick layer over the gameplay. I wanted it to feel found — like a piece of gear you’d pull from a locker or stumble across in the field. That meant treating every element as if it had a job to do. Text was stripped of emotion — written like a system alert: factual, direct, and quietly urgent.

To deepen immersion, I layered in screen degradation and dithering — subtle imperfections that made the interface feel halfway broken, like it had survived a few too many deployments. This wasn’t just a menu. It was a terminal — still active, barely — delivering mission-critical info in real time.

 
 
 
 
 
 

Visual Hierarchy and color

Clarity Through Chaos

Even in a world that feels raw and frayed, the interface needed to stay clear and readable. I kept the color system tight and purposeful:

  • White for primary text and structure

  • Lime green to indicate active states or selections

  • Amber orange to highlight attention-critical information

This palette wasn’t just for flair — it reflects real-world terminal displays, reinforcing the retro-futurist tone while keeping the hierarchy crisp.

UI elements were built as modular blocks, styled like alert boxes or info panels. Their layout followed classic UX principles — top-down, left-right flow, with consistent headers and section cues that always gave players their bearings. Interactive elements included focus states, hover highlights, and optional expanded panels for detailed views without adding clutter.

The battle pass was structured around two screens, each reflecting a different player mindset:

Credits & Unlocks"Reward Browsing Mode"
This screen lets players scroll through unlockable items, check their level requirements, and see how much in-game currency (credits) each costs. Whether earned through gameplay or purchased, credits feel valuable — and each unlock is treated like a milestone. Players can preview items if certain conditions are met, creating a satisfying sense of checkpoints and progression that emphasizes accomplishment over simple accumulation.

Challenges & Progression"Objective Mode"
This is where players focus on what’s next. Daily, weekly, and monthly tasks offer short- and long-term engagement goals. Each challenge type (e.g., bot scans, knife kills, headshots) is paired with an icon and progress tracker. Key data is immediately accessible, with the option to dig deeper into requirements when needed. The layout gives players direction — and more importantly, motivation.

 
 
 
 

Takeaways

A System That Wants to Be Played

Every design decision — from color and layout to typography and text tone — served one goal: to make this UI feel like a piece of the game’s world. A little worn. A little unstable. But fully functional — exactly what a player would expect to find before heading into the action.

This project challenged me to think critically about more than just aesthetics. As I dug deeper into how battle passes operate — not just visually but strategically — I began to understand how much of their success depends on psychology, economy, and rhythm. The real challenge wasn’t just making things look good — it was designing systems that guide players effortlessly, without confusion or fatigue.

Ultimately, I learned that effective UX for systems like these isn’t just about usability — it’s about building momentum. Good design creates flow. It reinforces habit and is able to pull players back in not through pressure, but through clarity, structure, and trust in the experience.