Designing Game UI for
A Survival game
To combine my interest in both design and gaming I decided to take a course UI design.
During the course I got to apply the MDAO (Mechanics-Dynamics-Aestetics-Outcomes) framework. Carefully concidering every aspect of the game in relation to the User Interface (UI).
A quick summary of
My Process
Research
- Research other games
- Conduct inteviews with target audience
- Create personas based on interviews
Plan
- Create a brief with game concept, MDAOs, Vison and Objectives
- Make a moodboard for design and aesthetics
Design and Test
- Create Low Fidelity (Lo-Fi) Wireframes and define frames
- User testing and feedback from teacher
- Analyze feedback
Design, test and polish
- Create High Fidelity (Hi-Fi ) Wireframe prototype
- User testing and feedback
- Final touch ups (based on feedback)
Research
To determine what game I was going to create UI i began researching different Surival Games. I looked at how other games had made their UI and asked what my target audience liked and disliked about other games.
By the end of this step I had created two different personas, one primary casual gamer that plays for fun named "Alice Lind". As well as a secondary, more advanced gamer that wants to be challenged named "Warren Buffé" (you will never guess where I got inspiration for that name).
Main take-aways
- A feeling of progression: One thing they have in common is wanting a feeling of progression. Although, for one the progression is mainly visual and for one the progression is more of a feeling.
- Be able to prepare for combat:
They also want to prepare, and progress by getting better at the game, not by chance or a random enemy showing up and killing you.
- Hunger/Stamina: I also realized what a vital part hunger should be in the game. It is important to balance gathering resources and building. In that way it matters and combat isn't the only "draining" thing.
Planning
After determenting some of the core mechanics of the game it was time to create a design brief. The brief featured MDAO-elements along with the Game concept:
"This will be an Open World, survival, 2D game. The player will have to manage their hunger and health in order to survive. The player will also be able to craft different objects to protect themselves - and decorate their surroundings.
It will have a minimal design to not add to, and not distract from the game. Mechanics vise it will be similar to games like “Don’t starve” and “Minecraft”, but with an art style that is more similar to Toca boca-games and the UI of Animal crossing.
It will be made to work on a smaller screen such as a phone, tablet or handheld console. This will make it easy for the player to take the game with them."
Moodboard
Lo-fi wireframes
I designed the wireframes based on the user flow - starting with the home screen and moving on to options and the choosing character menu. Then I added a HUD in both normal mode, and when you meet a boss. The "book" with crafting and other menus are in order (left to right).
.png?etag=%2232fa-65b11f7e%22&sourceContentType=image%2Fpng&ignoreAspectRatio&resize=1000,563&quality=85 "options (1)")
User testing and feedback - Part 1
For the first round of feedback I was reminded to double check what buttons usually do what, so that my game becomes more intuitive to the player. This led me to look at controls in simular games like Stardew Valley and moonlighter.
At that point I also realized that it would be nice for a not so experienced player to be able to find the controls. In the same menu it made sence to have the ability to remap buttons. This might primarly be a feature for more experienced player, but useful nonetheless.
Designing based on feedback
To create this controls-menu I added an image displaying controls for a switch in general.
When it was time for the Hi-FI wireframe I decided to recreate the switch controllers from the image in illustrator. This so that they would better fit the rest of the game with the colors and flat design.
Character design
AI generated images
I wanted to try out using Generative AI to create characters that would fit the mood of the game. Because I wanted to make multiple different designs without having to wait, I downloaded a program on to my computer and experimented with prompts until it looked they way I wanted it to look.
With my last try I wanted to generate a lot of images to have different characters to choose from. You can see the result to the right of this text.
Hi-Fi wireframes
The Graphic Profile for the game came from my moodboard, as well as the character images that I generated.
The two primary colors were a pink and blue color to create contrast between them. Other colors where mostly fairly minimal to help the other colors pop. The book is a beige paper color and the background of menus in general are a simular color. The text was black or white depending on the lighness of the backround, increasing readability and directing the players eye more to the colorful characters.
For the fonts I choose one handwritten-looking font (Mansalva), as well as a soft serif font (Roboto Slab). These fonts really worked well with the games soft, childlike aesthetic in a way that added to the UI and not distracted from it.
User testing and feedback - Part 2
After the final round of testing and feedback I came to the realization that I hadn't designed a screen for missions/quests. This because one of the testers pointed out that it would fit in "the book menu".
So before calling the project "finished" I added a new "missions"-tab and its content. To remind myself of what kind of menu usually looks like I booted up the new Avatar game (for research purposes only...) and cheched out some screenshots from other games.
Because I hadn't made a wireframe design of it I was heavily inspired by what was already designed so that it would look like it belonged. This also meant I could use my time efficiently.
