Best place for web development practice
UX design ▪ Case study ▪ Personal Project
How might we make web development learning experience more fun and engaging?
UX designer
February 2023
Project background
According to one report, the number of people who quit online coding programs neared a shocking 94%.
But not only people who take online coding programs quit in large numbers; as the NY Times noted, roughly 60% of “students planning engineering and science majors end up switching to other subjects or failing to get any degree.”
Web development is one of the most challenging fields because it requires learning more than one programming language and a broad skill set.
I decided to work on this project because I myself have tried different programming courses when I was younger, and I was wondering what happens when we can stick to a course and we quit another one.
The number of people who quit online coding programs is near the shocking number of 94%. This is a problem because people show interest by starting the course, but they don’t keep up with it and so much time and effort will be wasted.
User research
I analyzed the most influential articles about difficulties in programming learning between 2015 and 2022 on the Semantic Scholar to find the most frequent pain points in the process of programming education.
Here are the results of the most frequent pain points that can be addressed by a design solution:
I assessed the top 5 competitors, W3Shcools, Sololearn, Mimo, Enki and Codeacademy by gathering the feedback they’ve received from their users on their social media channels, platforms, Play Store, Apple Store, etc.
Analyzing their customer feedback showed a few common patterns among users’ pain points, but the main problem was regarding platforms that have applied gamification in their process:
Instead of doing user interviews, I decided to observe their environment. I joined an online group of students who had registered for a one-month programming course.
I witnessed how they started super motivated, but as the time went on, the disappeared from the online discussion one by one.
I identified 3 main pain points:
🎯 Learning how to program has a steep learning curve
🎯 Online platforms don’t offer enough step-by-step practices
define, ideate, design
As a young student who likes to learn coding, I want to have solid programming skills, so that I can land a job in the tech field.
I ideated a few HMW questions to facilitate the ideation process:
To address the findings of the research phase, I designed specific features to solve the problem:
To help students stay engaged and motivated during their learning
Fairyfly practice is the name of a feature to help students tackle the complexity of the programming
Ladybug practice is the name of a feature for helping students practice their debugging skills
Dragonfly practice is the name of a feature for practicing learning two syntaxes at the same time
I ideated a “Handbook” feature to help students review their learnings
Students can find volunteer opportunities to work on real-world projects using this feature
To determine the information architecture of the website, I asked 5 individuals to participate in a card sorting session.
The result was surprising in some aspects; for example:
After finalizing the IA, I started my design with designing lofi wireframes.
Final product
So what the website offers is 3 practices, Fairyfly, Ladybug and Dragonfly in 3 different modes:
