Developing a new UX/UI for an esports platform

Brag House

Brag House, an American startup, is the first vertically integrated social network for the casual college gamer and their communities. Through its gamified features and capabilities, and the spirit of college rivalries, current college students and their alumni get to experience gaming in a new and exciting way! Users can spectate and support their friends while playing rival opponents, place in-game stat-based predictions to win Bragging Rights and Prizes.

The Brag House team approached us for assistance with design, and our collaboration evolved into a more comprehensive redesign of the UX/UI and the development of user scenarios with the purpose of launching a new MVP.

How does Brag House work?

The main goal of Brag House is to connect audiences and streamers in an organic and inclusive way. Streaming platforms like Twitch have already implemented a range of mechanics to engage viewers, such as chat comments, gifts, and subscriptions. Various monetization methods are employed to retain streamers, motivating them to create interesting content and transform streaming from a passive income source into a highly lucrative profession.

The killer feature of the service is the ability to integrate streams from multiple platforms (Twitch, YouTube, GoodGame, Trovo, etc.) into one and allow users to place  predictions on what will a final outcome be for an in-game stat. For example, in a Rocket League stream, a Brag may be “how many goals will John_Smith score during his first match against Dan_001?”

During stream creation, several of these predictions (referred to as "Brags" within the service) and possible outcome options can be added. Viewers choose the outcome they think will be the correct one by using the internal currency (Brag Bucks). After the stream ends, the users find out the final correct outcomes of all the stream’s Brags. Winners (those who correctly predicted the outcome) receive a portion of the overall prediction pool.

By default, the service is free, allowing every user to make predictions, watch streams, and start their own without any additional investment. Through a paid subscription, streamers can have access to additional features and tools that could amplify their earning through the Brag House platform.

Viewers receive a daily supply of free Brag Bucks and can purchase more if they want to participate in a greater number of Brags (i.e., predictions). Users can choose to purchase different Brag Bucks chest packages that have a higher multiplier the higher the cost of the package is. These multipliers increase the base range a user may receive through these  packages. 

In addition to participating in predictions, Brag Bucks can lead users to win loyalty tokens that can be redeemed for digital and physical prizes from Brag House’s virtual store. The store offers clothing and accessories featuring the branding of Brag House and its partners, including game publishers.

Problem: User Barriers in the Initial Version of the Application

The service team approached us with a ready design and a test version of the application. Based on initial feedback, it was found that using the application was inconvenient due to barriers, unnecessary clicks, and uninformative screens at almost every stage, from registration to launching streams and predictions. Under such circumstances, it was not possible to develop the application further and drive traffic to it.

User convenience is a crucial characteristic because, in the current competitive landscape, if an application has serious design flaws, viewers and streamers can easily switch to an already established competing platform, regardless of how attractive the conditions may be.

We were asked to help with a small task, the registration form. While a classic form and buttons for social media login might seem sufficient, the esports niche has developed its own standards. Users want to integrate various products and platforms such as Twitch, Discord, and more.

We realized that it wouldn't be possible to partially redesign the interface, since new nuances specific to this user segment would arise at every stage. For example, the in-app chat should focus on more emotive communication, with stickers, gifs, and emojis. The speed of reaction to events is crucial, rather than the informativeness of the chat. To make such a chat user-friendly, priority should be given to quick access to these resources, rather than textual capabilities.

Due to these specific requirements, we proposed developing new interface mechanics and enhancing existing ones wherever possible.

Solution: New User Scenarios and App Design

Over the course of a year, we iteratively developed the application design, taking into account the specifics of iOS and Android platforms. We created a web version and adapted it for different screen resolutions. To facilitate further development, we created a detailed UI Kit with descriptions of elements and mechanics, while also striving to preserve and reuse design elements from previous iterations, such as branding elements.

During each iteration, we worked closely with the Brag House team to thoroughly analyze the logic of features, ensuring that we not only selected the best implementation but also prioritized tasks. This allowed us to strike a balance between design speed and the release of new features for reporting to Brag House investors.

Providing Relevant Content Directly After Registration

Right from the first screen after registration, Brag House will offer users content that aligns with their interests, including connections to other platforms, streams, competitions for their favorite games, and preferred genres. To implement this, the user profile can be personalized during the account creation phase.

A significant portion of the service's audience consists of young members of the streaming community, such as school and college students. If we know which college a user attends, we can immediately offer contacts, content, and communities from their immediate surroundings. This is why we added school affiliation to the standard authorization process. Otherwise, the authorization process follows the steps found in other popular game streaming services: asking for primary identifiers (streaming platform usernames) and inquiring about user preferences in detail.

Working on the Web Version

At some point during the development of the mobile application, we surpassed the progress of the Brag House web version. Recognizing the importance of reaching the maximum number of potential users across all platforms, we began working on the web version as well.

We developed the interface for the web version while retaining all the engaging mechanics of the mobile version. We also reused more of the original design materials to ensure the development team's work was not nullified, as they had already implemented some functionalities by that time.

The Result — A ready-to-launch MVP design for both the mobile application and web version 

Not only did we eliminate barriers in user scenarios, but we also added new features selected in collaboration with the experts from the Brag House team. The application now looks more cohesive and addresses a wider range of user needs. The founders also gained a fresh perspective on their product through our expertise.

The service team is ready to launch the MVP, and after receiving feedback, we will conduct research and analyze key metrics to gain a deeper understanding of user needs and fine-tune the product to meet their expectations.

If you would like to learn more about our experience in developing streaming services or explore other case studies related to the industry, you can find them here. At Singula Team, you can find specialists who will work as your in-house team, providing the level of involvement and care your ideas deserve. Simply reach out to us through the form below, and we will contact you to learn more about your product.