UI & UX Design

Detroit: Become Human Menu Redesign

tools

Figma

About

In crafting the redesign, my main goal was to enhance and evolve the Detroit: Become Human menu design, with a primary focus on emphasizing the chapter that the player is currently on within the game. This involved implementing carefully placed visual elements creating a stronger connection between the players and the narrative.

Problem

Detroit: Become Human's original menu design lacks the necessary features to effectively emphasize the current chapter, leading to the user losing connection with the overall narrative in the game.

Lack of Chapter Visibility: The original menu design lacks a prominent display of the current chapter, making it difficult for players to quickly identify their progress.

Static Backgrounds: The absence of backgrounds that change based on the current chapter, weakens the connection between the menu and the in-game environment.

Analyzing the Menu Screen

While at the main menu screen, featuring an android raises intriguing questions on why they went with this approach.  As the player progresses through the game, she comments on the player's gameplay choices and is shown upset if you kill a character.  The choice of an android in the menu may be a design decision to incite players to think about the consequences of their decisions within the story.  

Lack of Chapter Visibility

The main menu lacks a prominent display of the current chapter making it challenging for players to immediately identify their progress.

Design Process

Wireframing

I started by creating low-fidelity wireframes to construct the layout and structure of the redesigned main menu, focusing on progression awareness.

Dynamic Background Integration

I implemented the dynamic background that changes based on the current chapter the player is on, creating a more immersive visual experience.

Interactive Chapter Select Screen

Introduced interactive chapter icons, allowing users to navigate through the different chapters they completed.  As the player navigates the different chapters, they are only able to see the chapters that they already completed. By implementing this feature, we ensure that players are shielded from potential spoilers, preserving the suspense and surprise which is crucial to the game's narrative.

Prototype

Takeaway

In conclusion, the Detroit: Become Human main menu design could benefit from addressing these specific issues.  Implementing these changes that focus on chapter progression can establish a connection with the player and enhance the overall gameplay narrative.  The main menu screen is the first screen a player is brought to when they first open the game.  Incorporating the chapter indicator eliminates any potential confusion about what point the player is on in the story.