cc-store-evo

Collections Store Design Refresh for Cooking Craze Mobile Game

FULL PRESENTATION • HARRY CHRIS MCCORKLE

Through collaboration with research, production, and engineering, I designed a mobile store that was discoverable, scalable, and usable. Through heuristic evaluation, competitive analysis, and usability testing, I identified opportunities to improve the store’s layout, and as a result, we experienced an increase in revenue.

1. Background

Cooking Craze is a restaurant-themed, free to play time management game published by Big Fish. It’s produced in-house, and developed in Belarus. 

This game has been live for a few years now, and naturally, revenue was starting to soften, so I worked with the team to examine where purchases occur, and to re-invigorate those experiences.

presentation jpegs.077

Team Makeup

I worked cross-functionally with product management, production, research, engineering, and marketing.

presentation jpegs.078

My Role: UX Design Lead

As the UX Design Lead, I was responsible for any feature ideation, UX design, interaction design, and prototype development that was required.

presentation jpegs.079

2. Understanding the Space

When this project started, I found that players have multiple opportunities to purchase what they need in different contexts in the game.

These include purchasing restaurant upgrades with soft currency, purchasing boosts on a level during gameplay, and buying boosts in the store.

presentation jpegs.080

Setting the Goal

I took advantage of this opportunity and sought to increase store purchases through a refreshed design that I could test with players.

My goal for this project was an across-the-board increase in sales.

presentation jpegs.081

The Store at the Time

Examining the store at the time, I noted some observations and concerns, like:

  • Are there more things to buy than what I see on first entering the store?
  • Why are the titles closer to the items above them than the items they’re describing?
  • What do those floating numbers next to the boost icons mean?
presentation jpegs.082

What Makes a Usable, Successful Store

A mobile game store is usable and best set up for success when the user:

  1. Can successfully identify each item for sale
  2. Is able to understand how each item can benefit them
  3. Can successfully browse categories of items
  4. Knows how much of an item they already have in their inventory 
  5. Can effortlessly assess the value of any deal
presentation jpegs.083

3. Research Process

The first step in improving the store design is to assess its performance as-is, then use those insights to identify opportunities to improve.

presentation jpegs.084

Through a preliminary usability test of the store and its functions, the research team and I discovered that 4 out of 5 players had trouble performing the following tasks:

  • Identify and locate a specific boost
  • Identify how many of a certain boost they had
  • Identify how to learn more about a specific boost
  • Find more boosts or other purchasable currency
  • Identify any deals or discounts on items being sold in the store
presentation jpegs.085

Sample from Playtesting

Here’s one example of a player struggling to successfully complete one of the tasks we set out for them.

A participant is asked by the test facilitator where they would find how many of a boost they have that would prevent a dish from burning. 

This is known as the Burn Proofer. The quantity is shown right next to the boost name and its icon, but as you’ll see, the player exits the store and searches elsewhere, later returning to the store and assuming the “0” is the quantity of that boost they have. 

Click to play video

Determing Next Steps for Design

In order to tactically improve the design, I needed to address the exact issues players were having. Here's my to-do list.

presentation jpegs.087

4. Competitive Analysis

Competitive analysis references for in-game stores are plenty, so through the eyes of our users, many layouts could help them successfully perform critical purchase tasks.

presentation jpegs.088

Analysis Strategy

When conducting competitive analysis, I’ve found that exploring two groups of games often yield the most useful information.

These two groups are: best in class of the mobile gaming industry, and best in class of the game genre. I’ll put a few hours into each game, learning the mechanics, inspecting each feature, and compile a list of interesting observations I’ve found.

presentation jpegs.089

Best-in-Genre Store Layouts

By comparing best-in-genre store layouts, I discovered that:

Cooking Fever didn’t organize their store into categories — instead individual buttons would call up different store layouts. I wasn’t sure how intuitive this would be for our players when browsing the different categories of our store.

Cooking Dash and Restaurant Dash both featured tabs on the left. It felt clean and organized. However, none of them communicated the value of what they were selling.

presentation jpegs.090

Best-in-Industry Store Layouts

When browsing the stores of leading casual mobile games i discovered items being offered for sale at a discounted rate in the form of bundles.

 I found this interesting… why aren’t these bundles being offered in any of the Time Management Cooking games?

presentation jpegs.091

Idea

This lead me to wonder: could we sell more boosts by offering them in a discounted bundle? 

I decided to experiment with these findings in the upcoming design process.

