Industry
Gaming
Client
DBN Software
Year
2021
Project Time
9 months
Context
Elo Hell Esports has a long history of producing live tournaments and streaming events for the eSports community.
Through DBN Software, a sister company founded by Elo Hell Esports, the team set out to turn their tournament expertise into a self-service platform that empowers gamers and organizations to host their own events.
The long-term vision included expanding into the U.S. college eSports scene.
Challenge
The eSports industry was growing fast, and so was the competition.
To stand out, Competition Haus needed more than features: it required an intuitive, seamless experience that empowered gamers to host tournaments without friction.
Solution
With an active community of eSports fans on Discord, Elo Hell invited its members to take part in the software’s development. Through beta testing, user insights, and ongoing feedback, the team built a closer connection with its audience, gaining a deeper understanding of their needs, behaviors, and goals for the platform.
Goal
Improve the usability and overall experience of the initial developer-built mockups, with the objective of:
Increasing user adoption
Improving retention and engagement
Creating a consistent and scalable UI system
Process
Our design process followed six key steps:
Competitive Analysis
User Journey Mapping
Usability Audit
Wireframing
Style Guide & Screen Design
User Testing & Feedback Loops
Competitive Analysis
Understanding the Tournament backstage
We began by exploring leading eSports tournament platforms, signing up and testing each one to understand their flows and UX patterns.
This analysis revealed best practices and gaps we could fill, guiding our design decisions and feature prioritization.
User journey
Each character has its own journey
Next, we mapped the full journey for both tournament creators and participants, identifying pain points, key actions, and moments of opportunity.
This helped us visualize how users would interact with the platform and how we could simplify their experience.
Analyzing the Existing Design
Every update comes with some Patch Notes
Before redesigning, we conducted a usability audit of the developer-created mockups.
Key issues included:
Poor contrast
impacting readability.
Weak visual hierarchy
for primary actions.
Overloaded screens
with too many tasks.
Lack of feedback
or confirmation states.
Unclear labels
and inconsistent terminology.
Text-Heavy Interface
reducing scannability and slowing user comprehension.
Wireframing
Building the gameplay before the graphics
After defining the information architecture, we moved on to wireframing the main screens. This stage focused on organizing content, prioritizing actions, and testing the flow before applying visual design. By creating low-fidelity layouts, we were able to validate navigation patterns early and ensure the interface supported users’ goals in the most intuitive way possible.
Style Guide & Screen Design
Setting the arena where every pixel plays its part
To ensure scalability and visual consistency, we developed a Style Guide centered around a dark mode interface, ideal for gamers who spend long hours on screen. The dark palette reduces glare and eye strain, creating a more comfortable experience during extended sessions.
Our design followed Material Design’s dark theme principles, applying concepts like surface and elevation to maintain depth, contrast, and clarity across all components.
After creating the Style Guide, we applied it to the approved wireframes, transforming structure into a polished and functional interface. All best practices and insights gathered from research and testing were incorporated to ensure consistency, clarity, and usability across every screen. The result was a cohesive and scalable design that aligned with both user needs and the product’s vision.
Usability Tests
Putting the design in players’ hands
To validate the new interface, we conducted usability tests with members of the Elo Hell Esports Discord community. Their feedback was essential to understanding real user behavior and uncovering friction points. By observing how gamers interacted with the platform, we refined flows, clarified actions, and ensured the experience felt intuitive, engaging, and ready for launch.
What I've learned
Bringing theory into practice
As my first real project as a Product Designer, it allowed me to apply my studies to real-world challenges. I developed a deeper understanding of design systems, visual consistency, and improved my skills in user interviews and testing.
The power of community-driven design
This project reinforced the importance of involving users throughout the design process. Collaborating with the Elo Hell community helped refine the interface and fostered a sense of ownership and excitement around the platform.
Mastering dark mode design
I learned how to design effectively for dark mode: balancing contrast, color, and accessibility to create a comfortable, visually engaging experience for long gaming sessions.
What I’d like to do
Improve developer handoff
I’d refine the documentation and design handoff process to ensure smoother collaboration with developers, a skill I strengthened in later projects.
Validate accessibility
I’d conduct accessibility tests focused on color contrast and readability. Dark mode interfaces can easily slip into low-contrast areas, so testing would ensure an inclusive experience for all users.
