My Role
Concept
UX Design
Lead UI Design
Tools
Figma
Illustrator
Photoshop
Duration
6 Weeks
31ᵗʰ Oct - 12ᵗʰ Dec
Team
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
Prototyping
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
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.
