Beasts of Maravilla Island is an feel-good exploration adventure that we released in June 2021. Players travel through different biomes of an island, traversing puzzles and photographing mysterious wildlife to store as memories in your photobook collection.
client
Banana Bird Studios, LLC
services
Wireframes, UX Design, Qualitative Research, Clickthrough Prototypes, Accessibility Review, User Flowcharts
timeframe
September 2020 - March 2021
My role
I joined the team as a UX consultant in the summer of 2020 and worked closely with the director to understand business needs, the lead designer and usability specialist to reference prior research, and lead engineer to combat technical limitations to find design solutions that were considerate of time constraints and their development structure.
the problem
While photographing creatures, players were unaware as they approached the photo count limit. Upon exceeding this limit, they were suddenly taken out of the camera mode with no prior knowledge.
the solution
The new camera mode redesign provides a photo counter while the new photo overflow experience offers much needed guidance to replace an existing photo or discarding the newly taken one.
the right problem - identifying opportunity
As a player exploring the island, I want to be fully immersed in the world of Maravilla and freely photograph all its inhabitants.
I first gathered all the necessary knowledge around technical limitations within the existing Unity framework. The main constraint - and compromise - was the inability to store an infinite number of photos per creature. These were the initial designs for the photo replacement flow when I joined:
I broke the problem down to two core challenges:
1. The player has no visual feedback on how many photos left they can take. They’re either expected to keep a mental headcount of photos or continue shooting until they suddenly hit the limit.
2. Once the player goes over the limit, the overflow prompt instructs them to either discard the recent photo or replace an older one. The design is jarring to the unbeknownst player, lacks guidance, and ultimately breaks game immersion.
competitive analysis
Our initial research began with camera mode exploration in other popular titles and how they handled their language and player guidance. Titles of other genres and how they displayed pertinent information to reduce cognitive overload were also studied.
Zelda Breath of the Wild
BotW had two locations to store photos, a compendium and an album. The compendium allowed only one photo per unique creature. If there was an existing photo of a creature, the player would be prompted to keep the old or replace with the new photo, much like Pokemon Snap. The album saved any photo up to the max of 48 photos was reached, which would then require the player to delete an existing photo. This generated a lot of player confusion as the game never informs the player of the limit.
Pokemon Snap 64
Pokemon Snap is stage-based and had a camera roll of 60 that refilled at the start of each journey whereas we limit the photos per creature. The player then selects one photo per Pokemon in that stage and chooses whether they’d like to keep the new or previously saved photo of that species.
Fortnite
We referenced Celia Hodent’s presentation on cognitive affordance in Fortnite using the HUD to help players naturally understand what was going on in game, i.e ammo count for its respective weapon always provides players the necessary knowledge to make informed decisions.
design solutioning
SOLVING THE FIRST CORE CHALLENGE (no visual feedback on the photo count)
I mapped out the old camera mode experience in a service blueprint to visualize problem areas where players are left uninformed of backend processes beyond their line of visibility.
I mapped out the old camera mode experience in a service blueprint to visualize problem areas where players are left uninformed of backend processes beyond their line of visibility.
Old camera service blueprint
Our simple solution was to display the number of photo slots left while the player’s camera was focused on the creature. The number decreases as the player takes photos, turning red once it hits 5.
Limiting the number of photos indirectly provided a sense of realism as no device or book stores an infinite collection, giving additional weight and meaning to each photo saved.
Limiting the number of photos indirectly provided a sense of realism as no device or book stores an infinite collection, giving additional weight and meaning to each photo saved.
The number decreases as the player takes photos...
...turning red once it hits 5
SOLVING THE SECOND CORE CHALLENGE (taking the player out of the camera experience)
In order for players to not miss out on opportune captures, allowing them to still photograph at “0” was required. The player would then be taken to a “new photo replacement flow” and prompted to discard the new photo or replace an existing one.
Requirements for the new photo replacement flow:
1. Allow players to still take a photo even when they have no slots left so they do not miss out on an opportunity
2. Immediately explain why the user has been moved from the camera mode into this flow to reduce confusion
3. If the player chooses to delete an old photo, clearly label and display the old and new photos in a comparative layout
4. After the player has decided to save or discard the new photo, remind them that they can manually delete photos from their photobook at any point
I also decided to display the saved photos in a horizontal camera roll visual style for familiarity as it is commonly used in mobile photo designs.
I created a quick Figma clickthrough to communicate the new design changes to developers.
Requirements for the new photo replacement flow:
1. Allow players to still take a photo even when they have no slots left so they do not miss out on an opportunity
2. Immediately explain why the user has been moved from the camera mode into this flow to reduce confusion
3. If the player chooses to delete an old photo, clearly label and display the old and new photos in a comparative layout
4. After the player has decided to save or discard the new photo, remind them that they can manually delete photos from their photobook at any point
I also decided to display the saved photos in a horizontal camera roll visual style for familiarity as it is commonly used in mobile photo designs.
I created a quick Figma clickthrough to communicate the new design changes to developers.
validating our solutions
Testing
We used this new build in a few more rounds of remote testing and received insightful feedback:
1. The new build showed that 100% of the players now recognized when they were low on photo space and how close they were to reaching the limit
2. Players were still confused regarding if they had previously taken a creature’s photo. This was most common when players encountered creatures varying in color, making them harder to recognize on the spot. “I don’t know if I’ve taken a photo of this already unless I go check the photobook”
Refining
We updated the camera to display ‘New!’ when the player focused on a new creature, which changed to its name once photographed.
This is the new camera mode experience with the goal of creating clearer lines of communication to the player about the status of their photobook storage. By dynamically updating the UI information based on player actions, they are immediately given the necessary information about their photobook storage while still in the camera mode.
This is the new camera mode experience with the goal of creating clearer lines of communication to the player about the status of their photobook storage. By dynamically updating the UI information based on player actions, they are immediately given the necessary information about their photobook storage while still in the camera mode.
New camera mode service blueprint
Final DesignS
The new camera mode redesign has clearer lines of communication for the player about the status of their photo count. As the player focuses their camera over creatures, contextual information is dynamically provided to provide the necessary information about their photobook while still in the camera mode.
The new photo overflow experience utilizes helpful modals and animations to give players clear guidance on replacing an existing photo or discarding the new one.
takeaways
Designing for different devices
In my 9-5 career, devices consist of desktop, tablet, and mobile, generally operated with touch screen, touchpad, or keyboard/mouse. However, designing for games was a new and welcomed challenge that required me to consider various gamepad controllers. UI elements in the camera HUD and the photo overflow modals needed to make sense contextually for all input devices.
Enjoyable loops
Another comparison I quickly drew was the idea of simplifying complex tasks for users versus helping a player see a complex challenge as something enjoyable. There is value in allowing players to only save a set number of photos. Giving them the freedom to manually choose which ones were worth keeping or discarding made the decision all the more meaningful. Photographing and updating the saved photos was the core component to the game loop, so the designs had to drive an experience that players were happy to repeat countless of times.
Working in Unity
It quickly became clear in this project that I needed to understand how to solution around the hardware and engine limitations of our target platforms and Unity respectively. Understanding how our developers handled backend processes helped ensure that my designs offered a realistic solution to both design and gameplay challenges.
Next steps
I’m extremely fortunate for the opportunity to work with a team who all recognized the importance of user-centered designs shaping the game’s experience while being very receptive to the research and solutions that I led them through. We’ll be closely monitoring players for feedback upon launch and continue to identify areas of improvement!