Logo of UI Challenges
Sign in

Gallery

See what others have created

Growth Perks Grid
S

sheeshable

@sheeshable

MediumProgression

Growth Perks Grid

Design the Growth Perks Grid for a game progression screen where players unlock small passive perks in any order. The grid should feel like a build planner, not a linear level-up track.

Each perk tile needs to communicate what it does, whether it is locked, available, or already active, and what it costs to unlock. Players should be able to scan the whole board and decide their next pickup fast.

Because perks can be taken in any order, the layout has to support comparison and planning. Group related perks visually without forcing a path, and make dependencies or prerequisites visible only where they exist.

This is a progression screen, so the player should always know their current resource total, what they can afford now, and what changes after a tap. The grid should make small gains feel worth chasing without turning into visual noise.

What to deliver

  • Design the full perk grid view with at least 9–12 perk tiles.
  • Show locked, available, purchased, and unaffordable tile states.
  • Include resource balance and spend preview in the header or footer.
  • Add a detail treatment for a selected perk without leaving the grid.
  • Show any prerequisite or dependency indicators directly on the relevant tiles.

Use a fixed tile structure: perk icon, short effect label, cost, and a tiny state marker. Keep the same placement in every tile so players can compare options without re-reading the layout.