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 my main focus not just for usability, but to help set 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”. I wanted a world where the tech feels worn, but still advanced. Think Neo-Tokyo meets Star Wars. My thinking was 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.

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, and should be factual, direct, and quietly urgent.

To deepen immersion, I layered in screen degradation and dithering. They were subtle imperfections that made the interface feel halfway broken, like it had survived a few too many deployments. This wasn’t a menu. It felt like a terminal still running, barely holding on, pushing 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
  

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 tone, served one goal. Make the UI feel like it belongs in the world. A little worn. A little unstable. But fully functional. Exactly what a player expects before heading into the action.

This project pushed me beyond aesthetics. As I dug into how battle passes actually work, I started to see the system behind them. Psychology. Economy. Rhythm. The real challenge wasn’t making it look good. It was designing something that guides players effortlessly, without confusion or fatigue.

Ultimately, I learned that UX for systems like this goes beyond usability. It’s about building momentum. Good design creates flow, reinforces habit, and brings players back through clarity, structure, and trust in the experience.