Enhancing User Experience for Learning Competitive Coding.
In the world of competitive programming, where contests like ICPC and IOI reign supreme, young coders race against time to solve intricate algorithmic puzzles. At Leagues of Code, we started with a dream that seemed almost too ambitious for our small team: to create our own programming competition that would, one day, stand alongside these giants. I joined at a pivotal moment, when this goal was ready to take its first steps. My mission? To transform our learning platform into an arena worthy of hosting our very first internal competition – a crucial milestone in League of Code's journey from teaching platform to competitive programming powerhouse.
Product Design, Case Study
Perfecting the Learning
Competitive programming, epitomized by the International Collegiate Programming Contest (ICPC), represents the pinnacle of algorithmic competitions. This prestigious arena draws talented students from universities and high schools worldwide, challenging them to solve complex computational problems under intense time pressure.
At Leagues of Code, we mentor and prepare aspiring competitors for these demanding contests. Our recently redesigned platform focused on developing the critical problem-solving skills, algorithmic thinking, and coding proficiency essential for ICPC success.
The Challenge
Leagues of Code teaches aspiring competitive programmers to level up their skills. Our platform needed to evolve from a learning environment into one that could support full-fledged programming contests while maintaining its educational foundation.
Enhance the platform's technical capabilities to support programming contests
Maintain simplicity and ease of use for novice programmers while adding advanced competitive features
Kickoff — Picking up
the pieces
ICPC's platform served professional programmers well, but its steep learning curve created a barrier for newcomers to competitive programming. We saw an opportunity to bridge this gap, creating an environment where novice programmers could begin their competitive coding journey without feeling overwhelmed.
What set us apart was our emphasis on mentorship. Unlike other available platforms, we needed a system that could seamlessly integrate our mentors – the backbone of our educational process – who guide and nurture upcoming competitive programmers.
This ambitious goal demanded a custom platform robust enough to support both educational growth and professional competition.
With our first official contest scheduled during an upcoming summer bootcamp, we had a three-month window to transform our platform. Our existing student base provided the perfect testing ground for this step. The timing was crucial – we needed to identify and solve key challenges to ensure a successful competitive programming event.
Leaderboard was hard to decipher
Competition leaderboards can be intimidating walls of numbers, especially in competitive programming where multiple factors determine rankings. The platform we were initially using lacked clear explanations for these statistics, leaving newcomers to decipher complex metrics like penalty time and partial scores on their own. We needed to design a leaderboard that not only displayed rankings but made them instantly comprehensible – even for students facing their first competitive coding scoreboard.
Decluttering Problem Statements for Competition Speed
Every solution attempt created a new log entry, and determined contestants could generate dozens of submissions for a single problem. This rapidly growing submission history would overshadow the problem statement itself, forcing contestants to scroll through a sea of attempts to reference crucial problem details.
The Redesign - Building the Foundation for Future Growth
The redesign focused on strengthening our platform's core: the problem-solving experience. By prioritizing this crucial interface where contestants spend most of their time, we laid the groundwork for our platform's evolution from a learning environment to a full-fledged competition host. This strategic focus ensured we could deliver a polished experience for our first competition while setting the stage for League of Code's broader ambitions.
Creating focus in the heat of competition
To tackle the information overload, we created distinct spaces for the problem statement and submission logs. The new design separates these elements into switchable views, allowing contestants to focus fully on either understanding the problem or analyzing their submission attempts. This clean separation maintains easy access to both while eliminating the visual clutter that previously hindered quick problem comprehension during competitions.
Initial screen — submission information was paired with problem statement
Seperated the two with tabs to provide easy navigation between the two
We introduced distinct visual identifiers for each problem type, enabling contestants to instantly recognize multiple choice questions, algorithmic challenges, and mathematical problems at a glance. This visual system eliminated the need to read through each problem description, streamlining the selection process and helping participants strategically prioritize their solving approach during time-sensitive competitions.
Coding
Math
Multiple Choice
Reading
Unlike the initial design that only used on icon to identify each type of problem
Coding
Math
Multiple Choice
Reading
The problem name and navigation were disjointed. Countdown timer for contest did not take priority.
Consolidated both the name and navigation. Countdown timer took main stage at the top. It was the most important information during contest.
Managing the Submission Timeline
Each problem comes with multiple test cases that validate solution correctness, and contestants often make numerous attempts before achieving success. As these submission results accumulated, they would dominate the interface, making it difficult to reference the problem statement. By creating a dedicated space for submission history, we gave contestants the ability to focus on either understanding the problem or analyzing their previous attempts – a simple change that significantly improved the solving experience.
Designing a leaderboard for everyone
Our leaderboard had to be simple. As we planned for our first competition for our students, we wanted to design a scoreboard that was easy to read. Parents had to be considered as well. So a flexible table that could also be viewed on mobile was paramount.
The leaderboard can be confusing to read and understand for anyone who hasn't used it before. It was important for us to clearly communicate what the different stats meant. Both for the novice and also the parents looking at the scoreboard. We couldn't afford to come up with a completely new way of organising this information since it was already practiced internationally.
The number "9" indicates the number of problems solved while "935" is the time taken (in min) to solve a problem.
01
Reese Bradley
9 935
02
Floyd Miles
9 1212
Since Reese Bradley and Floyd Miles each solved 9 problems, the time they took to solve them determines their rank.
Redid the colours to communicate how each contestant was performing for each problem.
Problem was solved by participant
Problem was not only solved, but solved first by participant
Student did not submit a correct submission
No submission has been made
Numbers in each cell are crucial to read. Participants are allowed to try a problem as many times as they would like but with each wrong try, a penalty is incurred
Both problem A and C took one try before the participant could solve them. Therefore, (162min + 73min), would be 235min
Assuming a participant made x2 extra tries before he could solve problem C. Therefore, (2tries*20min), would be 40min as penalty. Problems not solved are ignored but the number of tries are indicated, hence 5 tries for problem D.
162min + (40min+73min) = 275min
We had to put together this information into a legend for the participants (and parents) to reference at any time.
Positive results and much more to do
In July 2023, we put our redesigned platform to the test during our summer bootcamp competition. Over 50 young programmers, from beginners to advanced students, engaged in their first official contest on our platform. The new interface proved its worth – contestants navigated problems with confidence, mentors tracked progress effectively, and the leaderboard sparked healthy competition. While this milestone marked just the beginning of Leagues of Code's journey toward hosting international competitions, it validated our approach of making competitive programming more accessible without compromising its inherent challenges.