Circles! My journey of designing a learning tool.

Neha
HackerEarth Design
Published in
5 min readDec 11, 2017

I have always believed that design is nothing but an approach which enables you to build the most optimum solution based on limitation and capabilities of the user. A good product is built when an idea is churned with multiple rounds of user research, redefined wireframes in each step followed by testing the prototype, and iterating the prototype if required.

This is a blog about a product called “Circles” that was developed for HackerEarth.

What is it?

Circles is a collaboration product meant for peer learning; a platform which enables anybody who is an expert in a particular topic, share his knowledge with others.

Being a part of Hackerearth, Circles is currently based on programming concepts and framework.

Earlier, when I was working for the placement cell in my college, I got some insights into the capabilities and limitations of the student community. A popular practice on campus was peer learning, where students who is well-learned in any particular topic teaches it to his fellow batchmates by using the material gathered and solving few related problems together. Lack of a proper learning environment and failure to discuss answers to queries in detail restricted learning to a great extent.

Hackerearth, being a developer community, already conducts regular challenges to engage members. So, we thought we could use the same programming environment to solve the first issue. To help users discuss doubts in a better way, we thought we could have developer-friendly discussion forum-like structure where people could comment and add code snippets.

Research phase

When Anand, the product manager of Circles, first shared the idea of peer learning, I could relate to the problem he wanted to solve so well. Being a research enthusiast, I wanted this project to be data-driven. Anand helped me get in touch with around 25 students. I interviewed them over the telephone, and this took one week.

The purpose of the interview was multifold :

  1. To know how common peer learning is among students
  2. To understand the pattern of learning and how they practice
  3. To know what tools they used

*There were a few working professionals among the people whom we contacted; this helped us understand how they are practicing and learning post their graduation.

Each interview lasted for 30–40 mins. We inferred that students do learn from each other and the one who is considered an “expert” in a topic teaches it to others.The prime objective is to get a good job later on. They practiced problems online and shared their knowledge via social media

The main problem was to finding the right set of questions to practice on, dealing with the absence of a proper coding environment, and maintaining the motivation in the group.

The research helped us outline major focus areas of Circles, which are as follows:

  1. Peer-to-peer collaborative development of programming skills by focusing on theory and practice
  2. Exchange of expertise
  3. Regular tests for engagement
  4. Assistance among the group members

Development phase

The research also helped us define the features of Circles as follows.-

Each user has many Circles around him. For practicing coding with friends, practicing coding with college group, preparing for job interviews, competing together, etc. These circles can vary in size and how close the user is to others in that circle is based on the intent of each Circle.

Further, we went on to create multiple personas and scenarios which helped us to formulate a revised list of user needs and corresponding feature list. Defining the Information Architecture took a good amount of time, which also forced us to think on the lines of releasing Circles in versions. The listed features required heavy engineering efforts, so we decided to keep the version 1 minimal in terms of features offered. Also, we wanted to know how well the developer community engaged with Circles. A major feature which got shifted to the next version was the discussion framework.

Wire-framing took a good deal of time, with a number of iterations. The prime focus was keeping the product simple with a low learning curve.

Finally, the design was shared with Richa, Ritesh, and Praveen — the tech team. I used Zeplin to share the specifications of the product with developers, and it was absolutely marvellous to see how much of manual labour that devising specifications typically requires could be avoided because of that. Working with the tech team gave me valuable insights into how a product is developed and structured by engineers.

How does it work?

Circle is a collaborative peer learning tool where anybody can login and create a Circle. Once on-boarded, you can invite your friends via email, social login, or just share a link with them.

Invite a member to Circle

The experiences in the circle is around Events. Events are challenges which the users can take part in at their convenience. Events can be either topic-based or existing HE contest type.

Currently only one event can be active within a circle. There is no restriction on the number of events within a circle.

Step 1 in creating a new event
Step 2 in creating a new event

Learning along the way

We released Circles on April 14, 2017 and currently it has 1678 Circles and 13276 distinct users.

The feeling which comes when you help the support team answer queries regarding a product which you ideated from scratch is the best.

From features and icons to elements and how a user would access it from the website, etc. everything was well discussed and thought upon. Working on something in such fine detail helps you grow as a designer.

My major learning in this project was to focus on the project during the ideation phase than the development phase, it saves crucial time later in the project. It also helped me improve my graphic skills. The best part about Circles is that we’ve started design reviews in HackerEarth (a practice that I’ll explain another time).

--

--

Neha
HackerEarth Design

Product Designer@Hackerearth, Usability Enthusiast, Potterhead, Loves travelling!