Diving into the redesign, there are a few major things I really like and are important to keep from the current design:
- The featured limited offer that is displayed at the top.
- The order of sections being displayed.
- The free potions at the bottom so the players will need to visit the store when they tap to get free potions, exposing them to the items available for purchase.
I did a basic wireframe sketch before going into making the mock-up (Image 1: Wireframe). I kept the bottom menu as it is as this is a top-level element, visible throughout the whole game, not only the store.
In the wireframe, I kept the limited feature deal on the top while adding additional spots for other deals. I originally thought about having it scroll horizontally while only showing one at a time. However, I discarded the idea because this game store doesn’t contain a large amount of items, so it would be nice to see them all when players get into the store.
I decided to use Adobe XD so I can test it while I was designing it. As I was designing the mock-up, I was always changing things around. With limited time, constant prototyping is important, testing out changes while actively designing them.
I wanted to find the font that is closest to the current game font, which I believe to be Futura Bold. Currently, most of the text is shown in all caps, with only a few minor exceptions.
To speed up the wireframe and mockup process, most of the images I used were screenshots taken and cropped from the game. For images that needed to be larger, I extended their background using Illustrator. Most of the smaller elements are built in Adobe XD.
The recommended changes in my mock-up are the following.