Digital Defenders

A concept mockup game, created in a group of 2
Target Platform: Android / IOS
Game Genre: ARG

Roles:
  •  UI Design (Visualisation/Mockup, HUD, Logo Design)
  •  UX Design (Wireframe, Prototype)

Elevator Pitch:
Digital Defenders is an augmented reality (AR) mobile game where players use the mobile application to assemble clues that they find in the real world and solve monthly puzzles. 4 Players work together in "Share houses" as "housemates", where each of them has their own abilities.

Digital Defenders Icon
Digital Defenders Icon

This is the high fidelity wireframes I've created for Digital Defenders. After researching a few ARG games and based on the gameplay I received from my teammate, I've narrowed down the UI and UX needed for the game.
  •  Landing Screen
  •  Menu
  •  In-game messenger
  •  Class
  •  Progress Screen
  •  Mission - Stealth Attack
  •  Mission - Defense
  •  Mission - Secret (not visualised)

Software: Figma

Wireframe

Here are the 6 user flow documentations to demonstrate how users can interact from the wireframes above. Including:
  •  Players choosing their class
  •  Players double checking the class's details
  •  Check game/story progress
  •  Sending Message
  •  Attack Tutorial
  •  Defense Tutorial

Software: Figma

User flow

UI Design

This is the visual design of the Digital Defenders with the HUD and icons designed for the classes, which also work as the players' avatars for the in-game messenger. The overall art direction is clean, minimalistic and has a hacking theme. I've also searched up a code (hacking) and placed it as the background, where it could be animated the code to auto-scroll downwards if it is programmed.

Software: Illustrator, Figma

Prototype: https://www.figma.com/proto/ess7tY7KImoUPeo64maH1Z/digital-defenders?node-id=1%3A3&scaling=scale-down

@Created by Daisy Chan 2021