The process of designing a in-game shop screen in a game for mobile and tablet.

PROJECT: Mobile/tablet game
ROLE: UX Design - Wireframes / Prototype / Usability Test
DATE: 2015

Design a wireframe for a section within the game called “Shop". This is where you buy upgrades and items for characters/cars/spaceships (whatever you’ve chosen as your theme). You can also buy consumables and premium currency. Be efficient with the use of space and focus on the user experience. If you split it into separate screens, tabs or pop­ups, think about how to make the navigation within the shop as simple and streamlined as possible.

User Flow

03 Shop Screen Flowchart


The shop offering should include:
●  Cosmetic and/or functional upgrades (e.g. weapons, outfits etc)
●  Consumables (e.g. boosters, potions etc)
●  Premium currency
The design should also offer up information about:
●  The amount of in game currency you have
●  The amount of premium currency you have
●  Special offer items / Item bundles
●  New items
●  The product description/stats
●  Where applicable, a way to reference/compare the item on sale to what you currently have equipped

Should show navigation for:
●  Back to main menu
●  Into the main game

02 wireframe-details

Prototype & Usability Test

No special visual details or treatments needed plus in some cases we use specific images based on a GDD for specific tasks were tested, how to buy a specific item for a specific mission. Despite the script of questions, the idea was to let the free player for your choices testing the prototype (even being a low-fidelity prot.), so we could be more effective in the test with the ways that users interact.
This prototype was created for an usability test purpose for the Shop section. Aspects of the design we would like to test using the prototype were:
● information Architecture
● buying in game currency
● buying a particular item of your choice
● determine issues and difficulties
● Does the user understand how shop menu works?

Thank you!