Learning programming should not be hard
|Type of Project||Hackathon Project|
|Role||UI/UX Designer, Application Developer|
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.
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.
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.
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.
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
- The current system treats every user on the same ground. The content is not personalised according to their background and thus is not relatable. We decided to personalise content to make it easy to start.
- Most programming tutorials/platform assume that you know the fundamentals. We decided to create learning content using illustrations and real-world examples and terms which the user would probably be using in their day-job.
- Rather than making people compare themselves with college goers and professionals, the aim was to make them compare themselves with people who were like them, who performed the same jobs or followed the same life routine.
Once I was clear with all the whys, I listed down the features that should make it to the prototype.
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.
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.
- They did not overwhelm the learner with too much information at once, and instead, divided it into small chunks so that it is easy to digest.
- Majority of them had a clear design to let the user know of their current progress
Once I had a basic idea of UX of ed-apps, I started sketching out options.
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.
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.
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.
Next step was to refine the sketches in order to make the ideas concrete and decide the final flow of the application.
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.
Get to learn and grow with people like you.
Personalised Coding Education, right at your fingertips.
All the basic programming concepts are divided into small lessons so that the learner doesn’t get overwhelmed with information.
The points earned through the Test Your Knowledge section are reflected in the leaderboard.
Checkout the complete design here.
Here’s is the Marvel Prototype of the application. Feel free to play around with it
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.
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.