UI Design
I started by researching Apple's Vision Pro and Spacial OS to understand how AR would shape the user experience. From there, I designed the UI for key pages, including the Welcome Page, Landing Page, Settings Tab, Menu Page, and interactive features like catching Pokémon, Pokémon caught indicators, and Pokémon details, all tailored for a spatial environment.
Before diving into the design, I conducted thorough research to understand both the existing Pokémon GO user base and Apple’s Human Interface Guidelines for Vision OS. This helped set the foundation for designing an AR experience that is both user-friendly and in line with Apple's standards.
The research for the app was comparatively easier since this is an already established game and already has a set Target Audience varying from kids interested to play an interactive game all the way to adults who grew up with Pokémon.The likes and dislikes of the Pokemon GO community was also researched through different websites. SWOT analysis was also conducted on Pokemon GO which helped scope out the weakness and strengths.
One of the most important parts before starting with the UI design was going through Apples Human Interface Guideline for the Vision OS. These guidelines are like a handbook for designers and coders who are trying to design for Apple Products. Adhering by these guidelines assists in making sure that the UI design not only follows the rules Apple sets for their designs but also helps to make sure that the designs are User Friendly and accessible.
The initial sketches served as the foundation for the entire UI design, allowing me to explore and refine ideas. After finalizing the rough sketches, I created a low-fidelity version to ensure the design translated well into a digital format. This stage also allowed for key improvements to enhance usability.
The sketches is the fundamental base for the whole design as this is where the Ideation for the UI design takes place. After multiple rough sketches, the sketches were then cleaned up and done separately to finalise the ideas. The next step was to create a low fidelity version to make sure that it looked just as I imagined in the sketches. This low fidelity version would act as placeholders for the next step. During this stage, multiple improvements were made to make the design more user friendly.
To maintain consistency between the mobile and Vision OS versions of Pokémon GO, I reused many existing assets while adapting others to fit the new platform. Some icons needed to be recreated in Illustrator to better suit the Vision OS environment. This balance of old and new elements ensured a seamless transition across both platforms.
The mobile version of Pokémon GO , being released a few years ago had a lot of assets that could be used in the Vision OS version as well. Using the same or similar elements was key to keep the consistency between both platforms as the game would be part of both platforms at the same time. Some icons had to be recreated in illustrator since the mobile version did not fit into the Vision OS version.
The final UI designs showcase how each page has been adapted for the Vision OS environment. I’ll walk through the Welcome Page, Landing Page, Settings Tab, Menu Page, and interactive features like catching Pokémon, the Pokémon caught indicator, and detailed Pokémon information.
The Final prototype was a result of all the feedback recieved from the user testing, the wireframes, the clickable low fidelity prototype etc; Multiple more pages were added to the final since improvements were made. More signifiers were added for the save to later option, the add to cart option and the checkout as well. The checkout feature was improved since it felt one dimensional. I made 3 different pages so that the users can feel more organized while navigating through it.
The landing page is the page that will be used the most. The page follows the mobile version for the most parts by showing the possible Pokémon nearby, the user details, Pokéstops nearby etc; The settings button is located in the menu where it is not as easily available. During research and feedback it was found that people do not expect the settings to be in the menu for most parts. The settings was then added to the corner of the window to make it easier to access for users.
The settings in the mobile version takes the space of the whole screen. The Vision Pros having a larger window allows for the settings menu to be a side bar. This way the user can continue watching the screen while scrolling through the menu. The settings sidebar would be a scrollable as well to fit all information in the settings. The settings button turns into a close button once the sidebar opens so the users are still familiar with the button positions.
The menu page continues to use the green to the white gradient that is also used in the mobile version. This screen pops up when the Pokéball in the bottom is clicked. This menu contains 5 options which are displayed on the screen. Just as the settings button the Pokéball turns into a close button.
This window is the one that makes the most use of the AR feature on the Vision Pros. This allows the Pokémon to be featured in the real world. The Pokémon information is presented right above the Pokémon and the different features available on the screen are present next to it. If the information is not kept together, it would be lost with other windows in case any other apps are open on the Vision Pros. There is also a Pokéball present right underneath the user’s nose to allow it to be easier to throw the Pokéball.
Once you catch the Pokémon, you will require a signifier. It would be very confusing for the user if nothing is shown after the Pokémon is caught. This window solves that issue and also additionally shows a quick summary of information about the Pokémon that the user has caught.It also lets you know the sum of the amount of XP you gained once you have caught your Pokémon. Clicking the “OK” button would take the user back to the landing page where most of the game is played.
Once the user catches their Pokémon they can head into their list of Pokémons in the menu and then choose the Pokémon they want to view. Lets look at the new Haunter Pokémon that was caught. There are different types of Pokémon, the Haunter being a ghost and poison type causes the window to have a purple/black gradient to it and a bit of fog in the background as well. Each type will have a different window making the experience better. It will also be a clear indicator of what kind of Pokémon has been caught. The top part will show the Pokémon and its basic details like name, type, weight, height and CP level which are important for Pokémon battles.
