Navigation / Quick Links

• Design Style and Cohesion Guidelines Introduction
• User Testing Atlantis Sinks Game
  • User Testing Summary <--You're Here
• Isometric and pixelated design
• UI Design and Typography
• Main Theme and Cohesion
• Design Style and Cohesion Appendix
  • Collected Feedback from User Testing Session

User Testing Overview

Insights collected through user testing session were used to create a list of elements that required our immediate attention. Key findings derived from design feedback focus on the next areas that require improvement:

• Design style
• Use of colour
• Functional appearance
• Object (entity) recognition
• Isometric implementation
• Professionalism

In addition, by identifying areas that lack consistency not only we raised awareness in this matter, but also helped other teams to reflect on these findings and improve their design direction.

Startup:

1. Animation consistency with buttons - Power button and Settings button need animation

Settings button is located in the right bottom corner, lack animation and have wrong design style (main menu primary button)

Prologue:

1. Update designs to reflect current environmental objects and guidelines (All objects need to have pixelated shading, dark borders only)
2. Remove side lines in text box (based on user feedback)
3. Some objects are blurrier than others

Prologue screen have little inconsistencies in the overall design concept. For example blurry background

Shop Page

1. Revise shop icon, user testing indicates an addition of dollar sign in the icon.
2. No button outlines for Wood, Stone and Coin indicators.
3. Stone, wood and coin icons on the left side to mirror the gameplay screen.
4. No solid red background for shop title
5. ‘Shop’ title needs to be centered.
6. All icon designs need to have a flat 2D style and isometric shading.
7. Buy button background should mimic the existing ‘Exit’ button background
8. Button backgrounds should not be on plain text, leave plain text with no background to avoid confusion
9. Also follow text size guideline
10. Next and previous arrows are buttons, hence use button background that follows button background guideline.

User testing session helps to evaluate high priority elements that must be addressed to improve the shop page

Inventory Page

1. Remove red x and replace with yellow back arrow on top right corner
2. No button like backgrounds for subheadings
3. ‘Inventory’ heading needs to be H1
4. Subheadings like Equipment, Health, Buildings, Axe need to be H2
5. Next and previous arrows are buttons, hence use button background that follows button background guideline.
6. Enlarged inventory pop up so more padding can be added between each category (i.e., Equipment, Health, Buildings etc.) - extra task based on user feedback

We can observe several inconsistencies in the Inventory page such as misaligned heading, wrong proportions and scalability issues

Achievements Page

1. Main heading to match text size of the Settings heading
2. Summary and Size to be H2 size
3. Summary does not need to be capitalized.
4. All subheadings (Upgrades, Misc., resources, Game etc.) need to match H2
5. Replace white background of the text box grid to pale yellow like that of the “summary”
6. Change back button to yellow square ‘back’ button used in the rest of the game.

Achievements page, although currently being improved, again we can observe the same pattern of mistakes with headings, paragraphs, colors, etc.

Guidebook

1. Update images and icons to fit new designs that follow style guide.
2. Guidebook icon needs to be made smaller to match the Achievements icon.

Updated version of the Guide book has minor issues in terms of coherent design style and scalability of icons

Settings

1. Back arrow should be on top right corner instead of bottom left.
2. Apply button font has incorrect size and wrong primary style button used

As of 17th October, the Settings page has been modified, there are minor issues such as wrong position and style

Assets On Map (Enemy, Main Character, Environmental Objects, Crystal and Buildings)

1. Main Character needs to have dark border not black
2. Crystal to have dark border
3. No block coloring, pixel shading must be included on all objects and characters → redesign rock stacks to fit this style guide
4. Palm trees do not have dark borders
5. Final Boss enemy does not have a dark border
6. All Characters need to be scaled to the size of the main character (key highlights are NPCs too small, shell too large) (based on user testing)
7. Crab enemy is the only non-animated enemy

There were design flaws in the game itself such as border, color and in addition misalignment in terms of design cohesion (palm tree)

Defeat Screen

1. Same feedback as prologue

In addition, although, the list of inconsistencies is exhaustive, yet, as seen in the screenshot below through team collaboration and cooperation information related to the above design issues has been shared within a day on Discord. All teams collectively tackled these known issues and, more importantly, added them in their task tickets. Thus, through this research we increased chances for the game to become enjoyable and fun to play.

Image description: not only design inconsistency findings were shared, teams also included and were aware of the improvements. This implies that major flaws would be fixed in the final sprint

In conclusion, based on this summary we've identified primary design flaws or patterns that all designers keep repeating. To avoid such implications and ensure that progress isn't interrupted and, most importantly, player's gaming experience is not ruined the concept of introducing the Design Style and Cohesion Guidelines was born. It is out of necessity to help other designers that this idea, in my opinion, is valuable and important.