Connecting with kindness.
It’s my practice. I’d love to have you join.
Layers
Layer 2
Object 2
Topography 2
Texture 2
Layer 1
Topography 1
Object 1
Topography
Scale
12
Segments
Brush (px)
Lightness
128
48
File Name
50%
2D-3D
3D World
2D Canvas
File Name
50%
2D Canvas
2D-3D
3D World
Top View
Select
Explore Templates
Model Library
Upload Model
Create
Insert a prompt,
upload an image,
or draw your model
Type here...
Gorest: AI-powered game engine
2-minute summary
Project overview
Jump to any section
Interface ideation
Branding ideation
Final designs
Branding
Full Lifecycle Design
TASKS
1
Create intuitive interfaces for Gorest’s game engine
2
Rebrand Gorest for a modern outlook
APPROACHES
Clean categorization & layout to prevent visual overload
Non-intrusive, easy-to-override AI support
Cyberpunk aesthetic in a professional tone
FEATURED SOLUTIONS
File Name
50%
2D Canvas
2D-3D
3D World
Top View
Select
Explore Templates
Model Library
Upload Model
Create
3D Cube
Click to enlarge, Drag to apply
Tell me if you need any changes
Back
Type here...
Layers
Layer 2
Object 2
Topography 2
Texture 2
Layer 1
Topography 1
Object 1
Topography
Scale
12
Segments
Brush (px)
Lightness
128
48
File Name
50%
2D-3D
3D World
2D Canvas
MILESTONES
150+ interface iterations
13+ features prototyped
50+ logo and palette iterations
See full designs for...
Interface
Brand
INTRODUCING GOREST
Gorest is a startup with the unique vision to empower all game creators with their AI-powered game engine.
Their AI technology could transform 2D level maps into interactive 3D whiteboxes that game creators can use for testing. With Gorest, game creators can more efficiently test their ideas without having to make all their models by hand. Individual creators with less technical backgrounds are also empowered to create more sophisticated games that they did before.
THE PROBLEM (S)
1
Gorest is facing difficulties with designing a game engine interface that is intuitive for amateur game creators without sacrificing its functionality.
2
Moreover, Gorest is looking for a revamp of its current logo and palette, which they believe does not convey a modern and AI-oriented identity.
INTERFACE DESIGN CHALLENGES
The large amount of features and tools that have to be included in the product makes it easy for the first time user to feel overwhelmed.
13+ Features to be included -
Layers | Exporting | Texture application | Customizing textures | 3D model generation | Model library | Image upload | Applying marks | Customizing marks | Playing simulations | Changing views | Wall settings | Topography
Thus, I should ensure while designing that 1) interfaces are easy to navigate and clear in layout to prevent cognitive load, 2) unfamiliar features that involve AI should have obvious override mechanisms and not be intrusive.
Early stage iterations to show level of complexity
BRAND DESIGN CHALLENGES
Gorest’s current logo features the World Tree, which resonates with their vision to become the branches that connects different worlds and games. Yet, their current logo has a more vintage than modern aesthetic.
While Gorest hopes to have a more modern outlook, they also wish to represent their vision and current logo in their new digital identity.
When I design, I aim to 1) find ways that integrate the World Tree metaphor with a modern tone, 2) modify their palette to adapt a technical and gamified tone while preserving as much as the original colors.
Gorest’s current logo and palette (left), Gorest’s current website color scheme
Throughout the ideation process, we made a number of important design decisions. Here, I documented our thought process regarding the choices that made the most impact on our final product.
To devise the logo and palette that is most suited to Gorest, we started by ideating a large number of different options then comparing and selecting the optimal designs.
After many iterations, I present to you the AI-powered game engine that empowers all creators, Gorest!
PROPERTIES PANEL
KEY
File Name
Layers
Layer 2
Object 2
Topography 2
Texture 2
Layer 1
Object 1
Topography 1
Texture 1
Wall
Thickness (m)
0.20
Height (m)
3.00
Color
FFE1E1
100%
50%
2D Canvas
2D-3D
3D World
Does not cover the canvas when collapsed
Position is inconsistent with 3D World interface
Cannot view 3D properties on 2D Canvas
Layers
Layer 2
Object 2
Topography 2
Texture 2
Layer 1
Topography 1
Texture 1
Object 1
File Name
50%
2D-3D
3D World
2D Canvas
More obvious division between properties
Consistent with 3D World interface
Can view all properties in one interface
Slightly covers the canvas when collapsed
TOOL BAR
KEY
Icons with overlapping functions
Unecessary tools with limited usage (eg. eraser, uploading images)
Lack of categorization can create overwhelm
Removed icons with overlapping functions
Only the most essential tools on the tools bar
Categorization of tools to make learning easier
LANDING PAGE
Effective usage of space on left panel
A large logo can be mistakened as a decoration instead of a link back to homepage
Little emphasis on tokens left
Logo size obeys design norms
Clear emphasis of tokens left
Entrance to profile page
EXPORT WORKFLOW
File Name
New File
Duplicate
Export
2D Canvas
2D-3D
3D World
Layers
50%
File Name
2D Canvas
2D-3D
3D World
Top View
Select
Explore Templates
Model Library
Upload Model
Create
Insert a prompt,
upload an image,
or draw your model
Type here...
50%
Save to computer
File Name
Contents
All
Format
GLB
Save
More space to preview downloaded contents
6 actions needed before contents are exported
Exporting action spans 3 screens
File Name
2D Canvas
2D-3D
3D World
Top View
Select
Explore Templates
Model Library
Upload Model
Create
Insert a prompt,
upload an image,
or draw your model
Type here...
50%
File Name
Location
Unreal
Format
Open on unreal
Export
No need for separate preview before exporting
4 actions needed to export content
Export on the same screen as editing
Amount of windows may be overwhelming
INITIAL IDEATION
Warping the G in Gorest with a technological tone
“Whitebox doorways”
Integrating concepts of whiteboxes and AI
Modifying the old logo with a modern tone
Integrating G with modernity and the World Tree concept
COMPARISON & EVALUATION
Logos inspired by whitebox
PASS
Relevant to Gorest’s current product
Modern aesthetics
Irrelevant to Gorest’s vision and future series of products
Logos that center the AI concept
PASS
Relevant to Gorest’s central service
Too similar to existing logos of AI services
Irrelevant to Gorest’s vision and brand identity
Modifications of current logo
PASS
Relevant to Gorest’s vision
Too complicated to be easily memorized
Hard to adopt a modern tone with
A modern “G” with elements of trees
ADOPTED
Relevant to Gorest’s vision
Modernistic
Simple with a lasting impression
FINAL MODIFICATIONS
PASS
PASS
PASS
ADOPTED
PALETTE
Accent color 1
PASS
Green and brown resonates with the World Tree concept
Suggests a classic, nostalgic style instead of a modern one
Accent color 2
PASS
Suggests a gamified, modern identity
Too similar to accent colors of Unreal and Unity
Accent color 3
ADOPTED
Green associates with World Tree concept
Bright blue associates with modern and cyberpunk aesthetics
GENERATING 3D MODELS
KEY
APPLYING TEXTURE
KEY
EXPORTING