The Legend of Zelda: Breath of the Wild is a game for the Nintendo Switch, which can be used as a mobile device and brought with you wherever you may go. However, this comes with some risks and since the game is targeted towards kids and young adults it is important to think about safety with these devices. Another thing to consider is that not every kid has access to a Nintendo Switch, but a majority of kids have access to a mobile phone of some sorts.
Creating a version of the game for mobile devices would allow more accessiblity to the game itself since it would reach a larger group of people. In order to create a successful mobile version of this game I had to understand the game mechanics and condense them onto a mobile screen that was easy to use. The UI would have to be in the same branding of the original, and not overpowering as to block the game itself when being played. To succeed in this I had to prototype the game using Figma, altering the components of the game itself so that they would translate to a smaller screen.
Skip to Final ProductUX/UI, Game Design, Mobile Game Development
24 Weeks
Solo Project
User Research, Market Research, Prototyping, Usability Testing, Design Systems
Figma, Adobe Illustrator, Adobe After Effects, Adobe Premiere Pro
In order to better understand the target audience for this game, I needed to figure out how many people owned a Nintendo Switch, and what age groups used the console the most. One of the most suprising finds was that the majority of Switch owners were between 20 to 30 years old. This helped me understand that kids most likely didn't own their own console, and had no way to play Zelda unless they used the family console.
In order to understand the process of creating a video game UI, I had to understand the different types of UI and their usage. I learned an interesting fact from the developers working on BOTW as well. I considered this as advice for creating the game’s UI and wanted to do my best to replicate their ideas as I progressed with my solution. This idea of using triangles to point the user in directions made sense to me as a long-time Zelda fan. I started to realize how this rule helped guide me in-game and using the current menu systems. Matt continues to describe how using triangles gives the players two objectives; go straight over the triangle, or go around. We can see triangles used a lot in-game as visual objects, but we can also see how the menus interact with each other in a structured way.
“Breath of the Wild used something called the “triangle rule,” which refers to using triangular structures in the game’s world to give players a pair of primary objectives, as well as a compelling experience.” - Matt Walker
The game is packed with tons of different pieces of information coming at you all at once. This adds lots of features to look at while playing and can easily overload the eyes while trying to play the game.
The controls for the game are unique to the game pad you use on the Nintendo Switch. In order to have the same control over your character you need to have access to various actions in game.
The game has a way to swap weapons in the middle of a fight that is simple and flows well all while locking onto something like an enemy. This is an issue for mobile games since you don't have access to the bumper on a controller, assuming this is not a controller supported mobile game.
With a list of controls and an audit of the Switch version of the game, I could begin drawing out what I thought would take up the least amount of space. For this project, I wanted to create components that shared a likeness to the original game. The UI shouldn’t be a re-design, but rather a recreation of pre-existing components working within the Design System of the brand.
Consolidating a Design System in Figma allowed me to bring my paper drafts onto the computer and begin development of a prototype. Although there is a lot of detail that remains to be explained, I was able to produce a a few screens that helped justify my choices when creating this version of the game.
My first draft started by staying consistent with the Nintendo Switch controllers layout. I used letters to label each button to correspond with the action they originally performed on the Switch. Although this made sense for anyone coming from the Switch, it didn’t make sense for new players and I realized it could possibly get confusing. I decided to ask some players what they thought and tried a bit of user testing. The user testing I conducted gave me a lot of feedback, but the most important pieces were that the buttons should have icons resembling the action you would perform and that the D-pad on the bottom left gets in the way too much, and could cause issues with playing.
Having a clickable prototype helped me greatly when testing the space between buttons and overall reach of fingers when holding a phone. I used an Iphone 12 Pro Max when testing and had various people click through the prototype. After understanding their feedback, I was able to produce a short video showcasing what this game would look like on a mobile device.
Using my knowledge of Game Design and Interactive Design, I was able to create a mobile screen that would fit comfortably in your hand. The buttons are laid out in a way that allows anyone to pick up the game and play it no matter your age. I want to focus next on creating a UI that makes it more accessible to everyone, especially for those who may need to play with one hand. The Design System I have created for the mobile verison will allow me to create more iterations in the future.
Doing this project taught me a lot in 24 weeks. I learned how to use Unity to create a menu, even if it didn't end up useful for creating my MVP. I learned how to create and manage Design Systems for video games, and what is useful when resizing certain components. I learned how to efficiently use Figma to create an effective prototype for a mobile game. Creating a video game requires you to map out the process and constantly iterate on what will happen in the game and on screen. Most importntly, this is the first time I used UX Design to recreate a game, and it taught me UX Design in Video Games.
If you would like to hear more about my process, feel free to contact me.