Collaborative peer learning

"Codedu" is a web-based application that enables both the students and the instructors, to collaborate and review code. Students can perform code review by providing alternate solutions and commenting on other student’s code. Reviewers can access the history of code changes for a piece of code. Instructors can grade assignments and get insights on the performance of a student or overall class. Instructors using this website will have better insights into the problem areas faced by the students.
My Role
UX Design
Lead UI Design
6 Weeks
31ᵗʰ Oct - 12ᵗʰ Dec
RaviTeja Jorigay
Deepesh Sudhakar
Sathwik Aala
Problem Space
The topic we chose to explore for this project was addressing the programming learning difficulties among undergraduate students.

According to HESA, which cover the year 2016/17, show that "9.8% of computer science undergraduates dropped out before completing their degree". U.S. Bureau of Labor Statistics states that "Employment of software developers is projected to grow 21 percent from 2018 to 2028, much faster than the average for all occupations". But there is an evident gap between between the demand and supply, where there is more demand and less supply. Because of this scarcity, many software programming jobs are also being outsourced in the USA.

We tried to understand the reason behind the drop-outs in the undergraduate level of the course. When we digged deeper into this problem, Through interviews and various types of observation, we gathered primary data from students and instructor's in the undergraduate computer science course to better understand the pain points they face. We identified that there are three possible reasons that are causing the increase in the drop-out rates:
Requires high-level critical and logical thinking
Computer programming courses require high-level critical and logical thinking compared to other courses
Ineffective traditional teaching and learning methodologies
Traditional teaching and learning methodologies are ineffective for a programming course
Lack of appropriate resources/support
Many of the resources available are focussed only on absolute beginners or pros and not for the people in between
Problem Statement
Through these insights we were able to define our design direction to focus on the user’s most pressing needs. The problem we are trying to address is to improve the communication between the students and instructors and also helping the students learn a programming language or skill easily. As a team, we set out to design a solution responding to this challenge question:
Final Design Solution
Design Process
Primary Research
Based on the interviews, we understood that we need to focus on the teaching and learning methodologies in a programming language. We learned that peer to peer collaboration where 2 students discuss and work on a code sample makes it easier for both of them to master a programming language. When we conducted interviews with programming instructors and TAs, they said that they are unable to identify the exact problem faced by a student. They are unable to understand the exact concept of programming which needs to be discussed or explained in detail.

It would be great if I could look at different styles of writing a code to build multiple perspectives in coding which would help me write an efficient code by learning from others.

Sometimes, I don't understand why the student wrote a code in a particular way. It could be that he learnt from a different source or maybe the student's thought process is different and having access to their rationale would help me analyze and configure my teaching content.

