Skip to content

Shop Design

mackenziekerr1 edited this page Oct 18, 2022 · 65 revisions

Interface Design

Having settled on the most appropriate wireframe for the shop interface, high-fidelity prototypes were created which were guided by the Design Guidelines. The interface follows the pixel-style of the game and utilises the same text and icon style as other interfaces in the game to ensure consistency throughout.

Final Design after Sprint 4

Category Selection Page

Item Selection Page

Artefact Design

Artefact Functionality

Item Funtionality
Axe Increases player's attack by 2x when activated
Bow & Arrow Increases player's attack by 3x when activated
Sword Increases player's attack by 4x when activated
Trident Increases player's attack by 5x when activated
Shield Reduces enemies attack by 2x when activated
Helmet Reduces enemies attack by 3x when activated
Chest Plate Reduces enemies attack by 4x when activated
Bed Constantly Regenerate player health for 15 seconds
Health Potion Refills player's health to full instantly
Clock Gives Invincibility for 5 seconds
Buildings Base building (TOWER1, TOWER2, TOWER3) for players to purchase, no upgrades included
Wall Walls can be purchased and placed on the map to create defence for the player
Stone Quarry Quarry can be purchased and placed on the map to generate stone resource
Traps Damage Enemy when stepped on, includes (TRAP1, TRAP2)

Artefact Design

Pixel-art style assets were created in line with the Design Guidelines to ensure consistency in style throughout the game. In the case where an item created by another team needs to be displayed in the shop, inspiration will be taken from this team's existing item to create a new asset that will match the art style of other items displayed in the shop for consistency. This is the case with the 'quarry' asset, created by Team 5 - pictured below on the left is their original asset, and on the right, the shop interface asset that has the same front on perspective as the other shop items. quarry comparison

These assets were revised based on user testing in sprint 4, with the original designs shown here. The final versions can be seen below.

New-Framed-Axe-Tilted New-Framed-Trident-Tilted New-Framed-Sword-Tilted New-Framed-Bow New-Framed-Potion New-Framed-Shop-Bed-1

Design Process & Iterations

Interface Wireframes

Sprint 1 & 2

In initial planning stages, wireframes of the shop interface were created by various team members to ensure a holistic and broad range of ideas. As pictured below, initial interface designs ranged from complex, single-screen layouts to simpler multi-screen layouts.

Hannah Wireframes Hannah Wireframes 2 Mackenzie Wireframes 1 Mackenzie Wireframes 2

Having assessed the feasibility of both simpler and more complex layouts, it was determined that the simpler multi-screen layouts were most appropriate for the functionality of the game. It was also taken in to account that the simpler wireframes and layouts were more feasible given the timeline of Sprint 1 and producing an MVP; and further iterations to make the interface more complex may be undertaken in future sprints if deemed necessary.

The wireframe titled 'main frame' was used as the basis for designing the category selection page due to it's flexibility to include less or more categories in future sprints depending on the requirements of gameplay. The wireframe was altered to display the player's wealth and resource status rather than the inventory, however it is intended that the inventory is added as a feature in future sprints and will then also be displayed on this page.

The item page was designed based on the wireframe titled 'alternative main frame', with some alterations to include necessary functionality. The item carousel displays available items in such a way that is not overwhelming to players, and clearly highlights the details of the selected item. Displaying the coin and resource value of the player was also significant to the player's experience, allowing them to make informed decisions about their purchases.

As a result of user testing & implementation challenges in Sprint 1, some changes were implemented to the interface design in Sprint 2. The original design is pictured on the right, with the following changes included on the design on the left. design comparison Based on observations from Sprint 1 user testing, an item navigation indicator ('item 1/6') was added to give players a greater sense of the scope of that particular category. Also, the layout of the items was adjusted based on implementation feasibility and also to allow for animation of the items upon certain events.

Some designs were iterated in to keep a similar design style across the different items as seen below: V1: pixil-frame-0 V2: bed v2

V1: pixil-frame-0 V2: clock v2

Sprint 3

