Client: Self
My Role: UX Researcher, UI Designer
Background: The Legend of Zelda: A Link to the Past was released for the Super NES in Japan in 1991. It is the third game in the Legend of Zelda series and is known for establishing many of the game’s classic tropes, such as the Hookshot, the Master Sword, collecting pieces of heart, and the existence of two parallel worlds. While the game is a cult classic, the UI is basic, unintuitive, and does not hold up to today’s standards.
Objective: I have taken it upon myself to use my experience in UX/UI and knowledge of industry standards to completely redesign the UX and UI for three screens- the overworld, the inventory, and the shop.
Stage 1: Research
Analyzing the UI
I analyzed and broke down all features and UI for 3 frequently used screens - the overworld, or your main view when you are playing, the shop, and the inventory screen. Many icons are unclear, the buttons to complete an action are not stated, and the inventory could use organization.
Testing the Game
I put together a series of tasks to complete in the game that would require the testers to interact with all the UI screens. I then conducted two moderated in-person tests. I purposefully found people of difference experience levels, and asked them to play the original game on the Nintendo Switch and complete each task. I asked them how they were feeling throughout the playthrough, which parts were frustrating, which were easy, and if they wish something was different. The test subjects needed to complete these 5 tasks:
Identify what all the UI elements on the main screen are
Attack an enemy
Open the inventory
Equip an item
Buy something from a shop
Tester #1
An experienced gamer. He has not played this game before but has played other Zelda games.
From left to right - “A green bar, no idea. Then the weapon I am using, money, bombs, arrows, life remaining, the red hearts are how many i have left. Once I used a magic item I understand the green bar is magic power, maybe it should only show when i have a magic item equipped?
“I didn’t realize I still had my sword equipped, I thought it was just arrows. I think the bow is a special item and my sword is always the main attack.” Defeated the enemy with sword.
“It took me a while to figure out how to open the menu. I pressed every other button before pressing the plus button on my switch”
“There should be maybe a sound or a frame around which item is equipped. I didn’t know what was equipped otherwise.”
The shop was easy enough to understand, the prices are there next to the items, but when I select an item it doesn’t tell me what it is. I bought a medicine without knowing what it is. I wish they would ask if I wanted it first without just buying it.
Tester #2
An inexperienced gamer. She has not played this game before.
She didn’t know what the green bar was. “It says ½. Maybe it’s 1 out of 2 tries. Then there is a bow and arrow, maybe it’s the weapon I am holding. The next are what i have in supply, 999 crystals, 20 ore, and 45 throwing hammers. The one on the right is my life counter, how much strength I have.”
She killed the enemy easily. “That was easy.”
She first opened the map, then cycled through all the attacks. It took 15 seconds to open the inventory. She understood that it shows what items she has. Thinks you push “A” to equip an item. Knew that the bottom section was actions.
“Doesn’t seem intuitive to use an item. Eventually I figured it out but it should tell you that an item is equipped.” She didn’t know the boomerang was equipped until she closed the menu. She wanted to use the potion in the inventory system, she didn’t realize it needed to be equipped first.
“The shop was easy.” She bought an item easily. But she thinks it would be nice to know what the items are first.
Competitive Analysis
I then looked at the same 3 screens with 3 new games that have notably good UI and inventory management - The Legend of Zelda: Breath of the Wild, Animal Crossing: New Horizons, and Stardew Valley. I analyzed how they tackled each feature and what they chose to display. Then I compiled all the features across all the games and organized them into a feature matrix.
Stage 2: Define
Personas
POV Statement
Feature Matrix
Stage 3: Design
Initial Sketches
Wireframes
Final UI
Stage 4: Test
User Testing
I conducted two more moderated in-person tests with my new UI screens. Since this is not a playable game, I came up with new questions to ask related to the intuitiveness of the screens. I asked them these 6 questions while showing them each screen:
What does each symbol mean on the overworld screen?
What button would you press to attack an enemy?
How would you buy an item in the shop?
How much does the red potion cost?
How would you cycle through the categories in the inventory?
How would you equip an item in the inventory?
Tester #1
Tester #1 is an experienced gamer that is familiar with video game mechanics and game UI.
“It looks like my life, the number of arrows, number of bombs, and money on the left. Then it tells me which button to press to open my inventory. Below that it gives an action guide for the main buttons. on the bottom right is a mini-map.
“I would press A to use the sword.” He came up with this answer immediately.
“I would press B. That is very clear”
“150 rupees”
“I would press the left and right buttons no my controller”
“Press A”
Tester #2
Tester #2 is an inexperienced gamer that is not familiar with video game mechanics or game UI.
“How many I have of each Bombs, arrows, jewels to buy stuff. on the bottom left it shows me what my buttons do. Y shows me my magic level. The bottom right must be the local map.”
“I would press B”
“I would push A because it says buy.”
“150.” She said it very quickly.
“The left and right buttons on my controller. Items versus clothing versus gems.”
“I push A.
User Pain Point Analysis
What's Next?
My profession is UX/UI, my passion is videogames, and my hobby is looking at the intersection between these two. You can read more about my research on this topic on my Medium Blog. I update it weekly with new case studies and topics.