Beasts of Maravilla Island - Photobook Overflow

Beasts of Maravilla Island is an upcoming, exploration, single-player adventure slated for release in Q1 of 2021. Players travel through different biomes of an island, traversing puzzles and taking photos of mysterious wildlife and storing them as memories in their photobook collection.
Client
Banana Bird Studios
SERVICES
Wireframing, UX Design, Qualitative Research, Clickthrough Prototypes, Accessibility Review, User Flow Charts
TIMEFRAME
September 2020 - March 2021
ROLE
Game UX Consultant
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.
OVERVIEW BRIEF
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 has provides the player with information about their photo count.

The new photo overflow experience offers more guidance as the player replaces an existing photo or discards the new one.
THE RIGHT PROBLEM
IDENTIFYING THE OPPORTUNITY
As a player who is exploring the island, I want to be fully immersed in the world of Maravilla and freely take photos of all its inhabitants.
I first gathered all the necessary knowledge around technical limitations within their 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 first onboarded:

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 be self aware of the photo count or keep taking photos 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 takes them out of the game immersion
RESEARCH
COMPETITOR ANALYSES
We explored camera modes in other popular titles to see how they handled their language and player guidance.
Titles of other genres and how they displayed pertinent information to reduce memory overload were also researched.
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.

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.
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, so players have all the knowledge needed 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.
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 also added a sense of realism as no device or book could store an infinite collection, making each photo saved that much more meaningful.
SOLVING THE SECOND CORE ISSUE (taking the player out of the camera experience)
We realistically could not store an indefinite amount of photos, but allowing the player to still photograph at “0” helped to not miss out on an opportune capture. 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 this wireframe as a simple Figma clickthrough to communicate the new design changes to our 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.
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
Designing for multiple devices in my 9 to 5 consists of desktop, tablet, and mobile. However, designing for games was a new and welcomed challenge that required me to consider mouse and 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 limitations of Unity, such as a limited storage space. I quickly expanded my knowledge on how the engine checked and processed information in the back end based on player actions to ensure that my designs offered a realistic solution to the core 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.