presentation jpegs.092

Hypothesis

With these questions and observations in mind, I constructed my hypothesis:

  1. The more information a player has to evaluate a purchase, the more likely they will be to make a purchase
  2. The better value a player can find in a purchase, the more likely they will be to consider making a purchase
presentation jpegs.093

Aligning with the Game Team

I met with the game team and presented findings from playtesting and competitive analysis. I presented my tactical design plan, and received buy-in to continue.

presentation jpegs.094

5. Design Process

In my design process I created three different experiences that experiment with different tabbed layouts.

View Prototype on Proto.io
and choose a design

presentation jpegs.095

Wireframe & Color Design A

This version places a permanent promo section above all tabs. Additionally, the Bundles tab was added. 

View Prototype on Proto.io
and choose A

CC Store Presentation.001

Wireframe & Color Design B

​​This version moves the promo section into the tabs. This could allow for different promo messages or offers per tab.

View Prototype on Proto.io
and choose B

CC Store Presentation.002

Wireframe & Color Design C

​​This version brands the store as a “market,” moves the tabs to the left side, and replaces a permanent bundles promo with a marketing with a call-to-action.

View Prototype on Proto.io
and choose C

CC Store Presentation.003

6. Usability Testing

In the next round of testing, the research team and I conducted a remote usability study. We assessed player performance by measuring time-to-task and accuracy in accomplishing the five tasks from the first round of playtesting:

  1. Identify and locate a specific boost
  2. Identify how many of a certain boost they had
  3. Identify how to learn more about a specific boost
  4. Find more boosts or other purchase-able currency
  5. Identify any deals or discounts on items being sold in the store
presentation jpegs.098

Results

In each of the three new designs, all of the participants were able to quickly and accurately perform those tasks.

At that point, it was up to the game producers to decide which layout to use. 

presentation jpegs.099

Since Cooking Craze already had tabs along the top of the store, the game team decided to keep that organization, but follow my design recommendations for everything else..

The next step was to work with engineering to make sure they understood our goals, and that design direction was properly followed.

I sent over Design B, and they worked to implement its changes into a developer build of the game. Now, it was time for our final round of usability testing.

presentation jpegs.100

7. Another Round of Usability Testing

This round of usability testing was performed in the lab, where, if a player had issues, we could probe more on how they feel and what they expect to occur.

presentation jpegs.101

Sample from Playtesting

In this sample from playtesting, a participant is asked to show the facilitator what the “plus three customer boost” does.

The participant is able to effortlessly locate how to learn about that boost.

Click to play video

Results

All of the five participants were able to successfully perform each of the tasks we set out for them.

Finally, the new Cooking Craze store was ready for launch.

presentation jpegs.103

8. Shipped Product

Upon confirming the new layout performed very well, the developers went to work on integrating it into the production build of the game. a few weeks later, it was released. After 30 days, proof of the new store’s impact was in.

Controlling for variables that may otherwise naturally impact revenue for that month, such as organic and paid user acquisition, as well as live events in the game, the new store design impacted revenue as follows...

presentation jpegs.104

Click to play video

9. Business Impact

Success.

More purchases are occurring
7% increase in weekly transaction counts over 4 week period, compared to previous month

There are more new purchasers
10% increase in Average Revenue Per Daily Active User

Paying players are spending more
3% increase in Average Revenue Per Paying User

presentation jpegs.105

Specific, Actionable Learnings

Some things we learned:

  1. Reducing friction and increasing discoverability of store items resulted in more purchases, and more money spent in a purchase
  2. Players were able to learn about boosts faster
  3. Bundles, instead of cannibalizing sales and lowering revenue through discounted pricing, instead boosted revenue.

Also to note: This bundles feature would go on to appear in just about all Big Fish Games after this point.

presentation jpegs.106

Thoughts, Looking Back

Some thoughts and ideas, looking back:

  1. What could we have learned from a store that is wildly different from the layouts I created?
  2. Although the tabs were understood by players, could I have experimented a little bit more with presentation
  3. What happens if a game adds two or three more categories of items for purchase?
presentation jpegs.107

What Did We Accomplish?

Through collaboration with research, production, and engineering, I designed a mobile store that was discoverable, scalable, and usable.

Through heuristic evaluation, competitive analysis, and usability testing, I identified opportunities to improve the store’s layout, and as a result, we experienced an increase in revenue.

presentation jpegs.108

Thank you.

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.