FortniteMaster

FortniteMaster is the hub for everything Fortnite. 
Check out how it was made!

cover image

Overview

With Fortnite's resounding success since its emergence (125 million players, hundreds of million dollars a month), we were tasked to create FortniteMaster, a portal to allow gamers to check their Fortnite stats and leaderboards for the top players in the world. It would also serve as a content site that features Fortnite news articles, skins, map and mobile updates. With Fortnite's competitive arena emerging, FNM would also cover E-sports (tournaments, players, teams, earnings). 

Role & Duration

Product Designer | TSM
Team of 3 designers
2-3 months

Wireframing, Product Thinking, Visual Design, Prototyping, Interaction

The Problem

With Fortnite's emergence in the Battle Royale arena, millions of players would flock to the new sensation without a home for news, content, or statistics. There is no central hub for either of these funnels. When new games arise, new players need a central place to learn more about the game and find their own gaming statistics in the realm of e-sports competitive play. 

Currently, the community prefers certain outlets for various needs. Key problems: 

  • The most popular Fortnite statistics site with market share is poorly designed and lacks good information hierarchy. 
  • There is no hub for Fortnite news besides Reddit, which is more of a forum than a news site. It is subject to toxic crowd behavior and opinionated views. 
  • Other item database sites lack modern design and systematic hierarchy.
  • No site currently tracks Fortnite e-sports in any fashion - team rosters, earnings, new signings, news, etc. 

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. 

User Research

Upon coming across these problems, we conducted User Research to identify who our target audiences are, what they would want out of a platform that caters to a Fortnite audience, and what problems we could solve for them. 

It's important to know how users generally feel about statistics, content, and e-sports when it comes to current platforms (which is basically just Reddit and some small-scale websites). I would also like to know what kinds of features would motivate gamers to use our platform more frequently when they want to learn more about Fortnite or their own statistics. The following questions we'd address through research: 

Target Users:
1. Do all gamers like to follow their statistics? 
2. What statistics would users want to follow for themselves?
3. How do gamers find new streamers to follow? 
4. What expectations do our gamers have for a statistics-tracking product? What expectations do they have for Fortnite content in relation to a statistics-tracking product? 
5. Which of our competitor's features do they dislike the most? What could be improved? 
6. What about Fortnite streamers and e-sports do people enjoy? 

Key Findings

We conducted user interviews and surveys through the Reddit community. Here are our findings:

 Competitive players want to track their statistics and be able to analyze their progress and growth among the competitive scene. 

Casual players want to improve at the game with guides and tutorials and look up their own & friends' statistics. 

Twitch / Streamer fans want to easily access their favorite streamers' profiles and see how they are performing. They also want updates on e-sports to stay up-to-date on their favorite teams. 

Design Challenge

If Fortnite gamers of various skill levels want to improve at the game, how might we help them have a smooth experience from registration to loading their stats on FortniteMaster and learn more about the game?

Exploring the Solution Space

Rapid brainstorming with structure was an integral activity to come up with creative features and solutions to our problems.

After the brainstorm, our team completed ideation through sketches. We engaged in crazy eight sketches to push our creativity to the limits while being efficient with our time.

To finish it off, we sketched user storyboards for each of our user segments to further illustrate the design problem with a possible solution. Storyboards are an immense tool to sympathize with the user base and reconsider whether the solution is realistic or not in solving the user's problem.

20190508_034412

Crazy 8 Sketches: Possible Solutions for Design Problem

20190508_042258

User Storyboards: Expansion of Selected Sketches

Identifying Opportunities

Find the most relevant stats first

Gamers want the most relevant stats (K/D, Wins, Kills, Matches Played) up top and highlighted. Moreover, they want bigger stats for Solo / Duo / Squad to track their performance.

Configurable Leaderboards

Competitive players want to be at the top. Setting multiple preset leaderboards allows for players that dedicate their lives to the game to be at the top and claim the throne.

Easily digestible analyses of performance

