Overview

Leaderboards help audience members know where they stand compared to the creator and other users who have joined the oooh. Leaderboards also present a fun opportunity for users to record their reactions to their scores.

This doc covers the design and user experience guidelines you should adhere to while building Leaderboards for your module.

📘

Hey Developers!

If you're also implementing leaderboards, be sure to check out our [guide and code samples] (doc:leaderboard-implementation) in the Developer docs.

Three Leaderboards

In the audience experience, your module should present the leaderboard twice: once before gameplay, and once after gameplay.

• Display a pre-gameplay leaderboard; get users anticipating the competition
• During gameplay, show a chase leaderboard to help users understand when they've beat the creator score, or scores from the current top 3 users on that oooh's leaderboard (we'll update this guide soon to cover chase leaderboards).
• Display a post-gameplay leaderboard; show them how they ranked and celebrate accomplishments

📘

Pre-gameplay leaderboards

• Include username + rank + profile image + score
• Identify who is the host with a tag (if the host had a score and appears on the leaderboard)
• Show the top 3 users
• Show the creator and current user
• Add an animation state to the current user's leaderboard list item; then they see where they sit
• Note the states: what if the current user hasn't played yet? What if no one has played yet? What if the host is playing their own game?

📘

Post-gameplay leaderboard

• Show the user's rank compared to the creator (can be compared to top 3 users if creator doesn't have a score)
• If user accomplished some things in their session, celebrate and tell them! EG. Personal best, Beat the Creator, New High Score
• Show at the very end of the recording some stat details of their score compared to the creator. This could be a shareable nugget on it's own to other platforms
• Note that these moments are great for allowing users to react to something, so keep the full screen recording
• At very last screen, you may add a countdown timer as part of the recording indicator to automatically end the recording figma o3h doc
• Ensure the user can retry the game figma

Design Examples of Pre-Gameplay Leaderboards

Design Example of Post-Gameplay Leaderboard/Results