StatsRealmRoyale

The Battle Royale game that was supposed to challenge Fortnite...
We made a great stat-tracking tool for it!

iMac
Overview

Realm Royale was the 'up-and-coming' Battle Royale game made by the developers of SMITE and Paladins. It was free to play and available through Steam. Within the first couple days of its release, it had 100,000+ concurrent players on Steam.

With those viewership numbers, our team set out for first-mover advantage. We knew immediately of our competitors and how fast they move, so we were gave ourselves a 3-week deadline for designing StatsRealmRoyale.

Role & Duration

Product Designer | TSM
Team of 3 designers
1 month

Wireframing, Product Thinking, Visual Design, Prototyping, Interaction

The Problem

Now that Battle Royale has been established with PUBG, H1Z1 and Fortnite, Realm Royale's emergence raised questions. The most important question being - will this game be the one to trump Fortnite? Because if so, we knew we had to gain first-mover advantage for stat tracking and content curation. Being a brand new game, there were no established sites for Realm Royale and our mission was to adopt all the SRR players to use our tool over our competitors'. 

Without as many established players or community playing the game (many were still learning), and with the game being still in its alpha, we had a few key problems: 

  • Since Realm Royale (RR) was the first of its kind, we didn't know what stats were most valuable.
  • No competitors means no market research - what strengths and weaknesses could we capitalize on?
  • No official website for RR (RealmRoyale.com did not exist at the time when we started this) means no branding or consistent design elements that we could stylize after for our own.
  • Since we had no expert players of our own, we didn't know what was 'meta'. Would the classes' stats be more important than overall stats? Or would people be more interested in game data (items, weapons info, drop locations, etc.)?

The Need

Competitive players want to track their statistics and be able to analyze their progress and growth among other top players.  

Casual players want to learn what class(es) they are best with and learn from their statistics. They also want tutorials and tips to improve at the game.

Twitch / Streamer fans want to easily access their favorite streamers' profiles and see how they are performing.

My Responsibilities & Process

Since the team was so small (2 product designers, 1 visual designer), I was integral in carrying out the designs from wireframes to final hi-fi to interaction designs. I maintained constant communication with my lead and visual designer so that everything was cohesive. 
design thinking approach

Framing the Problem
Asking the community what they would want to track game performance statistics. Analyzing all the pain points and strengths of our previous similar websites as well as competitors.

Exploring the Solution Space
Brainstorming unique & useful features and ideating through sketching various user journey maps. Weeding out excessive features that don't add value for the user.

Finding a Good Solution
Creating various user scenarios and storyboards and personas to scope the problem in the eyes of our target user segments (3). Marking constraints that we have to realistically make deadlines and scale designs.

Refining the Solution
Wireframing and ensuring all designed pages are cohesive throughout the platform.Reinforcing design system guidelines with the team - everything from 8px grids to consistent type hierarchy. Carrying out interaction designs for important features to hand to lead dev. 

Design Challenge

How might we design a tool that establishes and tracks the most relevant stats for Realm Royale? How do we persuade gamers to trust our stats tool over others through design?

Identifying Opportunities

Powerful stats database

Compared to our previous Fortnite project, Realm Royale had almost double the amount of relevant stats that we could use for our tool. This meant twice the amount of information and more potential for powerful tools.

Game data!

Game data (classes, weapons, consumables, armor, abilities) means potential to provide a well-designed item database - a tool that thousands of gamers would benefit from (vs a wiki).

Niche stats and leaderboards

With the introduction of class-specific statistics, players now have access to another layer of stats that they can use to improve at specific class(es). 

View-worthy Content Articles

Without any other RR content sites, we can enter passage to create the first one to push articles about the game. This can include Battle Pass information, patch notes, game updates, game guides, tutorials and many more articles to help players improve at the game. 

Identifying Constraints

New game genre

While Fortnite and PUBG have established the BR genre, Realm Royale introduced many more game-changing (literally, ha) mechanics with classes and abilities. 

