XR Design Fellowship
Module 1 Assignment: Apple visionOS Concept
The assignment was to design an app for visionOS. I decided to try Pokémon GO, which is an app that I am highly anticipating the (eventual) full release into AR! Most visionOS prototypes are for indoor experiences that occur on panels in the center of your viewpoint, but in this prototype I wanted to explore what things could look like when those panels are supplementary to your experience instead.
Research
Pokémon GO Key Features and UI
For this portion of the research, I gathered screenshots of every major feature in the app as well as a Pokémon GO UI pack to use real assets for prototyping. The goal was to determine which features would be most important to include in a spatial “default view” of the visionOS Pokémon GO app.
The default view of the current Pokémon GO app is the map view, where you can find Pokémon spawning as you move around in the real world (through GPS) as well as static destinations like Pokéstops and Gyms to interact with.
The most exciting part of the Pokémon GO hype has been their advertisements that enact all of these interactions in the real world. In fact, this has been the subject of their ads since the initial game trailer back in 2016 with Pokémon popping up in front of you or hiding around the corner.
To maintain the functionality of the current app, the map would need to be a secondary view with access to the various menu features. During Pokémon encounters, items could also be accessed in a secondary view or as a hand-tracked selection menu.
Apple visionOS
To prepare for this project, I started my research with the official Apple visionOS developer guidelines and designer resources, which includes an introduction to the spectrum of immersion on Apple Vision Pro as well their official UI templates for Figma.
For the case of Pokémon GO, the experience would primarily be a mixed reality outdoor “space” utilizing the real world around you as the backdrop.
From there, much of the UI content in the current app could be relegated to flat “windows” (e.g., the map, inventory, etc.).
Objects added into the mixed reality space would be displayed in 3D as “volumes” that include spinnable Pokéstops, items, and—of course—the Pokémon themselves.
Environments that would likely require the use of “virtual” spaces would include remote raids and online battles, since the user would not be in the correct physical space.
Bezel Prototype
As per the assignment recommendations, I decided to try using Bezel for my initial pre-lecture prototype.
For the backdrop, I made a spherical background using Blockade Labs’ Skybox generator that resembled an outdoor environment. The result felt a bit cartoony, but I figured it would work for an initial concept.
From there, I started by adding in elements you would see in the environment, such as Pokémon and Pokéstops. As for the supporting information in nearby windows, I started with the map, which is the default view in the current app, including the profile icon and level information, which is usually displayed in the corner of the map UI. Instead of the Pokeball icon populating the menu icons, I populated them on a button tray.
Where I struggled with the prototype was in the 3D aspect. Since I don’t have the right 3D assets, it was a struggle to position flat objects in the Bezel environment.
Figma Prototype
For the final assignment update, I decided to switch to Figma so that I could not only utilize some of the official visionOS components but so I could have better control over using flat objects for the prototype.
This simplified view is a lot cleaner and only includes what you need at a glance. The map panel is accompanied by a toolbar with the icons originally in the main menu for easy access while the right side shows active items, such as Pokeballs and berries, that you can swipe through while catching a Pokemon.
Although this version of the prototype doesn’t include any interactions, I believe that the simpler design style better matches the minimalist Apple aesthetic.
I learned a great deal from this exploration and am excited to continue on this journey of the design fellowship!
That's all for now!
That's all for now!
Eager for more?
Click the button below to check out some other projects!