Shop Redesign Example

I think we’re all pretty aware of how hard the shop is to use (deals scattered throughout various tabs, so much scrolling, etc.). I’ve designed a new shop menu as an example of what a good design for the shop could look like:

1st tab (Daily Deals) (next three tabs would look similar to this):


Last tab (Premium Purchases):


Note: I’m writing my description as if crowns were eliminated and their function split between gems and real money, which I believe would be very beneficial to the game. If this didn’t happen, however, the only changes to my redesign would be that the Currency Conversion tab would have a section for real life money to crowns, like the currency section in the shop does currently, and that the Premium Purchases tab would also include crown deals.

Changes:

Made shop into a floating box that opens on whatever screen the player is currently on instead of its own tab (opens when shop icon in top nav is selected)

  • This makes it easier to access the shop from anywhere.

Got rid of the tiles and made them into tabs instead

  • Navigation to different sections of the shop is now done through tabs. There are 5 different tabs, all with alliterative names (since I liked that pattern in Daily Deals and decided to continue it) and an icon, providing two methods of telling the player what the tab is (text and a visual) which allows them to tell what tab is what at a glance.
    • Note that the icons would be in the white and blue style of the round, floating tabs that exist in the Tavern. My photoshop skills just weren’t quite good enough to get that with the images I had.
    • Also note that there are currently no deals that only refresh every month, or I would have included another tab labeled ‘Monthly Market’
  • Daily Deals contains the deals that change each day. Weekly Wares contains the deals that change each week. Redeem Rewards contains the rewards that marks and honor can be exchanged for. Currency Conversion contains the purchases that allow the player to change crowns to gems and gems to gold. Premium Purchases contain purchases for crowns, the VIP purchase, the Seasonal Pass Purchase, the offers (possible redundant, but it might be nice for players to look at them in a bigger format), and whatever other purchases require gems or real money (this gives players an easy place to go with all the possible purchases right there when they’re in the mood

Made shop into sections with headers, with everything on one screen (no scrolling!)

  • tab content:
    • The Daily Deals tab has:
      • Random Daily Deals, which contain the random purchases that refresh each day (which are currently called ‘Daily Deals’). It has a refresh button in the left of its header that refreshes this section of the shop.
      • Monday Deals (where Monday is replaced by what day of the week it currently is), which contains the deals specific to that day of the week
      • Reoccuring Daily Deals, which contains the daily deals that around permanently and refresh their stock each day
      • Note that it might possibly be better to swap Reoccuring Daily Deals and Random Daily Deals, so it’s clearer that the refresh button just refreshes the Random Daily Deals and not the entire shop
    • The Weekly Wares tab doesn’t have any random daily deals or day-specific deals that need headers, as all weekly deals are recurring deals. Therefore, this tab is divided by type of purchase instead. It has:
      • ? (not sure exactly what to call this)
        • This contains gear, spells, and minions
      • Shards
        • This contains weapon, spell, and minion shards
      • Evolution
        • This contains relics, runes, scrolls, and glyphs
      • Followers
        • This contains follower bundles with food and ore and follower crystals
      • Other
        • This contains anything not covered above, such as tickets

OR

  • ? (not sure exactly what to call this)
    • This contains gear, spells, and minions
  • Upgrade Materials
    • This contains weapon, spell, and minion shards, food, and ore.
  • Evolution Materials
    • This contains relics, runes, glyphs, scrolls, and follower crystals.
  • Other
    • This contains anything not covered above, such as tickets.

Note that keys only refresh daily currently, or they would get their own category as well.

  • The Redeem Rewards tab has:

    • Honor, which contains all of the deal that players can buy using honor
    • Marks, which contains all of the deals that players can buy using marks
  • The Currency Conversion tab has:

    • Gems, which contains all the deals where players can buy gems for real life money
    • Gold, which contains all of the deals where players can exchange gems for gold
  • The Premium Purchases tab has nav tiles similar to what the shop has now (it’s the only tab that still will) on its upper half. The lower half has Premium Purchases, in a format similar to the other tabs (Note: If there are too many purchases for this format, this can be made into nav tiles too, with a different tile for each type of item (Shards, Evolution Materials, etc.)) All premium purchases, such as VIP, Season Pass, Quest Pass upgrades, and any gem deals that exist go here.

  • This prevents all of the scrolling and going back and forth between menus that players have to do right now. It also shows clearly what deals are happening when.

Shrunk tiles with purchases, and redesigned them some

  • Made text and image larger (removing the blank space on the tiles to do so)
  • Moved stock info to top right of tiles. Got rid of time remaining (the category of deal already says how long the deal is on for, and there’s also the tab itself displays the time remaining) and moved the number of items that purchase give to where it used to be in the top left.
  • Added icon for the set that the relics evolve to those relics

Redesigned remaining navigation tiles

  • Shrunk VIP Pass by getting rid of all the extra blank space.
  • Created Offers nav tile with image of the offers merchant that leads to a screen that shows all currently available offers.
  • Shrunk Upgrade Quest Pass and changed it to have just the icons that represent the three types of quest pass, instead of a random guy.
  • Created a Season Pass nav tile with an image of gold and platinum passes on it that leads to the screen with the two types of passes.
1 Like

Some good ideas in the whole post but I play this game on a 6.1" smartphone screen and as much as no scrolling is nice I already have to bring the phone closer to my face and on occasion even squint at some things to read them. So, no scrolling is great but the text needs to be a decent size. So if scrolling is necessary for accessibility, it needs to be there.

(And also not just a ton of icons with no text so you don’t have to scroll. That’s the worst possible decision)

If you click on the images themselves to open them to full size, you can see the text is a pretty big size in them.

And I agree. I would rather it require scrolling than have icons with no text!