At Duke University in 2019, most instructors in electrical engineering and computer science departments were forced to individually run student submissions one-at-a-time and then report grades by whatever means they choose -- and this process can take weeks for each assignment. AG350 is an autograding web app used by students and teaching faculty in Duke’s Electrical Engineering and Computer Science departments aimed at entirely streamlining this process.The app allows users to submit assignments, evaluate code using built-in tests, and assess grades.
During the 2019 spring semester at Duke, I was the lead UI & UX designer for the AG350 team. I worked directly with the CEO to redesign aspects of the existing product, as well as carried out exploratory user research, user flow design and wireframing for new product features.
When I joined the team, AG350 was still in early stages. The product allowed students to submit and build their assignments (in other words, run their code). But an “instructor view” of the product that allowed faculty to evaluate class assignments, and an interface for exploring test data to see what errors occurred in the submissions were still just goals in the product roadmap. Beyond designing the features to address these issues, my overall focus with this project was answering: How can we reduce confusion in the routine submission and grading experiences of students and teaching assistants? (In other words, how could I help users easily answer questions like “How did my students do overall on this assignment?” or “How can I improve my code?”)
So I was really focused on 2 challenges:
Faculty need a streamlined, transparent way to assess student progress so that they can reduce hours spent grading and have more time to teach.
Students need a simple, time-efficient way to build assignments and evaluate course progress so that they can spend more time on extracurriculars, their social life, other homework, etc.
I worked with the team to create solutions that were clean, accessible, and intuitive.
I began the design process by gathering information on users, their pain points, product functionality, and so on. The foundation of knowledge I formed from this stage allowed me to give a face to the users and note some key issues to address. Both the AG350 team and I highly prioritized accessible design, and they collaborated with me to find users with unique accessibility needs.
My research methods included:
My conversations with the AG350 team allowed me to establish goals that were prioritized for the product’s success. And based on the learnings from my research, I added more goals to give my process a meaningful direction and further define what success would look like:
My initial wireframes were pretty exploratory. At first I designed an assignment overview page that displayed test results with either green bars and “Passed” or red bars and “Failed”. But discussion with the team led me to learn that test cases can be complex and are better accompanied by numeric scores. Additionally, with the goal to display data in a way that both did not stress out students and was accessible, we decided to scrap red & green visuals. These would emphasize shortcomings and would be poorly suited for RG color blind folks.
I mapped out a user journey to illustrate how users would likely engage with AG350. This helped give vision to the project and pinpoint common user tasks.
AG350 has a whitespace-heavy look accompanied by a few colors to give a clean and professional look for this educational tool. The contrast ratios produced by the colors in its various text and background combinations passes WCAG 2.1, AA compliance standards for text and color contrast.
I discovered that most folks currently do not use AG350 for more than one course, and that on average, a single course doesn’t assign a large amount of assignments through AG350. Therefore, I removed the course drop downs on the course assignments page, and now at first glance a student can view upcoming tasks.
The assignment overview page communicates essential submission info (like test case results) and holds links to the Github repository. The overall score is given visual dominance to quickly communicate grade outcome. In early iterations I opted for “Help” and “Build” buttons for the code commit section that were styled as links, however not only can these be generally misleading to everyone, but individuals using screen readers trigger links and buttons with different actions. To avoid unnecessary friction for this group of users and overall confusion about interaction behavior, the buttons are clearly designed as such.
Potential misunderstandings are diminished by the progress bar that would actively signal completion status and explain why a build would not be successful if that occurred. Visual emphasis is given to commit descriptions to remind users what the added code’s purpose was without forcing users to visit their Github repository directly.
Often, teaching faculty like to report score statistics to their class, and on this page they can break down this data. The box and whisker plot accompanies the histogram here to visually supplement the data and display the range of quartile values. TAs can also view individual submissions and grades in the centralized roster when students come to office hours for help.
Within the Build Details page, users can search through test cases and view which “assertions” were passed within a test, thereby helping TAs discern shortcomings in the code. And test data which can be complex and include unspecified data types is displayed in list format.
This version of AG350 was released to hundreds of Duke students in the 2019 Fall semester as it expanded to various Computer Science and Electrical Engineering classes (about 30% of the student body).
Previously, if teaching faculty wanted to evaluate their students’ progress in their assignments or point individual students to issues in their code, they needed to do it manually. Along with designing the interfaces to improve these processes, I enhanced existing features in AG350 to improve student and instructor understanding and reduce friction.