Save State Design – Welcome Screen - UQdeco2800/2022-studio-1 GitHub Wiki

Navigation / Quick Links

• Save State Design Introduction
• Primary User Group
• Justification for existence
• User test to identify location
• Save State Design – Welcome Screen <--You're Here
• Save State Design Gameplay screen
  • Sprint 1 Design Gameplay screen
  • Sprint 2 Design Gameplay screen
• Final Design Style
• User testing session - final design
• Appendix
  • User Test – Save State Location
  • Sprint 1 Save State Design Gameplay screen
  • Sprint 2 Survey Save Game Icon Design
  • Sprint 2 Survey Load Game Icon Design
  • Insights from Final User Testing Session

As mentioned earlier there are 2 locations where we plan to introduce the save state

1. Welcome screen – player can load the last saved game and continue playing
2. Gameplay screen – user can save or load the last saved game

1. Welcome Screen Save State Design

As seen in Figure 4 the welcome screen already has a fully designed button. To ensure consistency and proper alignment with design guidelines (originally developed by another team) we decided not to introduce a new design concept but to use existing design elements. In addition, another reason to make load button inherit the style of the start button is because they belong to the same category of the system interface (have identical meaning) in relation to the user intentions. Figure 4: New buttons inherit the same color and font style as the original “start button” to ensure design consistency and avoid confusion

From design perspective, as seen in Figure 5 the Load button on the welcome screen has inherited the same style as the Start button. Furthermore, we ensured style consistency by incorporating the same font style originally designed by other teams. Thus, the outcome of the final concept was strongly based on cooperation and coordination with other teams from the previous sprints.

Figure 5: Font style, color palette, proportions are identical

Finally, button hover effect has now been introduced in a form of primary color arrows surrounding the button. Furthermore, as opposed to changing color (traditional option) we wanted to emphasize the importance of buttons and help players clearly focus on selecting. We justify this by targeting the persona profile pain point - “Lack of familiarity with the game UI can cause frustration”. Simply put we wanted to add more focus on the selection process and reduce risks associated with design consistency (ex. new hover effect or different color palette). The "old" hover effect is barely visible and lacks justification. Thus further cooperation is required to ensure all teams adhere to the established guidelines.

Figure 6: Button hover effect is implemented to help viewers easily identify what is currently selected

In conclusion, the newly introduced button on a Welcome screen of the game can act as a guide or a starting point for other teams when/if they start working on UI. Finally, once the design was finalized, we moved on to the next section of our feature ticket – designing a Save state for the gameplay.