Sol

About
Led the UX/UI design of a 3D space game, where I helped design the interface for all on screen elements, usability of quests, and hosted play test sessions. For several months, I worked closely with programmers, artists, and other designers.
Results
Launched a 15 minute tech demo for Indy PopCon 2016
The Game
Welcome to Sol
A 3D exploration game told through the eyes of a rover, who was activated to investigate the disappearance of missing colonists
Explore the Planet
Traverse mountains, dive deep into caves, understand pre-existing relics, and complete your mission
Solve Puzzles
Use your critical thinking skills to solve puzzles blocking your path to success
Craft Items
Discover recipes and craft items like ropes or bombs to help you uncover areas to explore
Design Process
Problem Space
For this case study, I'm going to focus only on the menu design. I started my design process by first benchmarking and evaluating the current usability of the menus. To do this, I conducted my own heuristic evaluation and hosted multiple play tests to observe players interact with the systems. Some key findings were:
  • Transparency of menu components made it difficult to read labels/text
  • Font type and weight of labels/text need to be more easily read
  • Difficulty distinguishing the difference between "container" and "inventory"
  • UI components are placed throughout the screen, organization could be improved
On the left, screenshot of the game. On the right, observing someone playing the game.
Exemplars and Sketching
After finding the issues, I looked at a wide variety of popular games to use as exemplars for my menu design. These exemplars are important because they helped me find proven and tested design patterns for in-game menus.

After understanding existing design patterns, I sketched various iterations of how the UI could look and feel.I had to consider the core game mechanics and what information needed to be presented to the player. Sketching allowed me to explore what is possible and understand what aspects of UI were most important for the player.
Example menus from other games
Example sketch of the user interface, focusing on how someone opens containers

Initial Wireframes (high fidelity)
After sketching, I created wireframes using Adobe Illustrator to help visualize the system of interactions within the UI. I created the different menus a player would interact with: inventory, crafting, logs, settings, etc.

Completing this first round of wireframes helped me gain clarity into the different functionality needed for the player. In addition, I was able to prioritize the content shown within each screen. Lastly, I sat down with players and tested by having them walk through the menus to see if they had any difficulty.
Screenshot of the UI flow
A close up of some of the menus
Iteration
Upon completing the initial wireframes, our team was able to identify what components we were missing and/or needed to add to the menus. The exercise was helpful to visually articulate our menu system.

However, our team decided to pursue an interconnected menu system to appease player's mental models from previous games, making it easier for them to pickup our menus. So I iterated and presented a different style.
Screenshot of the iterated UI flow
A close up of some of the iterated menus
Interactive Prototype
Next, I then created an interactive prototype using MarvelApp and recruited players to run through usability tests. The purpose of these tests were to measure the usability by observing error rate and the completion time of tasks. Through testing with several players, I found a few issues with my current design:
  • The labeling of headings were unclear for settings and game
  • The crafting and inventory menus looked too familiar
  • The crafting menu's ingredients could be more clear as to what you have and don't have
I fixed the issues I found and then pursued to implement the wireframes into Unity.
Implementation
I worked closely with our programmer to ensure the wireframes were implemented in a way that made it easy to script.

The purpose of implementing the wireframes into Unity was to allow us to test the menus during gameplay. We also applied sample art to the design. With this, I was able to test the usability, look, and feel for the menus that were hooked up in time for our weekly testing sessions!
Wiring up the mockups in Unity
How the menu looked in game with art style applied
Final Thoughts
I enjoyed applying my UX, UI, and research expertise to the domain of video games. Most importantly, I gained quality experience collaborating with an indie game development team and was able to gain more experience designing HUDS, onboarding, tutorials, and the usability of puzzles.

In the end, the game was put on hold and is unlikely to be worked on anytime in the near future. It was a fantastic experience and I hope to work on a new game project in the near future. If you're interesting in collaborating on a game, feel free to reach out to me!
Hosting a play test session