In sprint 3, it was understood that the shop design needed to be taken back to basics and create a more holistic shop experience. Basic wireframes were designed over the top of the finished design in sprint 2, this allowed for a combination of designing and progression within the changes as they would be interwoven with what had already been created.

Having gone through the process of almost completing the shop design, it was a very straightforward step in creating the basic wireframes. The designs were done with a level of detail so that all potential ideas could be expressed and we could assess what would be the most feasible changes.

Design changes were completed between the wireframes and the hi-fidelity designs, as it was agreed that we needed to express the shop experience in the simplest form possible. This was to make sure the purpose and functionality were not lost among colour and extra background features.

Wireframe 1 with hi-fidelity design

Hannah Wireframes Hannah Wireframes

Wireframe 2 with hi-fidelity design

Hannah Wireframes Hannah Wireframes

Wireframe 3 with hi-fidelity design

Hannah Wireframes Hannah Wireframes

User testing in sprint 3 had a big impact on the final design (shown below), and made a lot of the design change choices for us, based on what a user would naturally do and think when looking at our design.

Updated Design after Sprint 3

Page 1: Category Selection Page

Page 2: Item Selection Page

Sprint 4

As part of the interface polishing process in Sprint 4, a UX committee was formed to oversee the design for the game and ensure continuity throughout. As such, feedback was received from this committee with some changes to implement to the design of the shop interface, which can be seen below. Additionally, final user testing was performed to determine any final changes necessary.

The final design:

Design implemented into game:

The final design was heavily impacted by the UX design committee, feedback from sprint 3 and user testing feedback in sprint 4, which allowed us to both take on designers' feedback for what they thought would be a more cohesive game design, and the reality of the user experience when playing the game. The shop has taken on more of an artistic appeal and is now not just functional but contributes to the overall experience of buying items from the shop by reducing mental load for the user. The functionality of the shop was also changed from taking up the entire screen to becoming a pop up based on feedback received in user testing. So the frame was added to the design to mimic the other popups that were already present in the game, and the X (exit button) was updated, to keep the cohesive design of the game the same.

Shop Asset Iterations

Originally, the below shop items were designed to fit the pixel art style of the game. However, user testing revealed that these were too simplistic & were iterated on to create the final iterations which can be seen here. The original designs are shown below.

sword pixil-frame-0 8 pixil-frame-0 9 shop-bow-and-arrow shop-health-potion shop-shield pixil-frame-0 (4) pixil-frame-0 (5) bed resized clock resized pixil-frame-0 11

Animation

There was a long process when it came to designing the animations for the shop. As it became apparent that the format of the animations did not work within the game, and therefore, a different type of animation format was looked into. Ultimately, the animations were unable to be implemented in Sprint 2 despite multiple attempts and approaches taken.

Not enough money trial for animation with button. https://user-images.githubusercontent.com/109804723/189582195-0531c16a-f9e8-404c-be14-65d382e2c7e5.mp4

Item frame shaking when there is not enough money. Version 1: https://user-images.githubusercontent.com/109804723/189582209-5317ac60-81f7-4e24-beef-d86b6e2ad7af.mp4

Version 2: https://user-images.githubusercontent.com/109804723/189582220-0687217d-8a44-43f8-bc65-235f221b0b1c.mp4

Version 3: https://user-images.githubusercontent.com/109804723/189582239-b9bcbfb0-d97c-4d9a-b31d-7c00bbc37daa.mp4

Different format of animations were created.

buy_button_fail Items_jitter

Table of Contents

Home

How to Play

Introduction

Game Features

Main Character

Enemies
The Final Boss

Landscape Objects

Shop
Inventory
Achievements
Camera

Crystal

Infrastructure

Audio

User Interfaces Across All Pages
Juicy UI
User Interfaces Buildings
Guidebook
[Resource Management](Resource-Management)
Map
Day and Night Cycle
Unified Grid System (UGS)
Polishing

Game Engine

Getting Started

Entities and Components

Service Locator

Loading Resources

Logging

Unit Testing

Debug Terminal

Input Handling

UI

Animations

Audio

AI

Physics

Game Screens and Areas

Terrain

Concurrency & Threading

Settings

Troubleshooting

MacOS Setup Guide

Clone this wiki locally