Shop
The shop feature is accessible to players during the day time cycle of the game, and provides players with the opportunity to purchase items that are beneficial to them during game play. Items available in the shop include artefacts, defence/weapons that provide additional protection against enemies, building upgrades & resource production upgrades.
Having settled on the most appropriate wireframe for the shop interface, medium-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. The designs were enhanced from Sprint 1, 2 and 3 due to the underwhelming shop experience that the user had when attempting to use the shop. We had created a functioning feasible shop, but had missed the overall experience of the user in the first two sprints. In sprint 3, wireframes were created over the finished designs from sprint 2, and from there hi-fidelity designs were created for user testing. During user testing, we had a breakthrough in terms of what worked and what didn't to enhance the users experience.
In the 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. Once we had the placement of function correct, we worked to create a holistic shop experience for the user that was intuitive to use and subconsciously recognisable.
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.
Pixel-art style assets were created in line with the Design Guidelines to ensure consistency in style throughout the game. The 'sword' and 'wood' assets were created in this sprint to represent items players may be able to buy from the shop, however, in future sprints more assets will be created based on items that align with gameplay logistics.
In line with creating a minimum viable product for the purpose of sprint 1, it can be noted that some aspects of the high-fidelity prototypes were not able to be implemented, such as the alignment of assets on the screen. Since this does not affect the functionality of the feature, these will be adjusted in future iterations of the design.
Main Shop Screen
Building Shop Screen
Artefact Shop Screen
CareTaker: The caretaker class records and stores the player state into the internal memory for the engine to retrieve in the future. The main purpose of this class in sprint 1 is to ensure that the player state is consistent before and after entering the shop thus making the purchasing effect permanent and prevents player state (e.g. gold) from resetting after switching back to main game screen.
Memento: Store the player states and prevents any further change to be done on it, this is so there are no possibility of it changing when the caretaker stores it, any changes done to the player state will cause new memento to be made and stored
Originator: Records the player state before storing it as a memento, store the status of the player's inventory, gold, attack, health, etc. Originator can be edited to follow any further changes before saving it as a memento
A UML showing the the more significant aspects of the shop screen interface (Note: not all variables and methods are illustrated).
User Testing was conducted to gather feedback on the design & functionality of the shop interface. To do this, users were given a set of tasks and questions to complete that mimicked the tasks that a player would undertake during gameplay. Following these tasks, general interviews were conducted to gather feedback on the overall design and look of the interface. For the purpose of this testing, it was assumed that the target audience was students in at least their second year of studying who were undertaking a degree in the technology field. Users were asked to do the following:
- Purchase an item. Outcomes: From the main category selection page, it was noted that there are no clear instructions for users to choose a category, therefore some users took a moment to familiarise themselves with the interface before clicking a category button. Once users progressed to the item selection page, there were no issues with navigation to make a purchase.
- Abandon your current purchase, navigate back, choose a different category & purchase another item. Outcomes: Since dummy icons were used in this sprint, the 'back' icon did not have any visual indicator of its purpose other than the placement - users noted this, which will be addressed in future sprints.
- Return to the main game. Outcomes: Similar to above, the top right corner placement of the back button signals to users the purpose of the button. However, a visual indication of this will be added in future sprints.
Users also undertook general interviews to give feedback on the overall design and look of the interface, and made the following observations which will be acted on in future sprints:
- More contrast (either colour or design) between icons and background would be beneficial in matching art style with the rest of the game
- Greater detail should be included in the title, currency representation and scrolling arrows - users felt that the design looked 'unfinished'
- In terms of player orientation, it would be helpful to include the category that the player is in once they have progressed to the item page
- There were also concerns around the amount of artefacts that would be up for sale, and if there were a lot that the carousel design would not be great to have to click.
- “Will there be a way to buy coins?”, this is something we have to talk to the larger studio regarding as it will make for a more complex tier of gaining resources and artefacts.
Front end testing was completed to test functionality of the shop. The below video runs through the process. Note in the building screen stone is not deducted when try to purchase a log as there is not enough stone.
As the shop grows in use, there is a larger opportunity to grow how player interacts with this feature and its ability to support the game play.
This could include:
- A bigger focus on integrated theme design
- Adding a page into the categories internal displays where there is a gallery of all the potential items, not just the carousel view which could be used to highlight specific items.
- Having things disappear from the shop based on how much money the user has
- Having different versions of the same thing e.g. 1 x wood, 5 x wood, 100 x wood
- Having more clear titles on the different pages and descriptions of items
- Having a total of how much money the user will have after they buy the item
- A way to upgrade the different items
It is currently a very basic shop, which means there are a lot of opportunities to help support the user and have an impact on the game, and help change the ‘unfinished’ people that we received from user testing. The idea for comes improvement for the shop is focused on what potential iterations will help benefit the player not just give functionality to the store. This will contribute to the store being used often, and with intent, supporting the user through every stage.
However, before we can think about potential benefits, we need to condense the different design styles and make sure they are the same as the games and are cohesive with the design style chosen. This was very evident in the user testing, which could mean that the store changes colour to represent a more consistent theme across the game, or more ‘store’ typical features such as the titles not just appearing flat on the store page but hanging in a wooden board. Ways that could make the store look more ‘physical’ for the player and integrated into the user experience.
In later sprints, based on time and ability we could also integrate the player’s experienced threat of water into the store experience. This could mean having what looks like water slowly filling up the store, until they either can’t buy from the store, or it is just a background effect, based on how well they are going in the game.