Time Constraint

Games pop up quick. With only 1 month to build the entire product, we only had 3-4 weeks to plan, wireframe, and design the site. 

Limited Research

Being a brand new game, finding reliable gamers with a long history of playing the game was impossible. We were forced to settle for social media sentiment for what gamers would look for in a RR stat-tracking site. 

Game Research

Since none of us have played the game before, it was imperative that we understand the mechanics of the game. This way, we could understand: 
  • What makes Realm Royale different from other Battle Royale games? 
  • What are its strengths and weaknesses as of 2 weeks post-release?

How does it compare?

  • Free to play x Steam = easier avenue for new/prospective users to try out the game
  • Graphically, it is closer to Fortnite than PUBG/H1Z1. It would be fantasy-influenced.
  • TPP / Third Person Perspective (like Fortnite)
  • RR has numerous little additions that make it different from typical shooter Battle Royales.

What makes it different? 

  • The Class System is what differentiates this game the most from other BR games. Each class has different skills and talents.
  • When you are knocked, you turn into a chicken for 30 seconds. If you are not killed within those 30 seconds, you respawn as a normal player again.
  • Melee and Forged weapons are a new concept in BR.
    • Forging system allows players to forge legendary weapons, skills, armor with material costs. Forging areas are located throughout the map.
  • Ammo is unlimited.
rrprep
RR Stats Rundown
  • “Count of Killed By” refers to what classes the player has been killed by. (ie. H = Hunter, A = Assassin)
  • “Count of Landing” - Tracking of what location they landed at during the beginning phase of play.
  • Match History of RR will need class differentiation. This means filters to show stats based on what class they played. (40 games → 16 on Hunter with 3.6 K/D , 24 on Assassin with 2.2 K/D)
  • Very similar to League of Legends' Champions Win Rates = show specific profile stats for classes
rr stats
Screen Shot 2019-03-26 at 4.38.39 PM

Snapshot of our research

User Research - Twitch

As the game started gaining popularity, top streamers also began to emerge on Twitch. Top streamers garner a lot of influence in the game's development as well as our tool's development. We watched notable streamers and noted down any valuable information & feedback for stat-tracking.

More detailed ingame stats. “Kills, chickens, wins, the usual” - iholdshift.tv

“I mean honestly I think you want to just base it off like wins” - minikerr

“Honestly, going with a saafe bet going with Overwatch’s stat page” - Venalis

User Research - Reddit

Reddit serves as the largest platform for gamers to be able to vocalize their opinions. Hundreds of thousands of gamers use Reddit to talk about the meta of the game, techniques, tips, new findings, community art, and many more topics. It also serves as a great place to get feedback on our tools and how we can better utilize stats as well. This way we hear more diverse opinions (casual gamers, competitive gamers, newbies) on what we should prioritize on our product.

reddit
reddit2


Though these snippets may seem repetitive to our consensus, it only helps to confirm what we know. Our take on stat prioritization based on our experience with League of Legends & Fortnite will benefit us in creating our tool for Realm Royale quickly and efficiently. We can then begin our drafts.

The Solution

StatsRealmRoyale takes advantage of all the advanced statistics that Realm Royale offers and provides players with comprehensive, detailed, and configurable profile pages of their statistics. It also offers a News section where new, intermediate or advanced players can learn about game updates and techniques. 

StatsRealmRoyale (SRR) is an online web platform that allows gamers to track all of their Realm Royale statistics via personal profiles and leaderboards and to improve at the game by learning more about game data: weapons, classes, abilities, armor, and consumables. 

This tool will not only provide complete match history, but also configurable role stats so that players can analyze more about their gameplay. We also created an 'Impact' tool that shows them how their most recent game session has impacted their overall profile stats, a first of its kind in the market. 

homepage-mockup

Final Screens

Considering Realm Royale's strong resemblance to Fortnite as a BR, we knew that FNM's structure would work for RR - with some small adaptations. 

