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).
Push content through News, patch updates and Battle Pass Guides
Drive user engagement with player stats, search and leaderboards
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.
The searchbar also became the primary action of the site since it allowed players to find their own or other players' statistics.
I also enjoyed designing delightful animations for the searchbar activation + autocomplete.
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.
Reduce cognitive overload by emphasizing high-level statistics
Maintain user engagement with updated match history
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)
I animated the loading / updating states as live stats would update on the page.
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?
Increase return rate by providing valuable Stat Insights for users
Reduce bounce rate by adding interactive Comparison Tool + increasing readability of detailed statistics
An animation to show the different levels of comparisons a user can select.
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.
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
📝 Exploring Solutions
Ideation through Sketching
🔬 Scoping the Solutions
📐 Refining the Solution
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
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?
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.
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
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.
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.
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.
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.
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.
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.
Early sketches to plan out the interface
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.
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.
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 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.
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.
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.
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
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.
Upon launch, this project was a huge success. We passed our expectations with marvelous results.
Visitors During Peak Period
Pages per Visit
Average Duration Stay
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.
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 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.
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.
I'm open to chat about any opportunities, or even just to chat!