Skillz Blog

Designing the Tutorial and Scoring Summary for a Competitive Mobile Game

Author: Evan James, Head of Product Marketing at Skillz

Earlier blogs in this series provided design tips and best practices related to the user interface, the core loop, and skill-based gameplay. All of these topics are critical elements of developing and designing key aspects of a competitive mobile game. Once you have designed the core components of a competitive mobile game, there are two additional screens that require special attention from a design perspective; the tutorial screen and the results screen. This blog will cover the best tips for designing each of these screens.

The Tutorial Screen

The first-time user experience (FTUE) is key for improving player retention, especially the Day 1 retention rate. Upon logging into a game for the first time, a player should receive a tutorial that provides instructions on how to play the game. After completing the tutorial, the player should feel confident that they know the game’s objective, along with tactical information about how to play the game. When designing a tutorial, some of the key details to include are:

  • The goal of the game – What’s the objective?
  • Basic rules and core loop – How do you play the game?
  • Game controls – How are the game’s controls configured?
  • Scoring – How are points earned?
  • Game end conditions – What ends the game? (Timer, objective completion, etc.)

 

Ideally, the tutorial should be under two minutes in length. Advanced players should have the option of quickly skipping through the tutorial, without needing to wait on long animations. Simple, interactive tutorials have the highest completion rates, but a quick infographic slideshow can work for simple games. Try to get the user into actual gameplay as quickly as possible while still ensuring they understand the key details listed above. The end of the tutorial should take the user into the game’s SDK, where the user is directed to play their first match.

By designing a simple, but explanatory tutorial, a player should feel empowered to play their first match reasonably well. The most popular Skillz-powered games are those that are easy to learn, but difficult to master. Providing a clear tutorial helps achieve the “easy to learn” component of a game, which overall leads to better new player engagement and retention.

Scoring Summary Screen

Including a comprehensive score summary screen is important for providing players a roadmap and tips as to how a player can improve their skills at a game. After a player has completed a match, a game results screen should provide the player a breakdown of game performance. This screen is designed to serve several purposes:

  • Communicate the player’s final score
  • Explain how the score was calculated
  • Provide tips so the player can improve their skills and/or strategy for the next game
  • Invoke player excitement to play again

 

For most games, the scoring summary is made up of the following items:

  • Scoring Breakdown — Scores should be listed by category, often with a simple calculation of how those scores were earned. The scores should be aligned in a vertical column on the right side, to make it clear that they sum up to the total score.
  • The Player’s Final Score — This should be the most prominent number on the screen, usually appearing in a larger font than the Scoring Breakdown. For clarity, it should be positioned below the Scoring Breakdown and above the “Submit Score” button. The score shown should be the user’s final tournament score.
  • Personal Best — If it’s tracked, the player’s all-time or weekly high score can also be shown on this screen. It should be juxtaposed with the Final Score, but with less emphasis. Including a Personal Best score encourages a player to re-enter matches in an attempt to break their personal best score, which is directly tied to increasing average player engagement rates.
  • A “Submit Score” Button — This button takes the player out to the tournament leaderboard within the Skillz SDK. Ideally, this button should have a ten-second timer on it, either counting down numerically on the button itself, “Submit Score (9),” or with a timer bar beneath the button.

Adding animation to the scoring summary screen creates an additional level of excitement and impact at the game’s conclusion. One way to animate the scoring breakdown is to draw in one row at a time and add in some visual flare around the player’s final score. One thing to note — any lengthy animation should include a “tap-to-skip” feature that skips past the animation and takes the player directly to the screen’s final state, with the full scoring breakdown visible to the user.

Skillz is always looking to empower our game developer partners to design high-quality games. If you’d like to learn more about Skillz and how to design a Skillz-powered game, then register for our Best Practices For Skillz Game Design webinar at 10 AM PST, on Wednesday, June 5th.