Battlefy is trusted globally by organizers, competitors, game studios/publishers, and brands to create, scale, and market esports competitions. Battlefy is the easiest way for gaming fans to start, manage, and find esports competitions for all major game titles. A portion of my role included assisting the product team in translating their user research and stakeholder goals into relevant and scalable design solutions. Here are a few product features I have had a hand in:

Strongboxes, Battlefy Users' Digital Presence and Player Rewards

What can the most active users on Battlefy purchase on the ecosystem? Will active users want to pay for a "Premium" experience, that involves getting rewards or status? One solution we decided to explore was virtual items ie. avatars. My role in this project was to design an armoury where users can customize their player identity and figure out wheter or not they want to purchase it or they can earn it through completing tasks on the platform ( joining tournaments, winning tournaments etc). Read more about it here.

UNBOXING THE REWARD

We wanted this to be a slick experience. The unveiling of the rewards players earned had to have a positive emotional aspect that would encourage the users coming back for more.

Crate design by Chris Lee | CSS Animation by Adam Seckel | Prize unveiling sequence by me.

EQUIPPING THE VIRTUAL ITEMS

Users will be able to distinguish whether or not they own a specific virtual item. In this flow, the user owns all the virtual items as indicated by the green checkmark sign and the CTA to equip is in full opacity.

 

EQUIPPING UNOWNED ITEMS

If Battlefy users do not own one or more of the virtual items they are "trying" on in the armoury, the CTA to buy in Battlefy currency will be called out and they will be lead to buy a specific amount of currency in order to 'equip' those virtual items.

 

VIRTUAL ITEMS

In addition to designing the flows for how users would interact with the armoury and equip the virtual items, I got to create a few of them myself! Vector graphics created in Illustrator CC.

Player Profile

I had the opportunity to redesign the player profile specifically with the goal of increasing profile views and giving users an incentive to view their own profiles as well as others. To serve this goal,  providing information on the user's skill is vital so players can gauge their competitors' skill and progress as well as their own through the tournaments they play on Battlefy. This first iteration focused on the most popular game title on the Battlefy platform which was League of Legends (LoL). Read more about it here

Previously, there wasn't anything on the player profile that was particularly engaging that would motivate users to view each other's profile.

Preliminary wireframe for the new player profile.

After

Profile pages now include information that would help gauge the player's progress and their history on Battlefy. As well, it also shows whether or not they have ever come in 1st, 2nd, etc. for any tournament played on Battlefy. These stats were based on what most LoL players look for.

UI Kit

What happens when you have 2-3 types of buttons and font sizes from 4 pt, 7.93 pt and up to 213.5 pt? And those 2-3 types of buttons are used generously on screens and screens of your beloved web product. Not to mention you have 3 different kinds of drop downs, 2 kinds of input fields and variations of any other UI elements you can name. Plenty of visual inconsistency and potential user confusion when it comes to trying them to perform a primary action or task. Behold, the Battlefy UI kit.

Outcome

While this wasn't something that helped grow user acquisition or assist in any particular stakeholder goal, the goal was to create a system where these predesigned elements could be used consistently and correctly. As well, design and development time could be cut down in-house as the components were already pre-made and defined in a master copy. Furthermore, we wanted more clarity regarding the actions users could take. Prior to this change, it was very hard to distinguish what was the main call to action. With this new updated UI kit, the hope is for better clarity around the primary action that needs to be taken.

uikit_b4afteruikit_b4after