Ella Hanson
Contact Me
Crafting MMO Video Game
Skullborn
Skullborn is a Crafting MMO in early access on Steam. Players start in the world as a skeleton but can craft every element they add, including the bones themselves. Using blocks and slopes, the opportunities are endless. Other updates regarding Skullborn can be found on my Behance.
Vision
Announcement graphic (1 of 2 - Linked to Behance post)
Design a new crafting system that allows users to focus on creating their items rather than the menu itself. This new system would be an option after players create a Crafting Table. Based on the existing interface, players will be able to quickly understand and enjoy the new feature.
The Process
Ideate
User research
Game research
Team meetings
Gather
Define goals
& Immediate user needs
Create
User Flows
Lo-fi wireframes
Iteration
Prototype
Mid-hi fi wireframes
Mockups​
Conclude
Complete UI
Implement​
Test
Ideate
User Research, Game Research, and Team Meetings
Being an existing game when I joined, there was catching up to do to understand the game, the game's culture, and MMO culture. The game's Discord server gave access to tons of comments from players including their feedback, issues, and favorite parts.
Further research provided common hotkeys used in games, insight into how UI impacts world immersion, and other principles displayed in games.
Team meetings, although there were at most 3 of us, consistently kept my designs in communication with the developer. Using tools like Mural and Figma was vital for displaying concepts and encouraging collaboration. It was easy to organize all the information given early on in the process.
Gather
Define Goals and Immediate User Needs
-
Accessibility (all menus)
-
Font readability
-
Clickable-elements
-
Element reactions
-
Sufficient color contrast
-
-
Crafting Table
-
Item selection​
-
Block rotation
-
Block Placement
-
ability to move back to rotation with ease.​
-
-
-
Implementation
-
Unity Game Engine​
-
Update by Christmas 2022
-
BEFORE:
Create
User Flows, Lo-fi Wireframes, Iteration
Creating user flows was beneficial for the entire team in understanding the goal of the Crafting Table as well as the steps it would take for a player to get there. It was important to promote empathy early on to prevent the new system from adding complications. Based on the flows, low-fidelity wireframe sketches began both on paper and in Figma.
How the Figma board started...
User Flows
Made in Mural. Tap or click a flow for a larger image
Prototype
Mid-hi Fidelity Wireframes, Mockups
Throughout this project, I became closer than ever to Figma. Specifically becoming familiar with Prototyping interactions. Many new concepts require a visual to sell and knowing my tools has helped me do that seamlessly.
Interaction Examples
Conclude
Complete UI, Implement, Test
Designing Menus and Icons
-
Reflect crafting nature of the game
-
Accessible by both hotkeys and mouse clicks
-
Highly readable
-
Clickable (if applicable)
​
Choosing Fonts
-
Needed text for subheaders, body text, and Chatbox
-
Subheaders (Ode Regular)
-
Targets readability and old-timey feel
-
-
Body text (Ode Medium)
-
Readable and fits game aesthetics
-
-
Chatbox (Arvo)
-
Blocky and monospaced helps to read quickly. Aims for readability only, not aesthetics.
-
​
Choosing Colors
-
For the bulk of elements, a white, dark gray, several blues (previously incorporated), and gold.
-
FCF5E3​ (White) - Backplates, Text​​
-
36444C (Dark Gray) - Backplates
-
4BACE1 (Blue #1) - Dark Accent
-
75BED6 (Blue #2) - Light Accent
-
C3DEE6 (Blue #3) - Soft Accent
-
FCDC5D (Gold) - Buttons, clickable elements
-
​
Implementing into Unity
-
Implemented assets and accessed projects through Git
-
9-sliced images to serve as resizeable menu backplates
-
Created and implemented Unity Prefabs
AFTER:
Before and After pics (as well as updates) available on my Behance