Visualization of statistics help gamers see if they're improving or not. Comparisons to previous season stats or other players' stats (for example, squadmates) give them an idea on how they are standing.

View-worthy Content Articles

With so much clickbait content designed to garner single views but not devoted subscribers, FNM instead pushes articles that the community comes back to - Battle Pass Guides, e-sports news, patch notes, and more.

E-Sports 

With growing stars like Ninja and TSM Myth and the surging popularity of Twitch streamers, fans need a place to track all of their favorite gamers' tournament performances, latest e-sports signings and earnings.

Identifying Constraints

Limited resources

With Fortnite being a newcomer to the e-sports scene, many of the trending gamers lack proper portraits and backgrounds. 'Pros' had no partnership to FNM so our website would inevitably load pixellated shots.

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

Since we were pressured to push pages every day, there was limited time to carry out full-fledged research processes before designing. 

Team Size

Tracking tournament results is no easy venture. Unlike League of Legends where all stats are tracked via API, Fortnite does not extend their API to the e-sports scene. That would require manually tracking 100's of players' performances in stats. Even with the basic stats (kills, placement), this proves to be nearly impossible without numbers of our own.

Personas

I created three personas and one anti-persona to better understand needs and goals of my users. After, I picked my two primary personas and conducted story mapping for a better product development. 

By using all previous efforts, I solidify user flow chart and draw wireframes. With lo-fidelity wireframes, I conducted user testings and received precious feedback for design iteration.

user persona

Competitive Gamer Persona

Planning

As with many of our projects, we immediately spec out the features for our website in order of priority on a Dropbox document. We address ways we can improve on previous shortcomings, bugs, important questions that direct our product, and overall feature requests. 


In the beginning we list out the MVP features that make up the core of FNM, and continue to describe supplementary features that would add delight to the user. This is TSM's whiteboard equivalent for other teams. 

We continue to use this document to track our production flow. Large to small edits, design reviews, upcoming checklists, dev bugs, and completed tasks are all tracked in our flow.

Conceptualization

We started creating low-fi concepts for primary use cases. After having a go-ahead from the lead PM on the flow and architecture, we began digitizing our sketches to wireframes. Our wireframes stayed closer to hifi designs to save more time in the long run, rather than a mere skeleton design. Since gaming sites require more styling, high quality wireframes were very important to embed the look and feel of the final product.

sketches

Early sketches to plan out the interface

The Solution

FortniteMaster makes it easy to track any player's statistics in a convenient profile page while providing constantly updated content on news, updates, and esports for all types of viewers.

Quickly show the most important stats while providing a thorough image of a player's full statistics. Provides an in-depth look into a player's progress in comparison to previous seasons and to other players. Get updated on everything Fortnite - patch notes, community news, esports. Find any important details on an esports team in Fortnite, big and small, old and new.

homepage

Homepage

The homepage underwent a lot of surgery over many visual design iterations. As we came across more constraints (time, content, feature feasibility) and problems (branding, competition) along the production phase, we had to reconsider the direction of FNM - what its purpose would be and how the design would reflect that.

Homepage v2

Version 1
First iteration focused on news / content with a carousel element for news, followed by a feed. 

Homepage v3

Version 2
Replaced sidebar column with Score leaderboard to push up leaderboards page.

4 Homepage 3c Copy 3

Version 3
Reprioritzed features on homepage due to lack of steady content and focused unique features. 

homepage redesign presented

Current Live Version

As our competition grew stronger, we had to reconsider the direction of FNM. Instead of leading with our statistics, we knew our ramped-up content team, which other websites lack, would help keep a consistent viewership. Content would be up and front, followed by our distinguishing Masters feature, finishing with a News feed of trending articles. The sidebar advertises additionally:

1. Battle Pass Guide that attracts thousands of viewers who use these detailed guides weekly for in-game points,

2. Well-known OBS Overlay used by TSM streamers with millions of views (Dakotaz, Myth, Daequan, Hamlinz, HighDistortion, etc.),

