Enhancing engagement for an AI Bot Competition

Bhoos Games organized the SmartBots Coding Challenge, a four-month-long competition inviting developers and coding enthusiasts to build an AI bot for a card game. The challenge aimed at creating a platform for coders to meet, collaborate and share ideas in a fun and competitive environment.
‍
We needed a way to keep the participants engaged throughout the competition.
We designed a dashboard that served as the central hub for the competition, providing an engaging experience to the participants.

Year

2022

Timeline

6 months

Role

UI Design, UX Design

My responsibility involved designing an user interface for the different features in the dashboard via extensive collaborations with the developers to ensure technical and design feasibility.

Challenge

How might we create a fun and competitive experience for participants in the SmartBots Coding Challenge?

To make the challenge engaging for participants, the dashboard needed to address several key challenges:

A way for participants to track their performance and rankings in real-time.
Insights for participants to improve their bots and refine their strategies.
A secure way to test and submit their bot code.

Solution

We designed a dashboard to keep participants engaged in the 4-month long competition and enable them to improve their bots at every stage.

Dashboard Home allows participants to easily track and compare their performance with other competitors.

image showing the dashboard's home page. The home page features a timeline showing the key dates of the competition. It also features a leaderboard with an option to compare your rankings with your competitor's via graphs.

An intuitive analytics tab provides insights into bot performance across games, enabling participants to identify strengths and areas for improvement.

image showing the Game Analytics page of the dashboard. It features a list of games played by the bot with the scores, results, points, and a feature to play the game and see the minute details.

A Docker-based system ensures participants can submit and run their bot code safely on the server.

image showing the Docker Submission page of the dashboard.

Sandbox enables participants to test and optimize their bots without impacting official rankings.

Image showing the Sandbox page of the dashboard.

Leaderboard displays real-time rankings and detailed performance metrics to build the competitive energy.

Image showing the Leaderboard page of the dashboard.

Results

The dashboard played a crucial role in the success of the first SmartBots Coding Challenge. Although we didn’t collect separate analytics on dashboard usage, we observed consistent interaction from participants as they tracked their performance and rankings.

For the competition’s second year, the dashboard was reused with several refined features, resulting in significant engagement and participation:

725 Teams and 870 Participants: A total of 725 teams, comprising 870 participants, used the dashboard to build, submit, and track their bots throughout the competition.
94 Teams on the Leaderboard: 94 teams made it to the leaderboard, where their progress and rankings were displayed for real-time tracking.
45 Teams in the Final Stage: 45 teams reached the P2P player ranking (final stage), showcasing the dashboard’s role in helping participants progress through the competition.

The process

Designing the dashboard was a collaborative and iterative process, focused on understanding developer needs, defining objectives, and refining features based on internal feedback.

1. Requirements Gathering

Requirements were primarily brainstormed by the technical leads, with my contributions focusing on clarifying them through discussions.

Our primary users were developers and coding enthusiasts participating in the competition. Since we lacked direct access to participants during the design phase, we relied on feedback from internal developers to understand typical developer preferences.

Image showing the preferences of developers and coding enthusiast collected from the internal developers in the team.

Developers prefer a screen that shows all essential information at once with a clear hierarchy, similar to code editors.
They appreciate data visualizations for deeper insights into performance.

Many participants, especially students, used laptops with varying screen sizes and often didn’t have access to external monitors, making responsiveness a priority (though mobile optimization wasn’t required).

Objectives Defined:

Enable participants to track progress and standings in real-time.
Provide tools for analyzing bot performance.
Ensure secure and seamless code submission.

2. Designing Features to Complement Objectives

The feature ideation process was iterative and heavily influenced by the technical team’s input. My role included:

Ensuring the user interface was intuitive and user-friendly.
Collaborating closely with developers to ensure feasibility and integrate feedback effectively.

3. Handoff and Implementation

The dashboard was built using Ant Design System with some customizations on colors and few components so the designs required annotations on which components to use and how.

Designs were delivered via Figma with detailed annotations specifying component use and behavior.

Image showing a screenshot from Figma file.

Lessons Learnt

Value of Collaboration: Working with cross-functional teams, I learned how healthy conflicts and diverse perspectives can lead to better solutions.
Responsive Design: Adapting designs for smaller laptop screens posed challenges, especially in data-heavy screens.
Cater to diverse needs: Feedback revealed a missed opportunity in the dashboard to provide more guidance to participants, such as resources on building bots from scratch. This gap was partially addressed through a Discord channel, but the dashboard could have played a more central role in supporting beginners.