.
.
.
.
.
MOBILE REDESIGN FOR
Pokémon Legends: Arceus
.
UI / UX DESIGN
PERSONAL PROJECT
.
.
Overview
.
In-Game Screenshot (click to view)
My Final Mockup (click to view)
.
Pokémon Legends: Arceus is a video game for the Nintendo Switch console. I did a redesign of this game, converting the controls and interface for a mobile (phone) platform.For this project, I created the following during the design process:
.
.
.
.
Wireframes (First Pass)
.
Wireframes (top to bottom): Walk, Aim, Battle
(click to view)
.
.
Main Goals:
.
Mimic conventional controls (ex: movement on left, actions on right)
Remove extraneous information (ex: items and Pokémon team are not necessary to access until aiming, so hide them unless aiming)
.
- I made the Ride Pokémon an accordion menu so they are easy to access but can be hidden.
- I put the item bar on the bottom of the aiming screen instead of keeping a carousel to make it easier to select an item. The carousel was necessary for controller, but a touch screen allows more options to be available for selection.
- I was able to keep a lot of the battle button format as this is already an interface.
- I made the Ride Pokémon an accordion menu so they are easy to access but can be hidden.
- I put the item bar on the bottom of the aiming screen instead of keeping a carousel to make it easier to select an item. The carousel was necessary for controller, but a touch screen allows more options to be available for selection.
- I was able to keep a lot of the battle button format as this is already an interface.
.
.
Wireframes (Second Pass)
.
Wireframes (top to bottom): Walk, Aim, Battle
(click to view)
.
.
After playtesting, I adjusted the wireframes:
.
Moved buttons to make navigation more comfortable and minimize misclicks
Changed icons on the battle menu to be clearer
.
- I playtested with people familiar with playing Pokémon Legends: Arceus and people familiar with playing 3D mobile games.
- I moved the menu buttons to the top of the screen because players felt they were hitting them on accident while moving
- I switched the crouch and roll buttons because the crouch button is used more, and it was a bit more comfortable to hit the higher button.
- I moved the aim and cancel aim buttons and put the throw button in their place. This was the most natural place for the thumb so it is better to have the button the player needs to access the most quickly and frequently there. The aim button is also adjacent for quick access.
- The aim button visually on the walking screen is smaller for a cleaner aesthetic but would accept input from the same area as the bigger cancel aim button on the aim screen.
- Most players thought the Pokéball icons in the top right of the battle menu were for the player's Pokémon, so I changed them to old Pokémon sprites. In reality, these icons would instead be the in-game Pokémon headshots so there is less confusion, but for now I used the sprites as stand-ins.
- I playtested with people familiar with playing Pokémon Legends: Arceus and people familiar with playing 3D mobile games.
- I moved the menu buttons to the top of the screen because players felt they were hitting them on accident while moving
- I switched the crouch and roll buttons because the crouch button is used more, and it was a bit more comfortable to hit the higher button.
- I moved the aim and cancel aim buttons and put the throw button in their place. This was the most natural place for the thumb so it is better to have the button the player needs to access the most quickly and frequently there. The aim button is also adjacent for quick access.
- The aim button visually on the walking screen is smaller for a cleaner aesthetic but would accept input from the same area as the bigger cancel aim button on the aim screen.
- Most players thought the Pokéball icons in the top right of the battle menu were for the player's Pokémon, so I changed them to old Pokémon sprites. In reality, these icons would instead be the in-game Pokémon headshots so there is less confusion, but for now I used the sprites as stand-ins.
.
.
Interactive Prototype
.
Interactive Prototype (click to try it)
.
.
I created an Interactive Prototype to test my designs further. I received positive feedback from playtesting with this prototype, and players had less confusion with more context compared to the wireframes.
.
.
.
Style Guide
.
Style Guide Pages (click to view)
.
I created a Style Guide based on the original game and adjusted for my mobile layout.
.
.
.
Final Mockup
.
Final Mockup (click to view)
.
I made a Final Mockup for what my design would look like based on my Style Guide. This also received positive feedback when I showed it to Pokémon Legends: Arceus players.