Sprint 2 Save State Design Gameplay screen
- Save State Design Introduction
- Primary User Group
- Justification for existence
- User test to identify location
- Save State Design – Welcome Screen
-
Save State Design Gameplay screen
- Sprint 1 Design Gameplay screen
- Sprint 2 Design Gameplay screen <--You're Here
- Final Design Style
- User testing session - final design
- Appendix
During sprint 2 we designed another set of buttons using Pixilart.
The concept for the Save game icon was derived from the target audience analysis and the persona average age which is 36. Super Swipers observed entire evolution of the gaming industry, in addition they are the generation that have seen floppy disk drives mounted on their computers. In other words, the “floppy disc style” icon seams the only reasonable choice to communicate the meaning of the “save game” icon. Furthermore, the style of an icon could be associated with nostalgic moment that “brings in warm memories” from the past. This means that another user group (Retro Enthusiasts who like retro games from Sprint 2) could associate our design style with the correct meaning – save game.
Figure 10: Design inspiration for the “floppy disk style” save icon. Left and middle images original source derived from Medium.com and Flaticon.com respectively. Right image final design of the “save game” icon made in Pixilart.
Justifying the findings through survey To confirm our assumptions, we’ve sent out several surveys with multiple design options to pick from. We asked users to select the illustration which they are more likely to use to save the game. The purpose of the survey was to confirm our design direction - correct association with the meaning of the icon and its purpose.
As seen in Figure 11 total of 11 responses were recorded. Findings from the survey indicate that people responded positively to the new icons from the cognitive perspective. In other words, the association with the correct meaning was almost 75% which is more accurate than in Sprint 1.
Figure 11: findings from the survey indicate that 7 out of 11 users associate icon number 2 with the Save Game.
Once the save button design was finalized, we moved on to designing the load game icon.
Reflecting on the sprint 1 the Load game icon for the Atlantis Sinks game had an arrow pointed upwards, illustrating the “upload” state. However, we wanted to associate the icon with technology as opposed to loading screen or uploading into the cloud. As seen in the Figure 12, we derived inspiration from the flaticon.com. The concept was to keep the arrow (illustrate upload state) but at the same time associate it with games (load game). However, as seen in Figure 12, the arrow is very simplistic and doesn’t fit with the overall design concept in the game.
Figure 12: Design inspiration for the “Upload file style” load icon. Left and middle images original sources derived from flaticon.com
We improved the final design of the “load” icon by incorporating existing UI elements from the top right corner of the gameplay screen. As seen in Figure 13, the already designed “Go back” icon originally created by another team has a thicker arrow pointing upwards. We replicated the same style into our own concept.
Figure 13: Evolution of the “Load Game” icon. From left to right first option that didn’t match the overall style, second is the “go back” icon designed by another team, third is the final version of the “load” icon that match the style of its predecessor.
To justify the correct design approach, we used the survey similar in structure to the “save” icon. The purpose of the survey was to identify whether the chosen design direction of the load icon accurately represents the meaning in the eyes of the players. As seen in Figure 14, the insights show that almost 60% of users clearly understand the meaning of an icon. In addition, icon number 4 has similar design style, thus we can infer that the concept of a “console or a computer” located under the arrow pointing upwards is the optimal solution to visualize the Load state.
Figure 14: Survey results state that the most preferable design that users associate the Load state with is a device with an arrow pointing up
In conclusion, now that we’ve identified the primary design direction for both Load and Save icons in the gameplay menu, the next step was to focus on creating the actual buttons and deploying the final user testing session to confirm our design choices made throughout the sprint.