tsd-playsets-thumb

Collections Feature Design for Toy Story Drop! Mobile Game

FULL PRESENTATION • HARRY CHRIS MCCORKLE

Through close collaboration with Disney, Pixar, research, production, and engineering, I created a highly-engaging and delightful experience that motivated players to progress through Toy Story Drop.

1. Background

Last year, Disney contacted Big Fish with an idea on how we can work together to create a Match 3 game to coincide with the launch of Toy Story 4.

The Toy Story Digital team were fans of Gummy Drop, our most successful game to date. Initially, the game producers at Disney started to create their own version of Gummy Drop, but did not experience success. So, they reached out to us!

16-disneypixar.001

We jumped at the opportunity. Since Toy Story 4 was launching in just over 14 months, we had a short timeline to create a unique and delightful game from the ground up.

17.001

The project I’ll be talking about is the collections feature I designed for this game.

I’ll be covering the project background, how we defined the problem, how user motivations play a key role, the design process itself, usability testing, collaborating with Disney and Pixar, and the shipped product.

keynote.001

My Role: UX Design Lead

In my role as the lead UX designer, I was responsible for designing features that motivate players to play, utilizing a lean ux design process.

In addition, I was responsible for all interaction and motion design, prototype development, and spec writing… as well as providing some art direction.

presentation jpegs.019

Team Makeup

I worked cross-functionally with narrative design, production, product management, engineering, art, and research to design each feature in the game.

presentation jpegs.020

Features Designed

These include the store, inbox, level indicators, score meters, key buildings, and what I’ll be covering today: collections.

presentation jpegs.021

2. Problem & Feature Definition

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. I’ll go in to more detail later.

But first, we must ask:

presentation jpegs.022

What's the problem we’re trying to solve?

presentation jpegs.023

What's the Problem We're Trying to Solve?

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.

presentation jpegs.024

What Work has Already been Completed?

Through early brand and audience surveys, I understood our target audience to consist of Toy Story fans, Match 3 fans, or both.

Having already created and ported several successful features from Gummy Drop, we found that one core motivation wasn’t being met: the collecting of items.

presentation jpegs.025

What Might We Already Know?

We know that our audience is highly motivated by the pursuit of collecting items in the game.

But, how do I design a collections feature that’s especially motivating? Also, how do I make collecting feel like it’s naturally a part of the Toy Story universe?

presentation jpegs.026

3. Initial Sketches and Designs

I already had some ideas brewing in my mind, so I started sketching.

presentation jpegs.028

Early Sketches

Here are some early sketches of my first idea: a toy shelf!

As players progress through the game, they would collect a toy — say Woody and Jessie for example — and continue to collect themed pieces of that toy’s world that would be placed along the shelf.

Each piece, like Woody’s Hat or Badge, would represent a progressive step toward the completion of what we began to call a Playset.

Building a Playset fits quite nicely into the player motivation of collecting in a game.

presentation jpegs.029

Initial User Flow

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 taken 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. luckily, some helpful insight was on the way…

presentation jpegs.030

4. Collaborating with Disney and Pixar

Members of the Disney and Pixar leadership teams arrived at Big Fish to see how things were coming and provide support.

presentation jpegs.031

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 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.” 

presentation jpegs.032

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 are alive?

presentation jpegs.033

With increased understanding, I was ready to re-invent the feature.

presentation jpegs.034

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.

presentation jpegs.035

Click to play video

5. Design Iteration

So, what do Playsets look like? What does it look like to have multiple Playsets? With the help of producers and through consultation with engineers, how do I help Playsets feel real?

presentation jpegs.036

Sketches, 1

In trying to bring Playsets to life, I designed a diorama view. By creating a “full screen” view of the playset, players can enjoy the fruits of their labor, 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 with no props or clothes, like Rex or Slinky Dog, the system wouldn’t work as well.

presentation jpegs.037

Sketches, 2

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 the 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” version of characters, like Spanish Buzz, or Halloween Mr. Potato Head.

presentation jpegs.038

Styles, 3

Digging even deeper, I re-designed the meta 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.

presentation jpegs.039

Catalog View

Here it is expressed in wireframes, as a prototype I developed for engineers to use when integrating it into their latest build.

presentation jpegs.040

Interacting with a Collection, Part 1

This is the first half of a higher fidelity flow, showing the states of the catalog view, diorama view, and what it looks like to inspect playset pieces.

I have some affordances for interactions now in the question marks. When you tap on one you can learn more about how you might collect it, or when you did collect it.

presentation jpegs.041

Interacting with a Collection, Part 2

Here’s the second part of the flow in the prototype, demonstrating our first idea of what the reward could be, which in this case shows a bonus prize video when the playset is complete.

presentation jpegs.042

Interacting with a Collection, Prototye

Here’s how that behaves in a prototype I made.

Download Principle Project File

presentation jpegs.043

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.

Click to play video

New Playset Piece Flow

Here’s a prototype I created that demonstrates the flow of discovering a new Playset piece.

The Playsets feature is now ready to be put in front of our players.

