Props Store UI Design

Description

In the props store, players can use the gold coins picked up in the game to buy props, and the props will take effect in the next round of the game. Players can enter the store from the upper right corner of the game homepage. The design goal is to improve the user experience of purchasing props.

Design Components

• Background Image: A prop shelf
• Title: "Props Store"
• Props: In Sprint 3, we have "food" & "Health" in Props Store. We added "water" in sprint 4.
• Tags: Show the price of items
• Confirmation Message：Double confirmation when purchasing

Prop Shelf

In UI design, we use a shelf as the background image of the prop store to make it easier for users to understand that the page is for purchasing props.

• Design style

• Feature description

When users clicks the Props Store icon on the Main Menu, they can enter the props store page.

Confirmation Message

Users can only succeed in purchasing items when they have enough gold coins.

• Design style

• Feature description

When the user clicks the button to purchase, the pop-up window will remind them whether they can successfully purchase according to the number of gold coins they have.

Prototypes

Design Tool: Sketch

Sprint 4 Background Optimization

1. Design style 2.0

The game adopts pixel style. In order to ensure the consistency of game style, we updated the background of props store during sprint 4. The new design follows the design specifications of the game and uses the pixel style. In addition, we have added more shopping elements to enrich the content of the interface. The purpose of the update is to ensure consistency and increase the interest of the game from the design.

2. Material Collection

The new design needs to conform to the characteristics of props store and use pixel style. Therefore, we refer to a large number of pixel style illustrations and integrate these elements into the background of the new props store. Reference: https://www.aigei.com/s?q=%E5%83%8F%E7%B4%A0%E9%A3%8E%E6%A0%BC&type=game

3. New Design

Design Tool: Adobe illustrator

• New Background

In Sprint 4, there are more than three props in the store, if the player has enough gold coins, he can buy the prop.

• Food: Restore hunger value, worth $2
• Water: Restore thirsty value, worth $2
• Heart: Restore Health value, worth $5