UI Design and Navigation

UI Design and Navigation Flow

This page outlines the User Interface (UI) and navigation flow of the Game Y application. The following wireframes represent the user journey from authentication to active gameplay.

Mobile Phone UI:

Interface Overview

The application is divided into five primary views, designed to facilitate quick access to gameplay while providing robust user management.

Navigation

• Authentication: Users begin at the Log In screen, if they are not registered, they can go to the Sing Up page.
• Lobby: The central hub of the game mode selection and social interaction.
• Profile: A dedicated space for personal performance metrics.
• Game: The active playing environment.

Detailed View Specifications

Authentication (Log In/Sign Up)

The entry point of the application ensures secure user access:

• Log In: Simple dual-field entry (username/password).
• Sign Up: Includes email collection and a password verification step to ensure data integrity.

Game Lobby

The Lobby acts as the main menu where players configure their session.

• Mode Selection: Options for Player vs. Player or Player vs. Computer, with strategy and board size selection.
• User Widget: Displays the current user’s avatar and provides a direct link to the Profile View.
• Friends List: A side panel to view social connections.

User Profile & Statistics

A dashboard for tracking long-term progression.

• Stats Overview: Visual representation of Win Rate and other statistics.
• Match History: A breakdown of recent games including result (win/loss), points and game mode.

Game Interface

The core gameplay screen utilizes a hexagonal grid layout.

• Hex-Grid Board: Triangular board with hexagonal pieces.
• Turn Management: A ‘Turn X’ indicator that shows the active player.
• Scoring Logic: 1 point per piece, with potential bonuses for connecting sides.
• End Turn Mechanism: Players must manually click ‘End Turn’, allowing them to reconsider piece placement before finalizing their move.
• Social: Integrated chat box.

---

Changes on the mockups

LOBBY

• The user can now choose between PvP and PvC. If the user selects PvC, they will be able to choose a strategy.
• Added a slider to choose the board size independently of the game mode (this is only represented in the Phone App mockup).

GAME

• We added an 'UNDO' button, to allow the player to go back to the last turn and play it again.