Click to play video

6. Usability Testing

I was confident at this point that we had a complete interaction loop that could be tested with some players.

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.

Research and I assessed each player’s ability to complete a task, as well as recorded their reactions and expectations. We gathered insights through the employment of eye tracking, facial expression analysis, and measured delight using a galvanic skin response sensor.

presentation jpegs.047

Participant Reaction

Here’s how one of the participants reacted to seeing a playset for the first time.

Click to play video

Results and Learnings

Players 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.

presentation jpegs.049

However, all participants experienced confusion around why they are collecting Playset items.

Players also found the experience difficult to navigate.

presentation jpegs.050

Participant Quote

In a post-playtest interview, a participant said…

presentation jpegs.051

7. Improving the Design

This and other insights were very helpful in aiding us to complete the Playset collection loop.

presentation jpegs.052

Creating a Design Plan to Address Issues

Our mission was 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.

And simplify the Playset view — make the playset diorama view more understandable on its own by removing UI that interferes with that goal.

presentation jpegs.053

Give Players a Reason to Complete the Playset

Here’s a sketch that 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 at the end.

presentation jpegs.054

De-Clutter the Playset View

Continuing work with producers, research and engineering, 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.

Lastly, there is only a single section that communicates whatever your next step may be, by visualizing your collection progress, or through a call to action to play that playset’s specific bonus adventure.

presentation jpegs.055

Finalizing the Role of the Playset

Revisiting our original definition of the Playset, the feature will be activated through the core gameplay loop. By playing the game, players will build their playset by collecting Toy Story characters’ themed Playset pieces.

When a playset is complete, a set of bonus levels is unlocked, where the player will interact with their playset pieces in a special “world,” like one would play with in real life. Once completed, they will receive a bonus prize of boosts or gold to enhance their gameplay experience and help them feel rewarded for completing a Playset.

We’re finally hitting on all of the collector motivations by putting Playsets in Toy Story Drop.

presentation jpegs.056

8. 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.

presentation jpegs.057

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.

presentation jpegs.058

Click to play video

Being Taken to the Playset

Then, the collected piece moves to the Playsets button in the UI, which opens automatically, and falls into the landscape, where a Playset is then constructed.

presentation jpegs.059

Click to play video

Learning How Playsets Work

Third, the player is shown a visualization of how they arrived at that point, and what happens as they collect Playset pieces.

presentation jpegs.060

Click to play video

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.

presentation jpegs.061

Click to play video

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.

presentation jpegs.062

Click to play video

9. Pre-Launch Diary Study 

Next up was a 30 day diary study with ten participants to play the game for at least one hour per day, and speak their thoughts and feelings aloud as we recorded their gameplay using remote playtesting software. Additionally, at the end of each play period, they would fill out a survey asking how they felt playing that day, how their play session went, and more.

presentation jpegs.063

Diary Study Background

This was a great way to gain insights into long-term play. The entire game team and I would have better understanding of how players play, and how they feel about gameplay and features after playing for a month.

This would help is gauge which aspects of the game need attention, and how others are performing.

presentation jpegs.064

After 30 days of game play, and 5 days of analysis, the research team came back with some excellent insights, and great feedback for Playsets.

As reported by our research team:

presentation jpegs.065

What Players Had to Say: Praise

The praise was re-assuring that the imagination, diligence, and collaboration that went into designing Playsets was worth our time.

presentation jpegs.066

What Players Had to Say: Opportunities to Improve

The critique and feedback was valuable in inspiring us to take a look at how we pace the collection of Playset pieces, and address confusion over collecting multiple Playsets

presentation jpegs.067

Pacing and Discovery

Our last mission before release was clear: reveal Playset pieces in order for one character to teach players how the system works. Then reveal additional Playsets throughout the rest of the game, with an even pace to motivate players to keep progressing!

presentation jpegs.068

10. Tweaks from Feedback

… The devil was in the details now.

presentation jpegs.069

The game team and I agreed on making two tweaks to Playsets based on the diary study feedback:

Place Playset Chests & Story Levels after difficult levels

Players were excited to interact with characters and make progress on Playsets, often stating so when seeing it on the map. Dangling this carrot when players are on difficult levels could increase their motivation to beat the levels.

Increase the Playsets frequency during the early portion of the game.

Most players were highly motivated by making progress toward this feature. Increased usage of the feature will increase player understanding and provide additional moments of delight, which drive early retention. 

So that’s what we did.

presentation jpegs.070

11. Shipped Product

After 6 months of design and development, the Playsets feature was integrated into the game, and is available to play today. 

presentation jpegs.071

Completing Woody's Playset

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.

Click to play video

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 Toy Story Drop.

presentation jpegs.073

Thank you.

presentation jpegs.075

Browse My UX Design Projects

All content is copyright its respective owner. 

This website and the projects found herein are intended only for the use of the individual or entity to which it is shared, and may contain sensitive information. Please do not use, adapt, or share what you find here for any purpose other than review or general assessment of Harry McCorkle.