Fictional Game Concept
Personal Project
1 week
October 2024
UX Designer
CONTEXT
This was a Fictional Game Project showcasing a Space Ship Customization. This case study aims to show how I approach design challenges and my commonly used work flow.
Note: I do not own any of the 3D images used for placeholders.
DEFINING THE OBJECTIVE
GRAYBOXING
Quickly generatating layout ideas
I usually begin with grayboxing to quickly experiment with layouts and generate various ideas. This is a quick and simple way to get a feel for what works and what doesn’t. It saves me a lot of time, and I don’t have to add any details to validate the base structure.
GRAYBOXING THAT I SCRAPPED
Exploration 1 (To the left)
This one I decided to move away from because the distance between the components at the top and bottom felt too far away. I didnt get a good flow for the visual hierarchy either and everything felt random.
Exploration 2 (To the Right)
This one felt better but still not great. The distance between picking components and equipping them in the slots was too far. Overall it just felt kind of cluttered.
WIREFRAMES
Making the vision more tangible
Once I have the grayboxing down I start adding more details with lo-fi wireframes.
How I approach Lo-fi Wireframes
Easier to visualize the design
Lo-Fi Wireframes helps me visualize what the final design can look like. Here I explore with adding more details to see if it would work or not.
I grouped the Component List into 2 categories, one for weapon and one for utilities.
I wrote out all the stats of the ship to get an overall idea of how much space the area needs.
Why I use grayscale
I always work in Grayscale for my Wireframes, this is to keep the focus on the functionality and to test if the design makes sense when I ask for feedback.
If I introduce colour too early, I risk the feedback being more about aesthetics than usability, which I want to avoid at this stage. Grayscale keeps the attention on the core design elements before moving on to visual details.
'
”Why is that blue?” Is the last thing I want to hear at a Lo-Fi Wireframe stage.
THE HANDOVER
OVERVIEW
Dev handover process
My handover process tend to always look the same or very similar to the following:
Overview of the design
I add comments and details to all elements in a fullscreen view, where everything is visible. Seeing the design in its final context makes it usually makes it easier to understand and grasp.
UX Flows
I make different flows depending on what the design needs most clarity with, This can be anything from userflows to taskflows.
Components Breakdown
I define all of the components and their various states.
thanks for visiting
SARA - 2025 - STOCKHOLM