Collections Mechanic in Toy Story Drop® Mobile Game
My roles: Lead UX, Interaction, and Motion Designer
Estimated reading time: 25 minutes
Disney and Pixar worked with my team and I to create a Toy Story-themed match 3 mobile game to coincide with the release of Toy Story 4.
This project covers the creation of the Collections mechanic in the Toy Story Drop! mobile game.
Within casual mobile games, Collections are pieces of a theme or narrative that are rewarded to, or discovered by, a player as they play the game.
Every product or feature design has both business and user goals we UX designers try to achieve.
We want to motivate players to stay engaged in our games. We experience a direct correlation between engagement and monetization.
We also want to give the players a reason to play, and to feel rewarded by playing our game.
Through early motivational research with our target audiences, Toy Story fans, and match 3 game fans, we know that our audience is highly motivated by the pursuit of collecting items in the game, but…
Task: How might I design a Collections feature that:
Is especially motivating to fans of Toy Story Drop
Makes collecting feel like it’s a natural part of the Toy Story universe
Design Procedure
Initial Sketches
Whiteboard sketch of Toy Shelf metaphor
Click or tap to enlarge.
iPad sketch of Toy Shelf metaphor
Click or tap to enlarge.
Brainstorming collection pacing
Click or tap to enlarge.
Here are some early sketches of my first idea: a toy shelf! As players progress through the game, they would collect different toys — say Woody and Jessie for example — and continue to collect themed pieces of that toy’s world that would be placed along a toy shelf they could access somewhere in the UI.
Each piece, like Woody’s Hat or Badge, would represent a progressive step toward the completion of what we began to call a play set.
Establishing the Context
Core gameplay loop visualization
Click or tap to enlarge.
Completing a level demo
Click or tap to play.
Collections, being the most prominent meta feature, lives inside and around the core gameplay loop:
Play levels
Collect resources
Beat puzzle levels
Unlock new levels
Repeat
So perhaps, by merely playing the game, players will discover and collect Toy Story characters and their accompanying toys.
When a player has completed an entire character’s playset, they receive some sort of reward, like a bonus video that shows some behind-the-scenes sketches of that character.
Wireframes and Flow
Early flow depicting the discovery of collection items
Click or tap to enlarge.
Moving into wireframes, I designed an initial flow that shows the motion and interaction of discovering a new playset item.
In this early version, as you play a level, you discover a Playset item. At the end of a level, you’re taking to your toy shelf, where that item lands on the shelf. You can then learn more about that item by tapping on it.
In the back of my mind however, I suspected that a toy shelf might not be the best metaphor to use when it involves the live, talking, moving toys of Toy Story.
Insights from the Disney & Pixar teams
“What makes Toy Story special is its characters working together, with their small size and limited ability, to accomplish the impossible.”
— Toy Story Narrative Designer
Members of the Disney Pixar Leadership Team arrived at Big Fish to see how things were coming along and provide support. Among many things, we discussed the possibilities and limitations in the Toy Story universe. We reviewed the core gameplay and each of the features being designed. One simple quote from those meetings especially stood out in my mind:
“What makes Toy Story special is its characters working together, with their small size and limited ability, to accomplish the impossible.”
The conversations inspired me to think further outside the box. The toys are meant to be played with – not to just sit on a shelf. How much fun can the player have with toys that feel alive?
Iterating on the Playset View
Diorama View
In an attempt to bring playsets to life, I designed a diorama. By creating a “full screen” view of the playset, players can interact with their collected toy, track their collection progress, and experience bonus content after their playset is complete.
Here, you’re collecting parts of a character. This idea worked well with toys that have clothes, costumes, or lots of props, such as Woody, Jessie, Buzz Lightyear, and Mister Potato Head. However, for characters without props or clothes, like Rex or Slinky Dog, the system wouldn’t work as well.
Catalog View
Additionally, I designed a catalog view. By creating a central location, I could show how many Toy Story characters a player has collected, and how far they are in collecting their complete playset.
This is more of an abstraction of my original shelf metaphor.
As you can see, we have a list view of each of the characters, with collection progress communicated to the right of each character portrait. Since this is a scrollable view, we could potentially include special themed versions of characters, like Spanish Buzz, or Halloween Mr. Potato Head.
Scenes View
Digging even deeper, I re-designed the playsets feature to be truer-to-form to that of a real playset: by collecting parts of a scene, instead of missing parts of a toy.
Improved Playset Flow
Here it is expressed in wireframes, as a prototype I developed for engineers to use when integrating it into their latest build.
Click or tap to enlarge.
Motion Design and Prototypes
Playset Piece Discovery
Here’s a prototype I created that demonstrates the flow of discovering a new playset piece.
Motion prototype created in Principle.
Click or tap to play.
New Parallax Effect
To take the goal of feeling real even further, I created a motion prototype that demonstrates a parallax motion effect when the player touches the playset.
Motion prototype created in Principle.
Click or tap to play.
Incomplete Playset
Interacting with an incomplete playset motion prototype created in Principle.
Click or tap to play.
Complete Playset
Interacting with a complete playset motion prototype created in Principle.
Click or tap to play.
Usability Testing
I was confident at this point that we had a complete interaction loop that could be tested with some players. I delivered my designs and prototypes to the development team, who then incorporated it into a test build of the game.
In this round of testing, we brought players into our lab to perform an array of tasks, such as “tap where you’d find Woody’s playset” or “tap where you might learn more about a piece that’s missing”, and so on.
We gathered insights through the employment of eye tracking, facial expression analysis, and measured delight using a galvanic skin response sensor.
Here’s how one of the participants reacted to seeing a playset for the first time:
Example playtest reaction.
Click or tap to play.
Test Results
Participants were most delighted by the pursuit of playset pieces, and the completion of a playset.
Outside of the match-3 gameplay mechanic itself, playsets were considered the most compelling reason to play by our participants.
However, all participants found it difficult to navigate the playsets.
My next steps were clear and simple:
Motivate players to complete the playset by creating a special, bonus instance of what they already found most compelling in our game: a special set of levels, with a tangible reward of boosts or gold when completed
Simplify the playset view — make the playset diorama view more understandable on its own by removing UI that interferes with that goal.
Design Iteration
Task 1: Give players a reason to complete the playset
Themed, Bonus Levels
Here’s a sketch I created after working with producers, research, and engineering on defining bonus levels.
The bonus levels will be heavily themed after the toy’s playset, using collected playset pieces to enhance the flavor of the experience.
Our hypothesis is that this will increase opportunities for engagement, and the player will feel rewarded after receiving a set of boosts or gold upon completion of the bonus level.
Task 2: Declutter the playset view
Decluttered Playset View
Continuing work with the team, I sketched out a more refined and less cluttered view of the playset diorama. All items are seen in view, styled differently depending on which pieces the player has collected.
Final Interaction and Motion Design
To wrap things up, I needed to flesh out each of the flows leading up to and during the delightful moments of collecting a piece of a playset.
Discovering a Playset Piece
When discovering a playset piece, a player will advance from a completed level to the next level, and land on a mystery box. The player then enters a mystery box view, where they tap to open the box, and receive a playset character or piece.
Interaction design steps
Click or tap to enlarge.
In-game flow
Click or tap to play.
Transportation to the Playset
The collected piece then moves to the playsets button in the UI, which opens automatically, and falls into the landscape, where a playset is then constructed.
Interaction design steps
Click or tap to enlarge.
In-game flow
Click or tap to play.
Learning How Playsets Work
The player is then shown a visualization of how they arrived at that point, and what happens as they collect playset pieces.
Interaction design steps
Click or tap to enlarge.
In-game flow
Click or tap to play.
Discovering What You Can Collect
Then, the player can tap on any missing playset piece to see a preview of what it will look like when collected.
Interaction design steps
Click or tap to enlarge.
In-game flow
Click or tap to play.
Browsing Your Playsets
Lastly, upon exiting, the player sees the playset catalog that communicates which playsets they’ve collected, and how many pieces they’ve collected therein.
Interaction design steps
Click or tap to enlarge.
In-game flow
Click or tap to play.
Shipped Product
After 6 months of design and development, the playsets feature was integrated into the game, and shipped on time.
Here’s a sped up version of the complete playset flow.
In the bonus levels, you can see each of the playset pieces placed on the level map. They also appear in some of the individual levels.
What did we accomplish?
Through close collaboration with Disney, Pixar, Research, Production, and Engineering, I created a highly-engaging and delightful experience that motivated players to progress through the Toy Story Drop mobile game.
Click or tap to enlarge.
Click or tap to play.