Secondary Research
Through our research, we tried to understand the problem better by looking at various efficient methods in mitigating the difficulties in learning a programming language or skill, and increasing the communication between instructor and programming student. During this part of our research, we found many insights which corroborate our primary research findings. We realized that programming language or skill can become easier to master when learned collaboratively with other students. Also, having access to the entire history of code changes would result in understanding the students’ thinking process and hence better code reviewing. We also realized that all the collaborative programming tools available currently focused on experienced programmers only, and there are no tools or support platforms that help students.
After brainstorming different possible solutions to address these problems, we finally decided on two of them that would address those problems. First, To increase the collaboration we decided to use something called code reviewing where different students review each others code and work on a code sample. Second, we found that when a person takes a look at the history of code changes for a piece of code, it makes it easier to some extent to understand the thinking process and also to understand the difficulties they are having. Honestly, we tested these approaches independently with programming students to see if they work or not. They really worked perfectly. So, we decided that we should combine these two into our final solution.
Idea 1: Collaborative Code Review
Scenario 1: A student is getting help from his peer collaboratively.
User wants to improve his knowledge in coding
User finds the code too difficult
User calls his friend for help
The user's friend suggests him to share his code for review
The user's friend is effectively able to guide him
User's doubts have been cleared and he feels that he learnt something useful.
Scenario 2: Student and Instructor work collaboratively to resolve doubts.
The professor receives an email from the student, asking him a doubt
The professor wants the student to share the code via the collaborative platform to help the student with the code.
The professor receives an email from the student with the link to work collaboratively.
The professor helps the student with his code.
The professor is happy to have helped the student to complete his assignment, which would help him get better grades.
Idea 02: Accessing the information needs and history of code changes
Scenario 1: John shares his code context with the instructor to display the rationale behind it.
Prof. Adam is grading his students' work and came across a John's work which is not up to the mark.
John has a hard time understanding how to code and have difficulties in assignment work
John meets his instructor to get some help from him to better his grades
John is talking to his peer regarding his problem and his peer is suggesting a solution to his problem
John started using the new software for his assignment
John meets his Instructor to understand where he is going wrong while writing the code.
Scenario 2: Prof. Adam finds it easy to understand the logic behind John's errors.
Prof. Adam is looking at John's code history and making sense of his thought process
John received a detailed feedback on his past assignment from his professor
Prof. Adam understood his students' problem and trying to figure out a solution
Information architecture
Prototyping is a critical step in the design process for many reasons. For one, it allows the design team to “learn by doing.” Prototyping as a method gives design team the opportunity to explore different user flows and aesthetic qualities before making more permanent decisions.
Low-Fidelity Prototype
We used a paper prototype to perform an initial evaluation of the product to understand the usability of the product. We created paper prototypes to provide tangible interaction with the features we had explored. The paper prototype focused on the MVP screen of the application with the core functions.
Login Screen for Teachers and Students
Student Portal Landing Page with Code Editor
Grouping of code blocks to access features
Options to Add Context or view Code Edits
Adding Context, Rationale behind the code
Sharing for collaboration or Code review
Viewing Code Edit history made in the code block
Overall Code Edit of the project
Instructor's grading portal
Rubric grading against the relevant code block
Feedback / Alternative code suggestion
High-Fidelity Prototype
Based on the internal think-aloud session, we revised our Low fidelity prototype and developed the screens with a higher fidelity prototyping tool in order to elaborate on the user flows and concepts. We used Figma to convert the paper prototypes to digital and interactive flows.
Splash Screen
Student's Sign In
Instructor's Sign In
Student's Dashboard
Instructor's Dashboard
Select a line to access addition features ('+' icon)
Instructor's grading screen
Code block generation with access to features
Rubric grading pill upon highlighting code
Adding context to the code
Selecting the predefined grading rubrics
Option to view Code History for a code block
Adding grade to the pill
Requesting other student or professional of review
Adding Comment/Feedback at rubric level
View of the feedback received from the Instructor
Adding alternative code to give a different perspective to the student
Live demo
Product evaluation
We conducted think-aloud sessions with the Low-fidelity designs followed by usability evaluations using High-fidelity Prototype with undergraduate students and teaching assistants of a programming class for having a better understanding of the usability of the product. We also did Expert evaluation with industry experts and Senior graduate HCI students to test our platform. The overall experience of the app was well received by the users. However, several areas of the app were identified which needed further attention.
The alternative code window is too small to write the code.
A few users felt that the icon used for information needs was small and unclear.
Instructors felt that selecting the code to access the rubric pill was a little tricky.
An onboarding process could have helped the users to figure out the features better.

On a positive note, the evaluative methods that we conducted confirmed that the basic usability aspects of the application are sensible and functional. The evaluators felt that the application is consistent in terms of design which they liked. They also said that the application would definitely solve the problem to some extent.
Next Steps
The current application is designed as a web based application, going further in the development we would like to integrate into the existing canvas platform for education where the students use it as a mandatory service for all the coursework. Apart from this we would like to add a few features to the existing MVP to make it more efficient.
Support for collaborative work for students to work in groups
Adding professionals as mentors for helping the students
Generating in-depth reports of understanding the problem areas for students.
Go Back
Next Project
Coming Soon...