Logo of UI Challenges
Sign in
Wireframe example for Battle Achievement Progress Bars
An example interpretation of the prompt
Icon of target

Battle Achievement Progress Bars

Icon of book open

Design the battle achievement progress area for a game HUD or post-fight screen. It tracks fight-specific challenges like headshots, combo chains, or objective streaks with small progress bars, not a full achievement menu.

The bars need to work while the player is still in the match: compact, readable, and quick to parse between combat moments. Treat them like live status chips for challenge progress, not a settings panel.

Each challenge should show what it is, how far along it is, and what remains to finish it. The visual treatment should make partial progress feel active, with clear thresholds for done, nearly done, and far from complete.

Keep the layout game-native: stacked, HUD-friendly, and easy to scan under pressure. The interesting part is balancing detail with speed so players can notice a challenge advancing without losing focus on the fight.

Icon of book open

Use one bar style for all challenges, but vary the fill color or end marker for near-complete states so players can spot a nearly-finished objective instantly.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.