UX insights on the future herosphere.gg

herosphere.gg is an active free-to-play prediction & fantasy platform, offering 4 different esports games. Soon all pay-to-play contests will be on the Blockchain by integrating HEROcoin — an ERC20 token & decentralized solution for all kinds of igaming purposes.

https://cdn.steemitimages.com/DQme3861hCzwxnAKS8zENmmV8Aqh3xJE1S1wWJDukwPagdZ/1*swZcf8GS-YOUfE-V-N5uTQ.png

(Gabriel, Lead UI/UX designer for herosphere.gg)

The implementation is already in closed beta, organised in waves (read more here>>) and our lead designer Gabriel will give you an insight on the user learnings and strategic changes:During our beta waves on herosphere.gg we made preparations to capture all the user feedback we were going to receive. It has since been catalogued, prioritised and fed into our work methodology (scrum system). Much of the user critique was related to the overall experience on herosphere.gg, specifically contest search and contest participation.

Beginning with a detailed analysis of your user flows

This is why we started with creating a flowchart of our entire site. This meant listing every page, all possible user actions on those individual pages and how those relate to one another. The result was a birds eye view that gave us the site at a glance with all possible user interactions.Which we further broke down into linear actions the user could take (task flow) and varied actions (user flow).After this was done, it was off to the drawing board. We took a big step back and during group brainstorms, asked ourselves many questions, such as

Are there unnecessary elements on the site?
What should be consolidated or simplified?
What are the major upcoming features that will need to be integrated?
How and where are they best integrated?

The questions lead to a clearer picture and adjustments to the flowchart to enhance the user experience.

https://cdn.steemitimages.com/DQmavcNEqN5R4hHEFN353EjPeDcLo46ygxuL9mF8UQXBZSj/2.jpg

herosphere.gg user flow chart

https://cdn.steemitimages.com/DQmVsCs9dMCq8YeEMX6y5TUvJkVACkAuN11nwiokgrayQg6/3.png

Enhanced user flow herosphere.gg

While many aspects were improved, we continue adhering to regulatory requirements, such as in the identity verification process. This does impose some unfortunate UX drawbacks, but we worked and continue to work hard on finding creative solutions to smooth out the bumps for our users.

Finding the pain-point and working from there

Given that a large portion of our beta user feedback was about the contests, we decided an entire overhaul was necessary. Our approach was to develop multiple prototypes alongside each other and ultimately distill the best functions and elements into one ultimate contest user experience. Much of the focus was put on the following features

Contest display & overview
Contest search
Contest speed and FUN (short game loops, consolidated on one page, visualised details on the match (tournament bracket, map, etc)
Enhancing social aspects on the platform (inviting friends, adding a contextual chat)

We worked on two separate prototypes simultaneously, both trying to capture the above mentioned features.

https://cdn.steemitimages.com/DQmU6m9DSeGPRkYbzjciW7WhLfZTJU7xcFQofV3et6uBUjy/4.jpg

https://cdn.steemitimages.com/DQmSRQrQz1X2jidAPHsUeEnhauJSj6zehBGVtKuhTwRipay/5.jpg

Hand scatches from our lead designer Gabriel on two prototype versions

A prototype is a simple and rudimentary design with limited interaction capabilities. It is used to quickly evaluate concept validity and do quick redesigns where things aren’t working. This design and evaluation process is repeated, until we believe to have an outcome that our users will love.

https://cdn.steemitimages.com/DQmUoUKKB6znJk9bAFLbb6N4iijeMDiwN9ZVAEp84K7hpUQ/6.png

Design Prototype 1 for the new contest page on herosphere.gg

Our first approach was with user friendliness and ease of use in the foreground. This meant having more steps before a user would get to their desired contest (compromising speed for ease of use)

https://cdn.steemitimages.com/DQmdyCX9MgwRFUK9ha3hQEtxdnbFQngDXXNgpLieX2AE8bV/7.png

Design Protoype 2 (initially more complex but powerful in the long run)

The second design has a steeper learning curve at first. However, we believe once users get the hang of it, they’ll be able to leverage the platform immensely and put their esport-expertise to the test!Overall we want to throw the user into the middle of the action the moment they log in and create a vibrant social platform where something is always happening and users can jump in at a moments notice to give them the gaming experience they love from esports.Over the next weeks we’ll be further developing and evaluating these prototypes. We look forward to releasing the best possible esports igaming platform to our users.

Discussions

If you have questions, feel like discussing anything or want to sign-up for news, pls get in contact on any of our channels:HEROcoin: https://www.herocoin.io/ (newsletter sign-up right there too)
Bitcointalk: https://bitcointalk.org/index.php?topic=2116864.0
Reddit: https://www.reddit.com/r/HEROcoin/
FB HERO: https://www.facebook.com/HEROcoinio/
FB Herosphere: https://www.facebook.com/herosphere.gg/
Twitter: https://twitter.com/HEROcoinio
Telegram: https://t.me/joinchat/FsEwOwtrCZMWwHokEj70Gw
Youtube:https://www.youtube.com/channel/UCi6gLMu21XsrnWcdS0VOwdw

bon3s90