An image of georifters website on desktop and mobile

Georifters Website

Website

An one-page website which promotes the game "Georifters." It introduces the feature of the game and provides easy access to viewers to purchase the game.

Team

Busy Toaster

My Role

UI/UX design

Tool

Adobe XD WIX

Duration

One month

Overview

Background

After the game was published, the company wanted to create a website that could introduce the game to users and bring the users to desired platform to purchase the game. I was assigned to be fully responsible for the task and reported to the boss directly.

The Goals

  • ◆ Create a one-page website which only present the most important information.
  • ◆ Introduce the game to users.
  • ◆ Provide users access to purchase.

Reasearch

Although the game and the website share similarntarget audience, they have different purpose. Therefore, I made some reasearch on the user needs, client needs, content and functionality requirements of the webiste.

Satify both the client and user

To make sure the website could satisfy both users and our company, I created a list of user needs and client needs.

User Needs

The website needs to enable the user to:

  • ◆ Learn about the game as clear as possible.
  • ◆ Know where could buy the game.
  • ◆ Know if the game is still updating.
  • ◆ Know the basic required spec to run the game.
  • ◆ Know sale information.

Client Needs

The website needs to enable the client to:

  • ◆ Introduce features of the game to people who are unfamiliar with the game.
  • ◆ Distinguish link to attract user’sattention to buy.
  • ◆ The website should look active.
  • ◆ Receive feedback from users
  • ◆ Expand the fan base of the company
  • ◆ Make the game looks great

Sitemap

Although the website is an one-page website, I still created a sitemap to remind me the function of each section.

Wireframe and Prototype

RWD design

To make sure that our design could work well on most devices, I created wireframes for three different screensize. Although WIX only provides screensize for mobile and PC, the wireframe still works great for me as a guideline when I was creating the site on WIX.

RWD wireframes in desktop, tablet, and mobile version.

Prototype

Prototype in XD editor mode.

Design System

Design Decisions

The game has delicate 3D characters, props, and scenes that could tell stories. When deciding on the UI art style, I tried to use our beautiful works to communicate a story to the users.

Final Product

Takeaways

There is a limit to the amount of content a one-page website can display, so it is crucial to provide only the necessary information. To filter what to  show on the website, we have to understand users' purpose.
In terms of art, we pay attention to creating the atmosphere of the game when creating the promotion website. Fortunately, I am a developer myself, and with my knowledge of the game, I found the direction of the art smoothly.
It is a good experience website design in real life. In addition to practicing the UX theories I have learned so far, I also get an idea of the limitations of the website editors after using one like WIX.

Other projects