Shop 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.
Category Selection Page
Item Selection Page
| 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) |
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.
These assets were revised based on user testing in sprint 4, with the original designs shown here. The final versions can be seen below.
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.
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.
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:
V2:
V1:
V2:
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.
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.
Page 1: Category Selection Page
Page 2: Item Selection Page
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.
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.
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
Different format of animations were created.