3. Fortnite Stats Discord Bot that generates a shareable graphic of a user's Fortnite statistics, and also features ad space for our popular sponsors,

4. and a daily Item Shop with a timer to show what cosmetics are out for players to check immediately without needing to open the game.

Search Bar Focus State

The searchbar also became the primary action of the site since it was a powerful feature for FNM, allowing players to search themselves or other players’ statistics.

User Authentication Interaction

Animations showing searchbar activation process and autocomplete as user types in the field.

Leaderboards

Since the FNM Leaderboard is a straightforward page, it didn’t require as much planning and redesigns as the other pages. Since we had thought a Leaderboards page previously from PUBG.net (a previous TSM project), we didn't need to reinvent the wheel. We could adapt that page to work with Fortnite with some adjustments.

1 Leaderboards

Version 1
Adapted Leaderboards from PUBG.net, our older Battle Royale-genre product for PUBG.

3 Leaderboards v3

Version 2
Consolidated filters as much as possible in a single line to focus attention on leaderboards.

Most Kills – Leaderboards

Version 3
Set presets for leaderboards to streamline navigation across different leaderboards. 

Screen Shot 2019-02-01 at 4.21.43 AM

Current Live Version

Leaderboards have been pushed up front and center, with filters stickied to the top of the page. Since users scroll down the list, the filters got lost and the user would lose that functionality. Thus we froze the filters row at the top.

We added the preset filter dropdown to make them more accessible, as opposed to the last iteration where they were not available unless the user clicked on the navigation.

View Live Design

Player Profiles

The Player Profile is where gamers can check their own stats live after each match updates. Players would land on their Overview page, which displays overall performance stats over the 3 modes (Solo, Duo, Squad) as well as show Recent Match History and Lifetime statistics on the side.

Player Profiles

Version 1
Adapted design layout from PUBG.net, one of our older Battle Royale-genre products.
 

3 Pro Profile

Version 2
Filled in graphs to bring visual balance, took out unnecessary buttons and unrelated features.

4 – pro profile

Version 3
Kept the filters simple with just mode and season, simplified main stats on top.

Mode Thumbnails Breakdown

The mode thumbnail was the most prominent feature of the Player Profile page. We designed it to be the forefront of the profile because it provided the most important statistics to players. Thus it would have the strongest visual presence and its statistics should be easily digestible for viewers.

4 mode thumbnails
fnmiterations

Iteration work :)

Profile Graph Update Animation

Animation showing Mode summary graphs updating as stats update on the page. Statistics update on the page whenever a match is completed and FNM pulls stats from Fortnite.

Recent Match History Breakdown

The RMH section also underwent significant changes. It would be the most strongly updated section of the profile pages and oftentimes the main reason they came to check our website. The most important considerations for these redesigns were deciding which stats to display and how to cleanly layout 6 statistics and labels without cluttering the space. Text hierarchy, iconography and spacers helped us achieve a clean design that is easy to scan.
 

match history evo
[Intermediary] Match History

Final Design

After weeks and months of adapting this page, we landed upon this final design for the Player Profile page. We also designed a ‘View Impact’ tool that would showcase how a player’s recent match history would impact the player's overall stats. Clicking 'View Impact' would trigger an animation that changes all affected numbers to count up or down. 

View Live Design

In-Depth Stats - Design Challenge

Once players attain a summary of their stats from the Overview page, they can delve deeper in the individual Mode pages. Here they can view more intricate statistics, such as their kills per match and score per minute.

However, this section was bland and boring. The page had no interaction or any deeper insights for the user. It was purely just numbers on a screen - little value.

The web analytics showed. The average user spent about 4 seconds on this page before clicking back to another page.

How could we increase the Average Time Spent on In-Depth Stats?

1 indepth stats
4 Stats by Mode
5 Stats by Mode Hover

At first, we thought that it was just because it wasn't stylized well enough, so the majority of our first iterations involved restylizing the colors and type hierarchy. No surprise, the user spent little to no time here. 

