Description

At this stage, we decided to build the safe house as a shop where the player could use their coins to buy some weapons or other items. Therefore, we used the iterative design method for the shop interface design. We wish to implement an NPC in the shop and integrate the game story.

Original Design - Side-view

The original design was created as a side-view design since we want to display items in the safehouse. The colour scheme was designed to be brown because we wanted it to match the game theme of darkness.

Inspirations

Sketching

At the very first stage, the sketching of the shop was generated as below, which was inspired by a Shop Interior.

Low-fidelity

Then, we create some low-fidelity prototypes within the brown colour scheme, and we get some user testing for the early-stage design. The feedback was mostly positive, and users said they liked the colour scheme.

High-fidelity

Based on the low-fidelity prototypes and the user testings, we came up with the high-fidelity shop design. However, after some user testing on the high-fidelity design, we found out that the design did not match the perspective of the whole game, and the resolution for the floor was a little bit high. As a result, iterate back and create a top-down design for the shop.

Final Design - Top-down

For the feedback given from the user testing, we had to change the shop design to be with a top-down view.

Inspiration

Sketching

Although we change the perspective of the design, we still keep the colour scheme. and we adjusted the colour to be brighter because we will implement that lighting system in the shop screen, which facilitates the darkness.

Low-fidelity

After sketching the top-down shop design, we created the low-fidelity design based on the layout and the colour scheme. The user feedback for this new design was positive, so that we continued the design and made a high-fidelity prototype.

High-fidelity

This is the high-fidelity prototype. Most of the feedback was positive. Users liked the colour scheme and the layout. They said it was clear for them to understand the circumstance. However, we still need to change some details. For example, we need to change the position of the door for different levels.

Reference

https://www.artstation.com/artwork/6l08x

https://www.deviantart.com/albertov/art/Shop-tileset-723947223