Design display of the detailed eviction card and new window

Sprint2: Adding NPC basic information and clues window to the eviction menu

Background & Goal:

In the first sprint, our team achieved these basic features:

1. The menu icon could be found in the game interface and clicked to access.
2. Then players can choose which NPC card they regard as a traitor and expel this NPC.
3. When a player clicks the choose button, a confirmation box will appear so they may confirm their choice.

In Sprint 2, our team aimed to add specific information/clues to the eviction menu by adding characters' profile images to each NPC/eviction card and an information window with more corresponding details that can be triggered by clicking on each NPC/eviction card.

The Design Process in sprint 2

The fundamental design concept has been developed after summarizing the assigned questionnaires; the following step is to apply and concretize our stated design idea.

Analysing by combining the two predesign questionnaires in Sprint 1 and Sprint 2：

• Most participants felt it was necessary to show clues and information in this eviction menu, which could help them select the traitor. * Most respondents felt that having an information cue window would make the eviction menu's interface clearer and more concise. Hence, in sprint 2, our team will implement a window showing clues the player collects in gameplay.
• A significant portion of respondents (nearly half) felt that a single card might not be clickable to access detailed information, so a hover effect would be added to remind users that cards have additional functionality.

Besides, we also investigated how users expect to show clues; most participants chose the option of "text + pictures," so detailed information and clues will be considered in the form of text combined with pictures at this sprint or the next sprint.

Summary of the pre-design user survey questionnaire(Sprint 1) link: Player Eviction Menu Sprint1: User survey (Team 7)

Summary of the pre-design user survey questionnaire(Sprint2) link: Player Eviction Menu Sprint2: User survey (Team 7)

Display the basic information on eviction cards

Initial idea

The initial idea of our team was to simply list the image of the NPC on the eviction card and the corresponding basic information:

NPC1	NPC2	NPC3

Changed and Improved

When we simply listed the basic information on the card, we found that the presentation of the information did not match the card, and the overly concise text effect made it unable to integrate with the card (looks incomplete).

So we rearranged the NPCs' pictures and basic information, and designed some text in pixel style to make the information and the card better blend together, the final image of the basic information eviction card (only three images are displayed currently):

The normal eviction card that the player sees after entering the menu

The effect of the player hovering the mouse over the corresponding eviction card (brighter and larger)

(Note: Only one in the game can trigger the hover effect at the same time)

Some changes of NPC basic information after discussing with Team 1 & 5

Normal Card with changed information	Hover Card with changed information

Changed on text font

After integrating NPC basic information cards into the game, we found that after scaling the card size, the plain text font would become blurry and unreadable, so we pixelated the information text and did the following iterations:

Initial text	Iterate font 1	Iterate font 2
The font used initially was plain text, which was blurry in the game	Simple text made of pixel lines does not render clearly in the game	Redrawn and fully pixelated the original font, the effect is as expected

The display of Card in the current stage

Hover effect on the single eviction card

The mouseover effect of the eviction card was built with the intention of allowing the user to discover the additional functionality that the card offers. The colour of the card you have chosen will be emphasized. The card will be brighter and larger than the original card when users control their mouse to hover on one particular NPC/eviction card.

Normal Card without basic information	Hover Card without basic information

Eviction Menu with the Detailed Eviction Cards

Our team filled the characters' cards to the eviction menu with basic NPC information after communicating with other teams and sharing their final design outcomes. At the current stage, our eviction menu only shows the information content of three NPCs, although there are eight NPC cards. This is because the other groups are responsible for the character design and character information parts are only determined in a part of the content.
So the first three cards are placed with three different characters. The remaining 5 cards are just filled with the repeated information of the first character "NEREUS" to substitute for the different NPCs/characters that will be added in the future. Our team will continue to communicate and discuss with the corresponding groups and promptly add and complete the information on different NPCs.

The image below is the eviction menu with the basic information on eviction cards:

A mouse hover effect was added to the single eviction card to achieve a better user experience and remind users what they need to do and where they are on this interface. The interaction effect is that one particular card will be slightly enlarged and changed into a brighter colour) when users control their mouse to hover on this card.

The image below shows the effect of the user hovering over the first card (enlarged and brighten):

Information/clues window Design Process

The original design

At the initial design stage, the pattern of the envelope is employed to indicate that the primary purpose of this information/clues window is to present the collected information and clues. Other decorative elements (like jewellery, diamonds, and flowers )are also used to achieve the dreamy feeling of the underwater world. The background colour is set to semitranslucent in order to make the whole menu look like a mysterious and transparent sea (fluid).

The initial design：

with translucent background	without translucent background

Improved some decorative patterns

Some of the ornamental components, like flowers and diamonds, have been altered into dolphins, starfish, and shells to make the entire design more in line with the overall concept of the game. At the same time, we also adjusted the position of some elements to make the layout of the clues window look more suitable.

The new and enhanced image:

with translucent background	without translucent background

The Final Information/clues window Image Design Process

The images below are the translucent info/clues window that appears above the eviction menu:

Without NPC basic information

With NPC basic information

Changed and Improved

At this stage, our team found obvious design problems, mainly regarding the design and colour scheme of the new info window. The basic information greatly enriches the content of our menu. Meanwhile, our team placed the previous translucent information window above the eviction menu with the basic NPC information. Later, our team assessed user satisfaction with the design at this stage through user testing and analyzed some design problems for the info/clues window with the semitransparent background. Many respondents thought the translucent window blended in too much with the backdrop (it looks messy), which made it difficult for them to read text when the information between the two interfaces overlaps. We also obtained clear ways to improve and solve those problems through user testing.

Intercept the corresponding content from the user testing:
A few disappointed responders have design requirements. They believe we should employ a higher aesthetic design concept to convey the ocean's mystique and retro, as well as use some particular pattern to get the feature of this info/clues window ( display the collected details).

• The colour scheme is not aligned with users' expectations, and the background colour with high transparency will make the window not clear enough.
• The decorative elements of the current info window are possibly inconsistent with the previous design.
• Some respondents are expected to be more in tune with the game theme (e.g., reduce the feeling of cuteness and brightness while appropriately increasing the sense of retro and mysterious ocean).

In the final design stages, the following points have been improved based on the user testing:

1. The semitransparent background colour is replaced with a darker solid blue to make players can browse the content more easily: increasing the transparency (90%).
2. The design of the previous regular bezel was modified into a more aesthetically pleasing vintage scroll to suit the game's theme and this feature.
3. Some ornamental elements, such as shells and dolphins, were refined again to create a better visual effect.

The final display of the information/clues window

The picture below is the final information/clues window Image that appears on the current eviction menu:

The Final Expanded Eviction menu with detailed eviction card and info window