Stat Charts

Solution

As a user, I knew there was potential for this page to have more purpose for the user. I knew that competitive gamers enjoyed comparing stats, and are in fact addicted to it. They compare stats to other popular players such as Ninja, and see how they match up to the best players in the world. So I devised an interactive tool that could compare players, or could compare your own stats to previous seasons to track progress and improvement. As a result, the user would see exactly which stats would prove which player is triumphant. 

Comparison Charts Breakdown

Since this in-depth Stats page was going to display a slew of numbers, it would be helpful for players to visualize their progress. Visualization of stats make it easier to identify trends in their performance - areas they have been improving and areas they need to work on.

comparison charts

Compare Player Searchbar Interactions

1) Click ‘Add a Comparison’
2) Type in username
3) Select a Season to compare
4) Done

User can then proceed to remove the selected username and search a different player if desired. Then the process would start over from Step 2.

final Stats by mode

Final Design

We developed the page from a simple static statistics table into an interactive tool that compares progress trends over time with helpful Stat Insights on the side that teaches players what the numbers mean.

View Live Design

22.75 seconds

After a month of the tool’s implementation, we saw an increase in average time the user spent on this page by 22.75 seconds. That's over 5x longer than the initial design.

FortniteMaster E-Sports

As Fortnite grew into a behemoth of a video game, competitive Fortnite was inevitable. We had to capture the competitive user base of Fortnite with tracking tournament events and top teams and players’ statistics and earnings. There is no official earnings tracker or competitive player standings so we wanted to be quick to move into that space. We started out with 5 pages: Homepage for news, Specific Team page, All Teams page, Player Rankings page, and Specific Player page.

E-sports Home

Home with News Rows

All Teams Page

All Teams Page

Specific Team

Specific Team Page

Rankings Page

Rankings Page

Specific Player

Specific Player Page
2 Home with News Rows – Cleaned up

Home with News Rows

Here fans can find the most updated information on esports news and events. They can also view upcoming matches and recent match results, along with player rankings and the top esports teams.

2 Specific Team Page

Specific Team

Here fans can find the most updated information on esports news and events. They can also view upcoming matches and recent match results, along with player rankings and the top esports teams.

Rankings Page

Rankings

Here fans can find the most updated information on esports news and events. They can also view upcoming matches and recent match results, along with player rankings and the top esports teams.

Specific Player Profile

Specific Pro Player

Here fans can find the most updated information on esports news and events. They can also view upcoming matches and recent match results, along with player rankings and the top esports teams.

Impact

Upon launch, this project was a huge success. We passed our expectations with marvelous results.

2.1 m

Monthly Visitors

803k

Unique Visitors

6.3 m

Visitors During Peak Period

31.8%

Bounce Rate

7.07

Pages per Visit

9:08 min

Average Duration Stay

Project Learnings

Since this project, I always look at usability tests to look at a product’s weak points along the way, not only at the end of the project, because it can unearth valuable insights for other pages or even products for similar reasons. 

Pair Design is Awesome

Working mainly with my lead, we had a great pair design process when it came down to Fortnite E-Sports. With my strong following in e-sports, she knew I’d pull through for product features as to what the user would want to see, and pair design was a great experience for me to work directly with someone from the brainstorming stage to the end stage. 

Crazy 8 Sketching

Crazy 8 Sketching proved very useful for us because it helped me come up with my favorite tool, the compare tool and it helped our product’s metrics a lot when it was released. 

UX and UI Balance

Balance between UX and Visual Design is crucial in gaming sites because for gaming sites, stylizing can be a huge hit or miss in the user experience since gaming-related products tend to be a lot more flashy than conventional tech products. Progressing through wireframes to lo-fi mockups to hi-fi screens over several iterations got us to where we wanted to be. 

More Potentially Cool Stuff

Google PodcastsProduct Design

AthleticOutlookProduct Design

StatsRealmRoyaleProduct 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