Journey (UI) - MsCornell/2425Repo GitHub Wiki

This page is for UI/UX mock ups.

A simple user flow.

---
title: Overview
---
flowchart LR
    %% Start Point
    start([Start]) --> Q1{What do you want to do?}
    Q1 -->|Log In| LogIn[Log In]
    Q1 -->|Create an Account| SignUp[Sign Up]
    Q1 -->|Later| start

    %% Login & Signup Flow
    SignUp --> LogIn
    LogIn --> Q2{Remember Me?}
    Q2 -->|Yes| Q3{Login Success?}
    Q2 -->|No| EnterCredentials[Enter Credentials]
    EnterCredentials --> Q3
    Q3 -->|Yes| Home[Home]
    Q3 -->|No| ResetOption[Reset Password?]

    ResetOption -->|Yes| ResetPasswordFlow
    ResetOption -->|No| LogIn

    %% Reset Password Flow
    subgraph ResetPasswordFlow [Reset Password Flow]
        ResetStart([Reset Password]) --> RbyEmail[Reset by Email]
        RbyEmail --> EnterNewPassword[Enter New Password]
        EnterNewPassword --> LogIn
    end

    %% Home Navigation
    Home --> PlayGame[Play Game]
    Home --> Leaderboard[Leaderboard]
    Home --> Profile[Profile]

    %% Play Game Flow
    PlayGame --> Q4{Game Mode?}
    Q4 -->|Single Player| SinglePlayer[Single Player]
    Q4 -->|Local Multiplayer| LocalMultiplayer[Local Multiplayer]
    Q4 -->|Online Multiplayer| OnlineMultiplayer[Online Multiplayer]

    %% Single Player Mode
    SinglePlayer --> Q5{AI Difficulty?}
    Q5 -->|Easy| EasyAI[Play with Easy AI]
    Q5 -->|Medium| MediumAI[Play with Medium AI]
    Q5 -->|Hard| HardAI[Play with Hard AI]
    EasyAI --> GameEnd[Game End]
    MediumAI --> GameEnd
    HardAI --> GameEnd

    %% Local Multiplayer Mode
    LocalMultiplayer --> StartLocalGame[Start Local Multiplayer Game]
    StartLocalGame --> GameEnd

    %% Online Multiplayer Mode
    OnlineMultiplayer --> Matchmaking[Matchmaking]
    Matchmaking --> StartOnlineGame[Start Online Multiplayer Game]
    StartOnlineGame --> GameEnd

    GameEnd --> Q6{Play Again?}
    Q6 -->|Yes| PlayGame
    Q6 -->|No| ReturnHome1[Back to Home]

    %% Leaderboard Flow
    Leaderboard --> Q7{View Ranking for?}
    Q7 -->|Single Player| SPLeaderboard[Single Player Leaderboard]
    Q7 -->|Local Multiplayer| LMLeaderboard[Local Multiplayer Leaderboard]
    Q7 -->|Online Multiplayer| OMLeaderboard[Online Multiplayer Leaderboard]
    SPLeaderboard --> ReturnHome2[Back to Home]
    LMLeaderboard --> ReturnHome2
    OMLeaderboard --> ReturnHome2

    %% Profile Flow
    Profile --> ViewProfile[View Profile Details]
    Profile --> EditProfile[Edit Profile]
    EditProfile --> ProfileUpdated{Profile Updated?}
    ProfileUpdated -->|Yes| ReturnHome3[Back to Home]
    ProfileUpdated -->|No| EditProfile

    %% Return Points
    ReturnHome1 --> Home
    ReturnHome2 --> Home
    ReturnHome3 --> Home

    %% End Point
    Home --> stop([Stop])

---
title: Create User
---
flowchart LR
    start([Start]) --> Q{New User?}
    Q -->|Yes| SignUp[Sign Up]
    Q -->|No| LogIn[Log In]
    SignUp --> LogIn
    LogIn --> stop([Stop])

---
title: Existing User
---
flowchart LR
    start([Start]) --> Q1{Remember?}
    Q1 -->|Yes| Home[Home]
    Q1 -->|No| LogIn[Log In]
    LogIn[Log In] --> Q2{Success?}
    Q2 -->|Yes| Home[Home]
    Q2 -->|No| LogIn[Log In]
    Home --> stop([Stop])

---
title: User Sign Up
---
flowchart LR
    start([Start]) --> Q1{Sign Up Method}
    Q2{Success?}
    stop([Stop])
    Q1 -->|Input Username, Email and Password| Q2
    Q2 --> |Yes| stop
    Q2 --> |No| Q1

---
title: Reset Password
---
flowchart LR
    start([Start]) --> RbyE[Reset by Email]
    RbyE --> ENP[Enter New Password]
    ENP --> stop([Stop])

---
title: Play Game
---
flowchart LR
    start([Start]) --> Setup[Setup Game]
    Setup --> Play[Play]
    Play --> Q1{Play Again?}
    Q1 -->|Yes| Setup
    Q1 -->|No| Leaderboard[Leaderboard]
    Leaderboard --> stop([Stop])

---
title: Select Game Model 
---
flowchart LR
    start([Start]) --> Q1{Game Mode}
    Q1 -->|Play with Human| PlayGame[Play the Game with Other Player]
    Q1 -->|Play with AI| Q2{Difficulty?}
    Q2 -->|Easy| EasyGame[Play the Game with Easy AI]
    Q2 -->|Medium| MediumGame[Play the Game with Medium AI]
    Q2 -->|Hard| HardGame[Play the Game with Hard AI]
    PlayGame --> stop([Stop])
    EasyGame --> stop([Stop])
    MediumGame --> stop([Stop])
    HardGame --> stop([Stop])

Overview: Design tools

We used Figma and paper prototype as our primary design tools. Canva is used to create unique icons and logos for our product.

Overview: Color palette

coolers

Overview: Assets

Overview: UI Component

Navigation Bar

Page: Login & Sign up System

Start

Create an account

User Login

Reset Password

Page: Home

Page: Start Game

Page: Play Game

Page: Leaderboard

Page: Profile

Are there other pages you should include?

Wireframes can easily be made at draw.io

Remember that wire frames are intended to guide the UI development, not dictate it. If you want pixel-perfect reproduction, wireframes are the wrong tool - you need to create interactive mockups, but avoid this if you can because it can make development slow down.