About This Project

QuickGa.me is an online game engine for game developers to easily create 3D multiplayer games without the need for game developers to have server hosting and network coding from the users.

Status: The platform is still under development

Duration

• Research: 6 hours
• Wireframe: 24 hours
• Color Testing & Mockup: 16 hours
• Style Guide: 8 hours

My Design Process

Client's Request

• Redesign UI (Simplify current layout)
• Overall Theme (Semi-Professional & Dark Theme)
• Style Guide
• Prefer not using too many images in the new layout to prevent web traffic

Identifying Design Problems

• The overall layout is cramped with info
• Too many layers of navigation all on the left side of the screens
• Main editing/preview screen on the right side
• Reusing icons
• Missing icons on the top nav
• Font size & Font type

Competitive Analysis

The client is aiming to construct a web-based semi-professional platform with a dark theme

Research Direction

• Web game engine
• Semi-professional game engine
• Dark Mode

Scratch https://scratch.mit.edu/

Gdevelop https://gdevelop-app.com/

Gdevelop Dark Mode

ct.js https://ctjs.rocks/

ct.js Dark Mode

Scratch

• Having 2 layouts for users to choose from
• Picture of each item (sprite, background, etc) with a delete button next to it
• XY Axis has a smaller text area
• "Show" using buttons with icons instead
• The editor screen in the center of the screen
• Having categories tap separated and labelled with icons (code, costumes and sounds)
• Rounded textarea

Gdevelop

• Picture of each object next to the name of the object with a menu button next to it for dropdown
• XY Axis & width and height have a smaller text area
• Taps underneath the main nav bar
• Having categories separated and labelled (properties, objects and layers)
• Objects panel on the left or right side while the properties panel is on the other side
• The editor screen in the center of the screen
• Search bar to search for objects to edit the properties
• Used different types of blue colors in the dark mode

ct.js

• Picture of each object next to the name of the object
• Width & height have a smaller text area
• Thin line used for highlights
• The main nav bar was resized with icons
• Dark Blue or Black would look a bit more professional in general
• Black background color with a light color for contrast
• Done button floating at the bottom of the screen

Features

At this stage, I have to understand some features of the engine. The main reasons are:

• To see if it is flexible and efficient for users
• To see if it is using icons & phrases users are familiar with
• To see if there's any help & documentation

These are parts of the 10 usability heuristics for the upcoming UI design (wireframing and mockup).

Flexible & Efficient (Convenience):

• Suggested having search bars to search up the objects that they want to edit as there would be a lot of objects for developing games
• Suggested using collapsable to minimise the not frequently used functions for the amount of information on the navbars
• Suggested an editable slider instead of separating it into a slider and a textarea, so users still have the freedom to choose from how they want to edit while minimising the design

Match between the system and the real world (Familiar phrases/icons for users):

• For example:
  • Label text of "Animation Frame" to "Key Animation"
  • Audio Icon: From image/picture icon to headphone
  • Models Icon: From image/picture icon to a 3D cube

Help & documentation:

• adding question mark/information icon for labels that are hard to understand for a popup window to show further explanation

Wireframing

Figma: https://www.figma.com/file/Y44X0K01umB1i9N6yFGTkb/Editor?node-id=0%3A1

Main focus:

• consistency of the panels
• minimising the design and well organised