Deepesh Sudhakar
DEEPESH
SUDHAKAR
SUDHAKAR
User Research
Interaction Design
UI Prototype (Invision)
Visual Design (Figma)
User Testing
We learned that:
- Our research found that about 9.8%of undergraduate students in computer science or programming majors drop-out before finishing their course.
- We learned that many online tutorials help understand the basics but do not provide the practical knowledge required to code a solution.
- Resources such as Stack overflow, Github, etc. are not beginner-friendly. As a result, we conducted user research that helps newcomers learn a programming language effectively.
To understand more about the teaching techniques, areas of improvement in undergraduate programming education, we interviewed 12 students, two professors, and a Teaching Assistant. We tried to understand the fundamental problems of a programming class and why some students do not score high enough in the assignments to pass the course.
Some of the insights and comments from the interviewees are listed below.
"I have trouble translating the theory and class exercises we learn to actual code. I can do better if I have some help."
"My friend helps me with the assignments all the time. He usually points me into the direction I should be going."
"I want to see the students’ performance to the rubric level. This can help me create a proper plan of action."
"Having a higher level view of the grades of overall class can help me understand where they need my help the most."
"If I am not with my friend, I send him my entire code and he runs it in his system to see what’s wrong. This takes time."
"I usually wait until TA hours to get are view. That is the only time I can get someone to take a look at my assignment."
"If I can see the all the steps the student has taken in writing that piece of code, I can understand where they had trouble."
"Many students don’t understand the rubric. Every time I release grades, they come and ask me where they lost points."
"In the beginning, students usually do not write efficient code. They need practice and help to get better at coding."
"I always provide solution code after every assignment. Using that, students understand an alternate way of solving the problem."
Using the Affinity Diagramming technique, we organized all the information collected from interviews and literature review to create patterns and insights as below
Along with the analysis, we also performed a secondary research on our problem statement. We tried to understand what solutions are present in the market, which solve programming students' problems. We went through some research papers and articles to gather data that we felt would be relevant to our project. One of the research articles which played a crucial role in our project is here.
Based on the user research we conducted, we created three personas we thought would represent our target users as shown below.
Based on insights to arrive at our problem statement we created the following:
How might we mitigate programing learning difficulties among students with the help of computing technologies?
Using the personas and the insights we derived, we brainstormed numerous ideas that we thought would address our problem space. We then started filtering them based on technical, economic, and social feasibility. We combined the best part of some ideas so that they serve the purpose of helping students and instructors in a programming class. We tested and analyzed many ideas to decide on the final design solution.
Our final design solution was to build a code editor for students and instructors of an undergraduate programming class. This editor allow students to write and share their code with other students who are the reviewers. The reviewers then comment on the student's code with the help of their code history. When students share their coding assignments with instructors, they receive grades and comments in the editor.
This code editor was incorporated as an extension of Canvas, which is a Learning Management System (LMS) that most of the universities in the United States use. Since Canvas provides APIs to build third-party extensions, we were sure about our design solution's feasibility.
After brainstorming and deciding on the final idea, we were skeptical of whether implementing code history can help reviewers understand where a student has difficulty coding. So, we put our JavaScript coding skills into use and created a small mockup. I tested it with six students and found that code history can help reviewers provide proper guidance and comments. Below is the code we wrote for the mock up.
function debounce(cb, interval, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) cb.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, interval);
if (callNow) cb.apply(context, args);
};
};
function keyPressCallback() {
var target = document.getElementById('target');
var input = document.getElementById('input');
var para = document.createElement("P");
para.innerHTML = input.value;
target.appendChild(para);
}
document.getElementById('input').onkeypress = debounce(keyPressCallback, 500);
After the feasibility testing, we created storyboards to get a better idea of the solution and to fill any gaps we find. They are as below
After storyboarding, we started sketching our design solution on paper. After multiple iterations the prototypes are as below.
After creating paper prototypes, we began evaluation right away. We used techniques such as Cognitive Walkthrough and Heuristic Analysis to evaluate the usability of our paper prototype. Based on the results of the evaluation, we made changes and iterated them. Most of the changes we made are of changing the layout of the editor and not the functionality of them.
We used Figma for designing high-fidelity screens and also for prototyping. In this stage, there were several iterations of the screens based on the aesthetics and usability. Below are final screens we designed.
After creating high-fidelity prototypes, we began working on usability testing. Six users and three user experience designers participated in our usability testing and evaluation sessions. We created three tasks with the editor and performed think-aloud usability evaluations with the users. Later, we asked the participants to fill a post-task questionnaire to understand their experience.
From Usability testing we learned the followingthe following:
Working on this project has helped me grow as a UX Researcher and Designer. I learned a lot of things working on this project. I learned that being a student myself having past programming experience, I should not let my experience influence the design. Especially, during the ideation phase during our 1st round of brainstorming, I noticed a similar pattern in my ideas. With the support of my team I was able to realize the similarities and continue to arrive at our solution. I learned that testing the design throughout the process can significantly cut down on unforeseen issues, especially cutting costs and time.
.png)
