Sprint1: Design Eviction Menu
Players in a game where Atlantis is going to drown are tasked with tracking out the traitor who would bring about the continent's sinking via quests and, after verifying the facts, expelling them from the land to save Atlantis. Due to the requirement for an eviction menu, which may also help deepen user participation with the game, players must select whom they believe to be the traitor. After gathering clues, the player may select the character he wishes to expel by clicking the player eviction option in this menu interface. If the choice is correct, the game is over, and the player wins; if not, play continues. This page will document the iterated design process for this menu.
- The main menu frame ( this part will be used for displaying several character cards)
- The single card for displaying the information of each NPC. (this part will contain each character's information and allow players to select)
- The button icon for entering this eviction menu.
- The confirming box (When players select one specific NPC whom they regard as the traitor, the confirming box will pop up to ensure players' selection)
- The information window (When players click on one specific NPC card, this window will pop up to allow players to browse the basic information and clues of the corresponding NPC/character.)
After summarizing the allocated questionnaires, the basic design idea has been generated, and the next step is to implement and concrete our defined design idea. Most of the responders are satisfied with the menu's multiple-column style and the way each character card is shown in a narrow bar (e.g. the interface of Among us). The eviction menu will thus be created first in a straightforward, multi-row, multi-column layout, with a single character card favoured as a thin strip; the concise interface may be more user-friendly.
Summary of the pre-design user testing questionnaire(Sprint 1) link: https://github.com/UQdeco2800/2022-ext-studio-1/wiki/player-eviction-menu:-User-survey-(Team-7)
| Wireframe | Draft (version1) | Draft (version2) |
|---|---|---|
 |
 |
 |
| Based on the survey results, a basic menu layout wireframe was created to help with the following design refinements. Our original idea was to add multiple eviction cards to the main menu for players to choose from, with a small set of information about NPCs. | Based on this line framework, our team tried to design the appearance and the colour scheme for the first version of this menu. The original idea was that the borders could be slightly irregular to cater to the puzzle game's art style and create a retro style. And adopt the predominant colours of blue and grey to suit the Atlantis theme. | However, after finishing the first version, we found that the completely irregular shape of the main menu looks a little weird after adding other elements (maybe the pictures are too cluttered). Therefore, the group also tried the regular style, but it seemed less aesthetic, and the effect was not as expected. |
Concluding the above two versions, the best way is to combine regular and irregular borders simultaneously appear in the menu interface. Using the irregular patterns of waves and seaweeds in irregular patterns at the bottom to echo the theme of the Atlantean seabed. Besides, the 16: 9 canvas aspect ratio is preferred through the discussions with the other groups. Hence the menu is modified into a corresponding ratio to suit the game. The draft of this design idea is displayed below.
The textual title on the eviction menu has been emphatically modified and improved for a better aesthetic experience. The design process can be shown in the pictures below.
| Font Design1 | Font Design2 | Font Design3 |
|---|---|---|
 |
 |
 |
| The first version of characters consists of single lines, the font design for this release is inspired by common document fonts. | Improved into fill colours inside the border lines with highlights and shadows to make the characters three-dimensional. | Redesigned the text of the title to make it more interesting and attractive.Changed font color to better match background color, font shape became fuller |
| Initial Defined Style | Refine Several Elements | Add Transparent Background |
|---|---|---|
 |
 |
 |
| The initial defined design style, In order to quickly determine the art style, we simply use the original idea. | Adjust the colour scheme and refine some details. Especially, improve the font design to make it looks interesting. | With the design advice from the team, the additional transparent background was added under the previous menu image to better blend in with other maps and game scenes. |
Later, the team decided on the new pixel resolution, so we re-normalized the main menu interface using the uniform pixel resolution to make this main menu image more compatible with the entire game.
The single card for displaying the information of each NPC. The first idea for the single card is to employ sea elements onto the card border to decorate the card and fit the game theme. Hence, our two teammates designed two drafts with sea waves, as shown in the two pictures below.
| Style1 | Style2 |
|---|---|
 |
 |
However, these two design ideas are a bit redundant since the sea wave element is reused when combined with the design of the main menu interface. Therefore, these two single card styles were not expected and adopted. With the need to exclude the wave elements and to use other sea-related elements appropriately, the single card style's appearance was redesigned. The design idea with jellyfish and bubbles is considered of good aesthetic value and fits the game theme. Hence this design was adopted as the ultimate design. The final design with the jellyfish pattern for the single card can be seen below.
| Initial Button | Version 1 | Version 2 |
|---|---|---|
 |
 |
 |
| In the first stage, the button is created with an unsuitable pixel grid resolution for the whole menu design style.(too large) | After unifying the pixel resolution of the button with the entire menu interface, We redesigned and optimized the details. | After we put the button into the game and found that the colors didn't match, so we changed the final color of the button and improve it again. |
In the initial phase, multiple single cards appear above the image of the main menu interface, forming the overall appearance of the eviction menu, which is shown in the picture below.
The final entire menu image including select button and eviction cards comes with the uniform pixel resolution.
It is necessary to design the icon for this menu to allow players to click and enter the menu interface.
In the beginning, several patterns were created as drafts. The design idea is to use figure patterns to let players realize this button relates to multiple characters. Hence, one of these ideas is to employ the textual word "character" in the figure pixel profile pattern with the textual word "character" to let the player understand this button is about to character. The other idea is to put multiple portraits of characters above the scroll paper or an opened book as background.
The drafts of the eviction menu icon are shown in the below image:
| Menu_icon1 | Menu_icon2 | Menu_icon3 |
|---|---|---|
 |
 |
 |
Then we decided to adopt the "open book" style, and regular the width of this icon to be 50-pixel grids based on the overall game's pixel resolution (the picture shown below), but it does not seem pretty well because it is slightly vague.
Hence, we decided to expand the pixel resolution of the "opened book" part to the width of the book to become 68-pixel grids. And the characters above this book become more detailed with higher pixel resolution. The modified icon image is shown below
Eventually, in order to better fit the size of the game background, the icon of the expulsion menu has been refined again. Additionally, the text “eviction menu” is added for that users could better and faster understand the functionality of this icon. Since the background color of the logo is unclear, the text part is set into two colors. The black text version will fit on a light background color, while the white text will suit a darker colored background. The two versions of this menu icon could be seen below
| MenuIconBlack | MenuIconWhite |
|---|---|
 |
 |
In the initial questionnaire survey stage, most of the respondents believed that after selecting the NPC they want to expel, there should be a confirmation box to remind them whether to confirm the choice to prevent accidental clicks.
Therefore we added the task of designing a confirmation box in this sprint, which uses the color of the background title to achieve the effect of echoing each other. In terms of text, the team opted for a more abstract style to remind users to choose carefully.
Display the effect of the confirmation box popping up after selecting NPC to expel
