We integrated Blizzard's Hearthstone deckstring feature in-app to provide players a smoother tournament experience and ensure competitive integrity.

Problem

One of the key elements to becoming a trusted competitive platform is creating experiences that uphold competitive integrity. Our platform didn't have guard rails to deter players from cheating. Hearthstone is a strategy-based online card game by Blizzard and consistently has one of the highest monthly active players in Battlefy. Organizers were asking players to input their deckstrings as a part of tournament registration. They then export this information to a .csv format, where they can see every card in text format. This information lets the organizers know whether a player cheated or not.

Context

In February 2018, Hearthstone was consistently the platform's 3rd biggest game with 1056 active tournaments (8.6%) and 36k tournament joins. Hearthstone launched their deckstring export feature. This allows players to export a unique code for each deck. In an open format competitive tournament, players may bring 3-4 decks to use and their opponent bans one deck.

The open deck format is the official Hearthstone tournament format. This simply means that players' cards are viewable by their opponents. Since this is a strategy-based card game, this format ensures competitive integrity as players and organizers alike will be able to verify that players aren't using cards they didn't select. It also allows players are able to strategize and plan for their matches.

Goals

1. Enable players and organizers to easily enforce competitive integrity of Hearthstone tournaments. Supporting decklist management is a distinct advantage over our competitors, which will enable us to onboard more Hearthstone organizers.
2. Reduce the time-churn and hassle that organizers go through from the current product implementation.
3. Support competitive formats for Hearthstone tournaments created by Blizzard (Open and Closed Decklist formats) to promote the game's esports community. 
4. Impress Blizzard by delivering a high quality product and receive positive feedback from both organizers and players.

Solution

A Hearthstone player's bread and butter is their decks because it is a strategy-based card game. Players spend their time evaluating and organizing cards. For this year's Hearthstone Championship Tour (HCT), we wanted to provide players the true esports experience by supporting open deck format (official HCT competitive tournament format) in-app.

Players are now able to scout their opponents' decks in a format that they're used to and employ a well-informed strategy for their matches. On hover, more card information is revealed. This also allows the players to analyze the meta of the tournament.

Decklist management is essential for organizers to maintain competitive integrity. This allows them to see all registered players' decks at a glance without having to go through the hassle of exporting deckstrings.  

Results

We got an amazing response from the Hearthstone community. Withstanding an onslaught of raging tweets from pro Hearthstone players and organizers to completely winning the community over. Blizzard was also very impressed with the dedication and hard work we put into building a great experience for one of their biggest online games. Overall, we exceeded our users' expectations because of the attention to detail and delight. 

My Role

UX Design, UI Design

CREDITS: Justin Wong, Eric Leong, Sophia Lee, Matthew Mayer, Chris Lee

Process

To ensure that players aren't using cards they didn't declare for the tournament, organizers added custom fields in Battlefy asking for the 3-4 deckstrings during registration. Due to a lack of a common identifier for custom fields (as they can be anything from email to phone number), we weren't able to validate whether players are submitting actual deckstrings or dummy text. Organizers would then export all deckstrings onto an excel sheet (using a .csv export feature), which they would need to have handy during the tournament. From the excel sheet, they can copy and paste deckstrings on a notepad and see the complete list of cards. 

By hearing the inefficiency of this tedious workflow from organizers, we gather edeverything we knew and put our minds into a potential solution.

What are Open vs Closed Decklist formats?
In a Closed Decklist format, players are not allowed to see each others' decklists. Submitted decklists is really only for organizers to verify cheating.
In an Open Decklist format, players are allowed to see each other's decklists after tournament starts. Players can use decklists to verify if their opponents are cheating, so it's not only the organizers' responsibility. An argument for the downside of Open Decklist is that seeing opponents' cards makes playing the game "easier", but that is debatable strategically.

Research

Only one of our competitors supported decklist management for their platform. However, the experience was extremely transactional. It lacked intuitiveness (show me my cards when I paste the deckstring quickly) and delight (show this to me in a way that's both familiar to me and excites me). We saw an opporunity to create a visceral experience for both players and organizers.

Besides looking at the competitive landscape, I also had to familiarize myself with the game. I downloaded it and immersed myself in the emotions that one goes through when joining a Hearthstone tournament on Battlefy. I wanted to truly understand what a player's experience is from preparing for the tournaments on the game and competing on Battlefy.

I opted to validate this high level journey with users on Discord, the communication tool of choice for gaming. We are a part of several Hearthstone organizers who send announcements and communication out through their Discord servers, so it wasn't difficult to shoot some Hearthstone players and ask whether we are solving the right problems.

User journey

For every project, product managers in Battlefy write user stories to communicate the product vision through different lenses. This allowed us to talk about each use case, through the lens of our primary personas. This also helps everyone in the team epathize with players and organizers. 

I started by mapping out the ideal user flows. This allowed the product development team to talk about the problems and a variety of solutions in real-time. To make it more effective, outlining the pros and cons to each solution helped the product manager and engineers make informed decisions. We went through a few iterations of the user flows, without visuals to keep the focus on the experience and information architecture, not the UI.

Once we've all agreed on our ideal experience, the engineers and I worked in parallel to meet our 3 week deadline. The engineers drew the technical diagram, which was a catalyst of discussions regarding  scope and estimating timelines. As for design, I'm sketched different ideas and whiteboarded with the team on some challenging questions.

Sketches

Mockups

The short timeline only served to inspire the team. We challenged ourselves to think outside of the box and break UI consistency. After all, consistency is just a means to an end (clarity). How might we design a more visual experience for our players? How might we display the cards in the most readable format?  

Once the UI was built, we tested the product as a team. The test plan included browsers, devices, and user types (player and organizer views). This helped us catch the critical bugs that we needed to fix before launch and identify bugs that we were willing to launch with. The MVP didn't have to be perfect, but it had to be seamless enough to elevate our users' quality of life and play.

By supporting decklist management, we've given viewers the opportunity to view their favourite pro Hearthstone players' decks. Organizers and fans alike can also analyze the meta of the tournament, which they share later on in forums and social media. The ability to study a player's decks is crucial to successful matches. Surfacing this information to the users in a simple and readable manner on the app has greatly upped the strategic aspect of Hearthstone tournaments on Battlefy.