Home Next Project >

Crowd Code

Learning programming should not be hard

Type of Project Hackathon Project
Role UI/UX Designer, Application Developer
Date December, 2017

Introduction

Last October, Topcoder announced the 2017 Humblefool Charity Hackathon with an aim to help continue the legacy of Harsha Suryanarayana, one of the best Indian programmers. I decided to give the hackathon a shot.

Problem Statement

The hackathon was announced in the honour of humblefool, thus the broader theme was programming education — Create an Application which helps in learning or teaching programming/coding — the website stated.

Idea Generation

Before jumping into the design of the application, the first step was to identify a concrete problem to solve. I sat down with my friends to brainstorm what problems we had faced when we first started learning how to program and I made an interesting observation, all of them had struggled initially to relate to what was being taught. They had failed to find a resource that could teach them from their current level of understanding. But since we are college students, with internet at our disposal, we can always manage to find a way out and learn things.

Empathize

During the discussion, I went off board and started thinking if my mother was to learn program at this point of time, would she be able to? She has a very limited knowledge of internet (restricted to WhatsApp and Facebook). Would she be able to search for programming tutorials on Youtube and understand what was being taught? Can a 20 something Youtuber relate to the life of my mother and explain to her what exactly variables are? Or How loops work? The answer to all of these questions was an astounding No.

I discussed this problem with my friends, and after several hours of discussion and idea refinement, I finally knew what I wanted to create.

Final Idea

We decided to create a platform (mobile application) for teaching the fundamentals of programming to the common man of the country. The aim was to increase programming literacy among the Indian masses, be it a 40-year-old banker or a young housewife, everyone could use the app to learn the fundamentals of programming through real-world examples to which they could relate.




Pain points in the existing system

User Journey

Once I was clear with all the whys, I listed down the features that should make it to the prototype.

A storyboard I designed for the solution

A user during the sign up would need to provide some basic details following which they would be suggested a study group. They would then join the study group where they could learn the basics of programming (variables, data types, flow control, basic data structures) from the content based on real-life examples which he/she can relate to easily.

Sketches

I analysed different ed-apps to see how they were doing things, what they were doing wrong and what right. I played around with different apps (Duolingo, Khan Academy, Udacity, Toppr, Google Primer) for a week to understand the design.

I made two major observations on what was common in all these successful apps.

Once I had a basic idea of UX of ed-apps, I started sketching out options.




Onboarding

I went ahead with option 3

It was important to tell the user forefront what they could do with the app, so there was no way, I could let go of the Onboarding and directly land to signup, hence I rejected the option 4. I wanted to keep it simple, so rather than presenting the user with 2 options, sign up and sign in, I decided to keep only one button, following Hick’s law, which states that the time it takes to make a decision increases with the number and complexity of choices.




Registration

The registration form was supposed to be lengthy due to the design of the application since to personalise content, we needed some relevant information about the user (age, occupation, gender etc.). So to make things simpler for the user, I decided to follow One thing per page strategy. The pattern is about splitting up a complex process into multiple smaller pieces, and placing those smaller pieces on screens of their own.




Home Screen

I was confused between 1 and 2. But preferred 2 since showing progress, reading time and name of topic would have created chaos, in 1.

This was the main screen the users would interact with. So the goal was to keep it simple since the user base was widespread. I tried to avoid any hidden interactions or cryptic icons and I aimed to show all the relevant information on the screen, rather than hiding them under hamburgers.

Wireframes

Next step was to refine the sketches in order to make the ideas concrete and decide the final flow of the application.

Wireframe Designs that I came up with. Looks ugly duh!

Mockups

I used Sketch to create the high fidelity mockups. I always like to create high fidelity designs before jumping into development. This way, I have CSS at my disposal and I can plan the application better.




Onboarding

One Click Login directly from onboarding screen



Registration

Get to learn and grow with people like you.

One action per screen, with progress indicator



Home

Personalised Coding Education, right at your fingertips.




Cards

All the basic programming concepts are divided into small lessons so that the learner doesn’t get overwhelmed with information.

Swipeable cards, with progress indicator

The points earned through the Test Your Knowledge section are reflected in the leaderboard.

Test what you’ve learned

Checkout the complete design here.

Prototype

Here’s is the Marvel Prototype of the application. Feel free to play around with it







Development

I used Cordova to develop the application. I managed to setup a flask server on IBM Bluemix that hosted the data. I used hammer.js for the touch interactions.

The code of the prototype is available here.

Results

The results were announced in the last week of January, and I was ecstatic with them because Crowd Code was ranked the best hack! I won the first prize. The feeling was great since this was my first remote hackathon win.