Apocalypse Guardian Official Website

Apocalypse
Guardian: Echoes of Nature

UI/UX Design

INTRODUCTION

Before the launch of Apocalypse Guardian: Echoes of Nature, a promotional website is being designed to highlight the game's features and backstory. The site aims to attract potential players by providing game information, encouraging newsletter subscriptions, and facilitating account sign-ups ahead of the launch.

MY ROLE

This is an individual project in which I designed the game promotional website from the ground up, managing all aspects from product scoping and user flows to wireframes, design finalization, and rapid prototyping. Additionally, I conducted user research to produce viable ideas and solutions to potential problems.

PROJECT DELIVERABLES

Wireframes, Final Design, Prototypes

TIMELINE

February 2024 - April 2024 (Two months)

PROJECT SCOPE

1 UI/UX Designer

TOOLS

Figma, Adobe CC, Canva

Problem Discovery

Many game promotional websites fail to capture users' attention due to cluttered designs and outdated content.

A disorganized layout overwhelms users by making navigation difficult, causing them to leave the site without exploring key features or learning about the game. On the other hand, outdated information signals to users that the website is not being maintained, which can diminish their trust in the game’s development or success. This sparked a question -

HMW enhance the overall user experience of game promotional websites by creating a cleaner and more engaging user interface?

My Solution - Apocalypse Guardian: Echoes of Nature

A modern, intuitive, and clean redesign of game websites.

Discover the latest game updates.

Signup / Login

Quickly register for a game account in just a few steps.
Toggle the little eye icon to show or hide important information when necessary.

Newsletter Subscription

Subscribe to the newsletter to receive the latest updates directly in your inbox.

Easily sign up for the newsletter from various locations across the website.
A user-friendly interface requiring minimal steps for subscription.

Game Trailer

Experience captivating moments of gameplay and story in advance.

Explore the game's mechanics, graphics, and style in action with a direct view of gameplay.
A brief description in the user interface provides context before diving into the immersive video.

The Process

Wireframes

Wireframes establish the essential structure and layout for the game website, providing a blueprint for content organization and user interface design.

To gain a comprehensive understanding of the news website's structure, I created wireframes for different pages or parts of the website. Each wireframe focuses on alignment, element sizing, and layout. To avoid cluttered design, I adopted a clean, minimalist design with a clear hierarchy for all wireframes shown below, allowing users to find key information without difficulty.

Final Designs

Giving a realistic representation of typical game websites helps visualize the strengths and weaknesses of the design work completed so far.

To achieve a realistic view of the news website, I added text and graphics to the completed wireframes. In Figma, I established a design library and created various components, such as buttons, fonts, and colors, for the final designs. I focused on making all call-to-action buttons clear and easily noticeable, guiding users toward their desired actions. Additionally, I designed the latest news section to encourage users to revisit the website regularly.

Prototypes

Prototyping is the final and most crucial step in the design process that brings interactivity and dynamics to the website.

To simulate the actual website experience, I created prototypes for each user interface, linking web pages to demonstrate navigation when users click buttons or text. I also reviewed the logic behind the user flow to ensure that the connections are intuitive and user-friendly, providing a seamless interaction. A key aspect of a great user experience is allowing users to easily return to their previous location without difficulty.

Home

Gameplay