A mobile game shop design

A phone seen from the top held by 2 hands horizontally with a game open
Photo by RODNAE Productions from Pexels

Have you ever looked into how many different ways to present a shop there are on a mobile game? I did!

I wanted to run an analysis and come with learnings onto what I would consider a good design. This analyis is split in 3 areas:

  • Research: References and Competitors
    • Research Summary
    • Learnings
    • Features chosen
  • Design
    • Wireframing and flows
  • Closing thoughts

Research: References and competitors

Games analysed. Mid-core:

  • Marvel Strike Force
  • Star Wars Galaxy of Heroes
  • Raids
  • Brawl Stars

✅Things to replicate

ROTATIVE

Content refresh rate makes players feel like there might always be something they might want if they check once or twice every day.

VALUE TO PLAYER

Is highlighted and helps guiding decisions among several seemingly identical items.

❌ Things to avoid

No offers after the end of the FTUE! 😰 This is a huge missed opportunity to convert non payers!

📝 Learnings

PROGRESSION VALUE FIRST.

Content must clearly relate to player progression first and elevate the value of in-game currency.
Represented by: highlighting the value of currency to progress in the game.

LET THEM SEE IT (MAYBE EVEN PLAY WITH IT).

Make it easy for players to get details and engage with the content. Cosmetic value can be more convincing when players are able to experience it.
Represented by: Buttons leading to details, try things or play with content before buying.

LET THEM BUY EARLY.

Do not hope they’ll end the entire FTUE to be able to buy.
Represented by: The shop should always be unlock after the core loops has been taught to the player.

LET THEM RUN – FOR A PRICE.

Allow for faster progression for a median affordable prize.
Represented by: Displaying progression items that can be bought.

HIGHLIGHT VALUE IN HIGHER PRICED SIMILAR PACKS.

Make it very easy for players to understand why they should buy. How are you helping them?
Represented by: A clear comparison visually.

ROTATE THE CONTENT DAILY.

This helps AB testing and get learnings on performance quickly and players will frequently come back to check.
Represented by: Countdowns.

ADD FREE CONTENT.

Make sure to add something free that your players want to make them enter into the Shop funnel.
Represented by: Free items.

THINK ON YOUR COMMUNITY.

Seek for opportunities to engage with content creators and followers.
Represented by: Content creator section for them to log in and unlock specific content to engage with audiences and viralise your game.

Features chosen

There’s several ways that we could design a shop. It’ll all depend on the design principles the team set as guidance, the audience needs and the type of game.
Just because I feel this is very valuable to me as a player, I’d go for an option where progression value is prime, so content must clearly relate to player progression first and elevate the value of in-game currency.

The rest of aspects should be reflected in any version of the shop as they all contribute to a better player experience.

Design phase

This is where I would sync with the team and do my secret moves and techniques 😛

Working by self I can show you the following.

Layout and flow

Snapshot of a visual board with all the different layouts compared
Visual flow comparison of the games chosen

Brawl Stars shop had the simplest and most efficient layout. Everything is in one place, there’s not huge amounts of content, which allows for focus.

Tabs are merely referencial and out of the vision focus which, in addition to the horizontal skewed shapes, guide the eye nicely to continue scrolling to reach the end of the store. Not leaving things unseen!

Extra info is one tap away. Art doesn’t overwhelm the design but rather supports it and elevates the content.

Bringing that and adding the previous elements this is what I got:

  • Currency contributing to progression first
  • Time-based offers second
  • Then other currencies more associated with vanity items
  • A time limited vanity item
  • A section for content creators to log in
Gif scrolling right on the design

Closing thoughts

Less is more

Having a limited and refined selection of offers of different content feels more immediate and accessible than distributing too many in other tabs. Keeping it all in the same place without overwhelming, makes sure the most players enter in one single funnel.

Test and test and retest

I would test with players first with just wireframes in simple task tests and detail more interactions such as: getting details or buying and item. Then would follow with high definition protos in collab with UI. 

When implemented, I would recommend openning conversations again with the team on AB tests to pursue, refine and decide on a final version of the shop.