Sprint 3 - Team 7 task ticket 2: Design display of win/lose prompt box

[LIU-Evelyn]

Description

Task: Design display effects of win/lose prompt box (hover, UI etc.), and design display styles
Feature: Win/lose Condition for Selecting Traitor: Goal 2

After analysing the feedback gathered from user survey, the basic win/lose condition and display style of prompt box have been determined through the studio. In terms of design, the interaction process will include two sub-features: Win prompt box (if player selects the correct traitor); Lose prompt box (appears twice after player chooses wrong). Therefore, in this task, we will design the image and effect of these prompt boxes.

Example

• Win prompt box: Design the detailed interface for the winning prompt box, which mainly contains correct message and what is the next step (May include image and text ..).
• Lose prompt box: Design the detailed interface for the failure prompt box, which mainly contains error message and number of trial and error (remaining) (May include image and text ...), will pop up after the first and second wrong selection.

Dependencies

• Information about basic win/lose condition relies on storyline (Sprint 2 - Team 5 Feature ticket: Detailed Storyline & instructions #64 ).
• Relevant display of prompt box relies on existing eviction menu (Sprint 2 - Team 7 Feature ticket: Detailed eviction cards designed to select the traitor #51 ).
• Display styles relies on feedback gathered form the studio (Sprint 3 - Team 7 task ticket 1: Determine the display of prompt box and win/lose logic #127 ).

Milestones

Steps that need to be completed for this task:

• Step 1: Design draft of win/lose prompt box (Sep. 21)
• Step 2: Improve the final image and effect of the feature, such as more in line with the storyline, adjusting effect, etc. (Sep. 23)

Completion Deadline: Sep. 23

Additional goals (If have time)

Traitor will tell the player how to save Atlantis after she/he being expelled:
Design a image to display this scenario

Documentation

• Eviction menu
• Storyline
• Sprint3 - Win/lose Condition: User survey (Team 7)

Member

• Yingxin Liu (@LIU-Evelyn ) (Yingxin LIU)
• Kexin Du (@motaA0309 ) (Kexin Du)

[LIU-Evelyn]

Win prompt box (Draft)	Lose prompt box (Draft)

[LIU-Evelyn]

The initial design idea was to make the win prompt box with the banner to be green to represent victory and successfully complete the select traitor mission. In the part of the content box, the wooden boards and posters are used to create an atmosphere of celebration. On the outside of the content box, there are fireworks, confetti, and coloured streamers to represent the celebration. In the future, our team may optimize this part by adding animation or sound effects to the celebration elements to enhance the user experience.

The lose prompt box's banner is red and also broken（with some gaps）, and then the content box below uses a glitch art style to indicate that the selection is incorrect and failed.

Initial win prompt box	Initial lose prompt box

[LIU-Evelyn]

(9.24) Improved the final display after user testing, the details can be found here: Win/lose Condition: Design Process & Guideline

Final win prompt box	Final lose prompt box1	Final lose prompt box2

[LIU-Evelyn]

(9.25) Added corresponding buttons:

Right button	Wrong button1	Wrong button2