The problem

To figure out a new system for Hackerearth users to improve their coding skills. Coding competitions and hackathons were already a part of the website offerings. We needed something different but within the competitive coding bracket.

My role

I was the owner of the entire product design. Brainstormed the user flow, created wireframes, mockups, designed the UI and interactions. Also collaborated with the marketing team to work out the marketing strategy and marketing visuals.

Solution

We studied the behaviour of existing users on Hackerearth Practice. What we got to know was that people try to make the best submission possible for every problem. So it was clear that there exists a competition between the users to be the best among themselves. So we thought, what if we add a competition element to the way Hackerearth Practice already works, what if users can compete realtime?

Users

The users are developers who come looking for coding challenges. College students were the primary users. We noticed that the most frequently visited pages by college students are the Challenge listing, Practice page and the tutorials pages. Hence, those pages became the engaging points for the new product with the early users.

Components

Leaderboard: Where users can see their standing in the CodeArenaUser Fight History: Where users can see their previous fights details.Fight Ring: Where users actually code against each other to solve a problem.User Activity log: Where user can see the opponent’s coding activity information like compilation and submission.

Access points

CodeArena can be accessed in the following ways:

Challenge card that is displayed as a live challenge in the challenge listing page.By clicking on real time notifications that are sent to random active users encouraging them to start a fight.By opening www.hackerearth.com/codearena/

User Journey

User can start a fight by clicking Start Fight button in the CodeArena home page.Once the user starts a fight, user will be paired with an opponent who is of the similar skill level.Both the users will be given a problem statement based on their skill level, which they should solve in the given time.User can quit the fight at any time and can check the result once the opponent finishes the fight or timer ends.User who solved more number of test cases will be declared as the winner and the fight will be stopped.Once the fight is finished, user can check the result in the history page.User can see the standings/rankings in the leaderboard page.

The existing content of 2000+ programming questions in the Hackerearth platform was leveraged to create CodeArena questions. Had discussions with the stakeholders and decided to just make the version 1 with very less features.

Leaderboard

User who has won at least one fight will be featured on the leaderboard. This restriction was kept to encourage the user to win the fight as well as to decrease the number of entries to the leaderboard.

Keeping the users in the loop

The re-fight button after finishing a fight is intentionally kept bigger and tried to focus the attention on that to increase the participation. Only two exit points were given on the page which are 'Re-fight' and 'Go to Dashboard'. There is no provision of going away from the page except closing the window. It resulted in multiple fights from single user which in turn increased the fight count :)

Marketing

I was asked to design the identity of the product as well. I wanted to create something analogous to fight but didn't wished to put code and fight symbols. That's how I came up with the warrior logo for CodeArena.

Also designed the emails for marketing the product. We send an email if the user hasn't visited the platform at least once in a week.

Impact

Product was well received by the users and they really enjoyed the new competing experience. It increased the site traffic and increased the MAU and the total code compilations on the platform. The percentage of CodeArena events out of the total events of Hackerearth is more than 50%. As of July 2018, we have a weekly average of 7000 participants in CodeArena without putting in any additional product development efforts in it.

Few of the twitter feedbacks are given below:

Alpha launch: 5 April 2017

Beta Launch: 10 April 2017

Total no.of fights till date: CONFIDENTIAL

Average weekly fights: CONFIDENTIAL

Gamification round

After releasing the first version, next task was to make the product more gamified. Brainstormed some ideas to engage users and make CodeArena more interesting.

A weekly LeaderboardLive recent activity module

Second version with these features increased the participation in CodeArena by 30%. P.S.-The numbers are figurative representation due to the confidentiality concerns.