homescreen

Homepage

We prioritized leaderboards as we did for FortniteMaster. Unlike Fortnite however, there weren't any 'Masters' (highly rated streamers), and instead we included niche Class statistics because classes were the defining characteristic of Realm Royale in the BR arena.

View Live

leaderboards

Leaderboards

Similar to ProBuilds where players are displayed with their most played champions, we included players' favorite classes. The filter bar is stickied at the top for easy access. Also not shown is pagination (vs. endless scrolling) to more easily locate players. 

View Live

Summary

Player Profile Overview

Designing a tool that people will use requires adding features that fulfills people's needs. Gamers who play daily will want to know how their most recent match session has impacted their overall stats. We designed a 'View Impact' tool that will show the before/after stats based on a gamer's most recent match session for the day. 

In addition, adding Role Activity stats was a necessity for gamers who aim to improve at every aspect of their game. 

View Live

Match History

Player Profile - Match History

In contrast to Fortnite, Realm Royale offers a much wider larger library of stats to pull. This means more advanced stats for each match, and we categorized them into 5 categories: Time, Damage, Healing, Class, and Miscellaneous. We made these rows collapsible for a cleaner design, and kept the most important summarized stats on the row tabs for users to scan. 

View Live

Squad

Player Profile - Mode Statistics

We wanted to avoid this page simply displaying a wall of numbers and text, but we also couldn't only use visuals because of the abundance of details that needed to be incorporated inside each statistic category. We implemented a chart for each statistic that shows per-class visualizations of each stat. Color and type hierarchy were integral in keeping this page clean and easy to read. 

View Live

abilities

Item Database Pages - Abilities, Weapons, Armor, Consumables

The most important aspect of these pages were scalability. Once one table was designed to be readable and effectively show each stat by priority, the rest of the tables came in place. 

All Screens

Screen Shot 2019-03-26 at 11.43.41 PM
Screen Shot 2019-03-26 at 11.48.10 PM

Impact

Upon launch, this project hit all the checkboxes and passed expectations, but there is always room for improvement. The project failed to gain traction over a 3 month period, which is largely due to the game's dying popularity - if the game doesn't survive, neither does our platform. Realm Royale had 100k concurrent players at its peak. 

261k

Monthly Visitors

54k

Unique Visitors

1.8m

Visitors During Peak Period

33.2%

Bounce Rate

6.23

Pages per Visit

7:54 min

Average Duration Stay

Project Learnings

This project was, in my opinion, scrappier than most. We had a tighter crunch than ever to get these designs shipped out. Inevitably this means there is a lot of room for improvement in our process from end to end. 

Learning from old projects won't provide all the answers

Realm Royale served as the successor to FortniteMaster, our other statistics platform for the Battle Royale genre. We took a lot of our learnings and user insights from FNM because the 2 shared the exact same user base (high majority of RR players came from Fortnite). However, this should never substitute basing design decisions off of similar patterns, as the game metas are still different.

User research can happen anytime

Looking back, I can identify exactly what times or features should have used more user research surveys. Since none of the designers played Realm Royale, it was impossible for us to really validate our designs since we won't use the tool. The reason we neglected user research was because the time crunch didn't allow for user research surveys, as it would postpone designs for a couple of days (Realm Royale gamers were still learning how to play).

Abandoned projects still serve a purpose

Realm Royale lost 95% of its player base within less than 2 months. Inevitably, our project died with it. However, as designers we learn from every bit of experience we get. From this tool, we were able to adopt a new tool - The Impact Tool - which visually updates a gamer's stats after a gaming session. The mode statistics page also gave us new ideas to incorporate into FortniteMaster in terms of visual and information design. 

More Potentially Cool Stuff

FortniteMasterProduct Design

AthleticOutlookProduct Design

SoloGG AccountsProduct Design

Let's Chat

I'm open to chat about any opportunities, or even just to chat!

svg-image
svg-image
svg-image
svg-image