I was 1 of 3 designers at TSM. Together, we created FortniteMaster, an active game community dedicated to esports and players.

FNM-hero (1)

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

Product Thinking
Wireframing
Visual Design
Interaction Design
Animation
Design Systems

What we came up with

Homepage - Expanding User Base with Content and Stats

homepage

πŸ₯… Our Goals

1️⃣ Push content through News, patch updates and Battle Pass Guides

2️⃣ Drive user engagement with player stats, search and leaderboards

3️⃣ Increase traffic through gamer celebrity profiles (Masters)

🌈 Nice-to-have additions

Eventually we added:
OBS Overlay (a streaming extension to show live stats in-game),
Discord Bot (generates image of player's stats to share) and a
Live Item Shop.

Search Bar Focus State

The searchbar also became the primary action of the site since it allowed players to find their own or other players' statistics.

User Authentication Interaction

I also enjoyed designing delightful animations for the searchbar activation + autocomplete. 

Player Profiles - Making Stats Quickly Digestible

Here gamers can check their own stats live after each match updates. Players would land on their Overview page (stats for Solo, Duo, Squad) and can view Recent Match History and Lifetime statistics.

player-profiles

πŸ₯… Our Goals

1️⃣ Reduce cognitive overload by emphasizing high-level statistics

2️⃣ Maintain user engagement with updated match history

3️⃣ Retain users by showing impact of stats via an interactive tool

🌈 Nice-to-have additions

Eventually we added:
Favorited / Recently Viewedο»Ώ ο»Ώ(toggle between player profiles)

Profile Graph Update Animation

I animated the loading / updating states as live stats would update on the page.

Advanced Stats - Increasing Average Time Spent on Stats

Competitive gamers enjoy comparing stats to friends and celebrities, and are addicted to it. How can we improve this static page into an interactive experience for them? 

in-depth_stats

πŸ₯… Our Goals

1️⃣ Increase return rate by providing valuable Stat Insights for users

2️⃣ Reduce bounce rate by adding interactive Comparison Tool + increasing readability of detailed statistics

Compare Player Searchbar Interactions

An animation to show the different levels of comparisons a user can select.

The Problem - Gamers can't find what they need, anywhere.

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. 

πŸ“° Players Need News

There is no dedicated hub for Fortnite news besides Reddit, which is more forum than news.

πŸ“Š Players Need Stats

Players need a consistent platform to track their statistics that are most relevant to them.

🏠 Fans Need a Base

Fans have no source to track their favorite pro players, leading to lost fans.

My Design 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. 

πŸ‘¨β€πŸ’» Framing the Problem

Personas
Competitive Analysis
User Research
Key Findings

πŸ“ Exploring Solutions

Brainstorming
Affinity Mapping
Ideation through Sketching

πŸ”¬ Scoping the Solutions

Considering Constraints
Scenarios
Storyboards

πŸ“ Refining the Solution

Wireframing
Lo-fi prototypes
Mid-fi Prototypes
Hi-Fi Deliverables

PERSONAS

Who are we designing for?

πŸ‘¦πŸΌ

Casual Gamer | 12 yrs old
Likes to play a few games a day
Likes to play with friends on weekends
Likes to play just for fun

πŸ‘¨β€πŸ’»

Competitive Gamer | 16 yrs old
Plays competitively for 6 hours a day
Practices with other competitive gamers to improve
Relies on statistics and content to keep updated with the game

πŸ™‡β€β™‚οΈ

Loyal Fans | 14 yrs old
Watches streamers and follows social media closely
Donates money to favorite streamers to move up the ranks
Excited to engage in gamer community

USER INTERVIEWS

We used interviews to ask what gamers would want out of a Fortnite platform:

πŸ‘¦πŸΌ Who our target audiences are

🧐 What they would want out of a Fortnite platform

πŸ’Š What problems we can solve for them

❓ How do they feel about stats? News? E-sports?

❀️ What are their motivations and aspirations?

KEY INSIGHTS

Players enjoy improving at the game by learning from statistics, guides and watching others.

πŸ‘¦πŸΌ

Casual players want to improve at the game with guides and tutorials and look up friends' profiles.

πŸ‘¨β€πŸ’»

Competitive Players want to track their statistics and analyze their performance progress amongst other competitors.

πŸ™‡β€β™‚οΈ

Loyal fans want to easily track their favorite profiles and see how they are performing in the e-sports scene.

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

Our team brainstormed ideas and completed ideation through crazy 8's. To finish, 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.

Crazy 8 Sketches & Storyboards

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.

Conceptualization - Balancing Info Density & Styling

Our team liked to quickly iterate via sketching. We digitzed our sketches to wireframes earlier so that we can focus on details for majority of the project - our pages were information-dense and required much more styling than your run-of-the-mill products. 

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.

Leaderboards - Making Filters Always Accessible

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.

ο»Ώ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.

Mode Thumbnails Breakdown - Challenging best practices to make digestible stats

4 mode thumbnails
fnmiterations

Recent Match History Breakdown

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

Advanced Stats - How can we make stats valuable to our users?

❌ These pages are bland and boring - lacking in visual appeal

❌ Stats have no deeper meaning or significance shown

❌ Users spent less than 4 seconds on average here

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

Solution - Visualize Comparisons and Progress over Time to Identify Trends

πŸ‘¨β€πŸ’» Competitive gamers compare their stats to others to see who's better

πŸ“ˆ Players value progress to see improvement

πŸ–± Visualization of comparisons and progress make stats much more digestible


Comparison Charts Breakdown - Visualizing stats to identify trends easier

comparison charts
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.

πŸš€ 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

With my strong following in e-sports, my lead 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. 

More Potentially Cool Stuff

FortniteMasterProduct Design

Google PodcastsProduct Design

Google Not So HomeProduct Design

StatsRealmRoyaleProduct Design

MuzeProduct Design

StreamLoanProduct 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