2022 | UI Redesign Exercise
POKÉMON GO - RAID UX REDESIGN
A personal project & UX exercise - exploring updating the UX/UI for Niantic's 2016 mobile title, Pokémon GO, to make raids more visible and accessible to players.
​
Made using Adobe Illustrator.​​
This is in no way affiliated with Niantic, Nintendo or The Pokémon Company; it is a personal project.
ISSUES WITH THE RAID SYSTEM
A struggle for many users of Pokémon GO is finding other users to complete high-difficulty raids with.
-
As expected, the higher the difficulty rating a raid is, the more players are needed for the raid to be a success; unfortunately, there are issues with the raid system that prevent players from finding raids with active lobbies.
-
Being unable to participate in raids results in users missing out on unique, time-limited Pokémon - and in being unable to complete raid-related challenges.
-
Conversely, players participating in solo raids also take issue with the long lobby wait times (it takes 120 seconds for a raid to start after the lobby has been opened).
REDESIGN AREAS OF FOCUS
There are 3 key areas of improvement with this system that I have focused on:
​
1. Visibility:
-
When looking at raids on the overworld, there is no visibility on the number of players in the lobby.
-
To see how many/if there are any players waiting in the lobby for a raid, the player has to tap on the gym and open the Raid Overview screen.​
-
Similarly to the above, there is no visibility over the number of players in a raid lobby when looking at the local raid list UI.
-
​(The only way to see how many players are in a raid lobby is to open the raid splash screen on a gym).​
2. Raid Lobby Management:
-
When players send a raid invite, the invited player will be given an app notification on their mobile device; they can use this to open the ​app - however due to long loading times when launching the app, the raid may start before the player is ready.
3. Communication:
-
Players cannot make it clear to nearby players that they intend to start a raid.
HUD CHANGES
To address the visibility issue, I added a lobby counter to the raid UI on the overworld.
-
Players can now see how many players are in a raid lobby at a quick glance on the overworld.​
For the sake of cleaning up information hierarchy and layout, I also made some other minor changes to the HUD:
-
I gave the player level and name in the bottom-left corner of the screen a dark background - so the light text is still readable in light environments.
-
I also re-arranged the HUD elements at the top of the screen: so navigation/environment information elements (the weather and compass) are on the left side of the screen, and the Rocket Radars are on the right.
-
I have contained the weather and compass in a button backer too, to highlight that these elements can be tapped to open pop-ups.
Redesigned (raid countdown)
Redesigned (raid started)
Original HUD
LOCAL RAIDS PANEL
Addressing the visibility issue, I have removed the Local Raids tab from the "Nearby Pokémon" panel, and gave it its own UI and button prompt on the HUD.​
-
This makes the UI easier and quicker to access, by not hiding this information behind other layers of UI.
-
There is also the opportunity to add a "new notification" state, for further visibility on new/active raids.
​
Similar to the HUD, I have also added visibility over the number of players in a raid lobby to the Local Raids menu.
Redesign
Original UI
RAID NOTIFICATIONS
Currently, players receive an in-app notifcation when a raid egg has hatched and a raid has opened up to be taken on in their local area; players also receive notifications when they receive an invite to a raid from a friend.
To improve the visibility and communication of starting raid lobbies, I propose adding a third notification; when a raid lobby has been started in one of the local raids. This would mean there are 3 raid-related in-game notifications, for when:
-
A raid egg has hatched and a new local raid is ready to be challenged.
-
A raid lobby has opened up for a local raid.
-
The player has received an invite to a raid lobby.
​
Tapping any of these notifications should open the related raid overview screen.
Redesigned Notifications
Original Notification
Redesign (HUD)
Redesign (Raid Menu)
RAID OVERVIEW SCREEN
For the raid overview screen, I did not make any changes relating directly to the goals I have set out; instead, I have updated information hierarchy to make things easier to find.
Currently, information feels spread around too much on the screen, with some elements feeling as though they are floating in space. The changes I have made are:
-
I grouped together the raid information at the top (gym name, raid rating, and time till it ends).
-
I updated the lobby player number icon and text layout to keep consistent with other areas of UI.
-
Added a container shape to the "private group" button to make it clearer that it can be interacted with.
Redesign
Original UI
RAID LOBBY
For the Raid Lobby screen, I propose adding a "ready-up" system. Similar to other "ready up" systems in games with lobbies, once the majority of players in the lobby are "ready", the count down to the raid start will be reduced to 5 seconds, allowing players to skip the long wait time to get into the raid.
​
I would implement this in lower-difficulty raids, as long wait times for solo raids has been a criticism of the game since raids were introduced in 2017.
​
I would be hesitant to Implement however - as this would be counter-intuitive to the goal of encouraging players to take part in higher-difficulty raids as groups, and this would encourage players to not wait for others to join.​
​
When a player is "ready", there should be a few indicators of this:
-
The text above their character will go from displaying "Preparing..." to displaying "READY!"
-
The shadow under the player model will change to orange, and "ready" VFX will trigger at their feet.
​​
I also made some minor layout changes:​
-
Moved the "invite players" button to beside the lobby player count.
-
Removed "finding other players" text; the implication is already there as this is a raid lobby with a timer, and this text is taking up screen real-estate that could be used for more important information.
-
Decreased the size of the player faction icons, and gave them a drop shadow so the icon stands out more.
-
Reformatted the player character text;
-
Removed the "level" text from the player level, and moved the level number up next to the faction icon.​
-
Added a black outline to the white text, so they stand out better against the background.​​​​
-
Redesign (not ready)
Redesign (ready)
Original UI