Paper To Digital
OVERVIEW
Turnitin is an education technology company that provides a suite of solutions for academic institutions.
Paper to Digital from Turnitin is designed to digitize handling and grading of paper based assignments. It accommodates handwritten work which could include short answers, multiple choice, diagrams and equations.
ROLE AND DURATION
My Role
User Experience Designer
Timeline
July 2023 - November 2024
Team
UX (Design + Research + Content) | Product |
Engineering
Deliverables
IA, Interaction Design, Concept testing, Usability testing, High-Fidelity UI, Responsive designs,
Accessibility Annotations, Engineering hand off
When learning happens on paper in a digital world
For many educators, Turnitin has long been part of their everyday practice of teaching and assessment. Its tools have supported instructors as they navigate academic integrity, originality, grading, feedback, and evaluation.
For years, Turnitin's experience was built primarily around long-form, typed writing assignments including essays, research papers, term papers, theses, literary analyses, white papers, and case studies.
But not every assignment begins or ends as a typed document.
Across classrooms, educators continue to rely on handwritten assignments, particularly for assessments where students need to show their work, solve problems, write formulae, draw diagrams, or respond directly on paper. The experience of pen and paper fosters deeper cognitive engagement and is particularly beneficial in subjects like science and mathematics. The freedom of movement and space afforded by physical paper can facilitate a deeper level of expression than digital constraints might allow. Paper-based assessment provides a controlled and reliable testing environment free from the technical glitches and connectivity issues that have been found to plague digital platforms. This standardized approach promotes equity among students, giving all learners a fair assessment experience across diverse educational settings.
Yet grading these assignments often meant returning to a familiar, physical workflow: collecting stacks of paper, marking them by hand, and managing grades and feedback separately.
A stack of paper comes with its own challenges
While the benefits of paper-based assessment are clear, they do present their own set of unique challenges, with one of the most significant drawbacks being how difficult it is to distribute, collect, and grade so many paper assessments; this can be time-consuming and prone to errors through misplaced or lost student work. Additionally, the manual oversight required to prevent cheating during paper-based assessment adds another layer of complexity and potential risk.
Paper-based assessment often results in time-intensive grading processes. Instructors must manually evaluate a variety of assessment types—from short answers to complex diagrams—which can lead to inconsistent quality and quantity of feedback as well as delays in providing timely feedback to students.
The opportunity
Turnitin's Paper to Digital was designed in response to this opportunity—to help educators efficiently grade traditional handwritten paper assignments using digital workflows and artificial intelligence.
How might we bring the familiarity and flexibility of grading handwritten work into a digital experience—while supporting the way educators already assess student learning?
But wait… what about Gradescope?
In order to understand that, we will have to take a quick look at Turnitin's product offerings.
Turnitin Feedback Studio is the flagship product that Turnitin offers for checking student writing for originality, grade assignments, and provide feedback. It is meant for long form writing assignments only.
Turnitin also offers Gradescope—a standalone assessment and grading platform designed to save educators time by streamlining how paper-based, digital, and programming assignments are collected, graded, and analyzed. It supports handwritten and drawn work as well.
Turnitin designed Paper to Digital despite already owning Gradescope because it needed a way to embed paper-based grading tech directly inside its flagship ecosystem, Turnitin Feedback Studio. Before this launch, an institution using Turnitin Feedback Studio for essays had to buy, learn, and log into Gradescope just to grade in-class paper worksheets or exams. Paper to Digital brings the key capabilities of Gradescope—such as Optical Character Recognition (OCR), automatic roster matching, and horizontal (question-by-question) AI grading—directly into the environment that millions of teachers already use every day.
Joining a product already in motion
I joined Paper to Digital after the project was already underway, taking over from the designer who had worked on its early stages. By then, the initial research was completed, much of the product direction had been established and backend development was already well underway. To accelerate development, the team was using Gradescope’s existing backend architecture and grading logic. There were some important differences between the two systems and that was mainly based on how the new backend services integrated with existing Turnitin Feedback Studio. The development was way ahead than design as they were reusing existing code.
User experience wise, Paper to Digital was largely to follow Gradescope's user journey. Gradescope's design had already been evaluated using the principles of design, Gestalt and Usability. The new design experience was to avoid those and solve for them during the iterations.
This meant I wasn’t designing from a blank slate. I was stepping into an evolving product with established technical foundations, existing decisions, and constraints—and translating those capabilities into an experience that felt native to Turnitin Feedback Studio.
How Paper to Digital was envisioned to work
Before we start walking on the design journey, let us take a look at the overall product vision that was decided for Paper to Digital. In order to put ourselves into the user's perspective, we will go through the instructor's journey as they use this product.
Dr. Pandya is a mathematics professor at a university. He teachers Engineering mathematics to the first year engineering students.
He regularly provides the students with physical on-paper assignments, quiz and exams for the classes he teaches. The students write their answers on that physical paper in the space provided to them and hand over / submit those papers to him.
Where the design experience stood when I joined
The first iteration for the first few screens i.e. Creating the assignment, setting it up and scanning the student papers had been completed. The remainder of the flow of organizing and ensuring that each scan was correctly assigned to the student and grading the papers was to designed.
Shaping the Paper to Digital Experience - My design journey
In order to empathize easily and sufficiently with the design challenges, we will be stepping into Dr. Pandya's shoes and his classroom as we go through each of them.
Provide a clear starting point
Design journey = Why did the experience become what it became?
Challenge → reasoning → decision → final screen.
The tension → what you considered → what changed → final design
Problem → What I learned → Design decision → Final manifestation
Challenge = What needed attention?
Reasoning = What did I figure out?
Decision = What did I choose to do about it?
Final design = What did that decision become?
Making a multi-step workflow visible
Background
Dr. Pandya goes through multiple steps in his process of setting up the assignment, distributing to the class, collecting and scanning the answer sheets, grade the submissions and publish those grades to the class roster. He regularly switches between the steps that he can do digitally and physically.
Challenge
The initial representation of the entire flow of Paper to Digital was visualized as and organized under two drop down menu items: Setup and Grading. The interface treated the experience like a collection of destinations and it obscured something fundamental: these weren't simply different destinations. Together, they formed a sequential workflow. The present design did not match the mental modal of instructor where they were actually progressing through a sequence of dependent stages.
How do we help instructors see, understand and orient themselves in a multi-step workflow that moves between paper and digital?
My reasoning process
It was crucial for the instructors to see the steps of the entire flow sequentially laid out in front of them in order for them to understand the order, dependency between them and the completion status. As I thought deeper about the instructor going through the flow of handling paper based assessments, I uncovered a couple of important scenarios which the design had to account for as a part of MVP itself.
-
The instructors needed to be communicated the status of each step in the flow - not completed, in progress and completed.
-
The instructors will go through the flow the very first time and repeating it too. Both will have different rules, constraints and outcomes that needed to be communicated to them in the moment.
-
The instructors would want to skip ahead or look back at the previous steps in any order at any point during the flow. In that case they should be able to orient themselves and easily understand where they are in the flow, what actions can or cannot be done in the current moment and the result of those actions.
Choosing the suitable UI design pattern
I revisited the best practices around the purpose and usage of the drop downs and tabs as well. The main purpose of the navigation dropdown menu is to list and provide the access to destination pages. There is no concept of an order or structure amongst those destination pages which does not fit the experience we were trying to provide.
I found that tabs were better suited when compared to a dropdown menu. They served the purpose of organizing related content into different sections. In this case the related content was the assignment itself with each tab meant for a different set of actions that could be done for that assignment. Instructors could see all choices at a glance and jump to a new section with a single click and it maintained the context as all the tabs could be seen at any given point. However, the idea of having a set order, a sequence from beginning to end was missing. It also did not represent progress towards the end goal and a status for each step (not completed, in progress and completed)
Design decision
I was certain that we needed an experience that preserved and exhibited the concept of a beginning, an end and a sequence of steps in between along with a sense of direction. I decided to incorporate a progress stepper which maintained the structure of the flow, easy and efficient navigation and the status of each step during the flow.
Final design
Making assessment setup feel straightforward
Turning stacks of scans into organized student work
Background
After Dr. Pandya collects the papers from the students, he manually scans those papers (either in bulk or individually) and uploads them into Paper to Digital tool. The tool is capable of separating out / splitting each assignment from the scans and auto assigning each submission to a student. At this step of the flow, called the Review Submissions, it lists out all the submissions that it has automatically split and assigned to the students.
*The auto split and auto assign is possible because the tool already knows the number of pages that the question template has. And, it uses the OCR (Optical Character Recognition) technology to read the student name and student ID.
Challenges
Making hundreds of submissions easy and efficient to review and assign
I had to design the Review Submissions experience from scratch. Before deciding how the page should be structured, I first needed to understand what instructors needed to know about each submission and what they needed to accomplish at this stage of the workflow.
How do we help instructors go through and review hundreds of submissions along with assigning the ones that are not yet associated with a student?
WHAT I LEARNED
Through discussions with the product owner and engineers, I identified a fixed set of instructor-facing information for every submission:
-
Submission ID
-
Student name
-
Student ID
-
Assignment status — automatically assigned or not assigned
-
Scanned pages belonging to that submission
The primary task on this page was also clear: instructors needed to identify submissions that had not been automatically matched to a student and manually assign them. The scale made this especially important. For the MVP, a scan could contain up to 1,000 submissions, meaning an instructor might have to review a very large set of records during this stage.
REASONING
The design experience needed to equip the instructor with:
-
A way to easily and efficiently scan through a large number of submissions
-
A way to quickly identify what submissions were not assigned to the student
-
Easily perform the repetitive action of matching a submission to the correct student.
-
View the scans for every submission
These requirements pointed toward an interface optimized for density, scanning, and repeated actions rather than one designed around individually exploring each submission.
DESIGN DECISIONS
A data table
I chose a data table as the primary structure for Review Submissions. A table allowed the fixed metadata to remain consistently aligned across submissions, supported a much higher information density, and made it easier for instructors to scan through large numbers of records while taking action on submissions that still needed to be assigned.
Summary of unassigned submissions
I chose to provide a summary of:The number of submissions that were not assigned to any student. This helped the instructor to know upfront how many submissions were still unassigned. Number of students that did not have a submission. This helped the instructor to know which students did not have a submission associated with them.
Snapshot for student name and id
I chose to show a snapshot of the handwritten student name and ID that was there on a particular submission and a list of students, whenever the instructor would attempt to assign or reassign a submission. This made the process of reviewing and assigning a lot faster as the instructor could see what name is written on the paper, instead of going and looking for the scans.
Handling errors in submission assignment easily
How do we help instructors to identify and understand what went wrong with submission creation?
How do we help instructors easily and efficiently correct errors with the submissions?
WHAT I LEARNED
Through discussions with engineering, I understood the logic behind how the submissions were created from the scans. This helped me identify a couple of important use cases that could happen as the tool attempted to split the scans into submissions and assign them to the correct student. I concluded that these use cases were not edge cases but instead something which was highly probable in the world of paper assignments and so they needed to be solved for in a MVP.
-
The submission is not assigned to any student
-
The submission is assigned to a wrong student
-
Two or more submissions are merged and treated as a single submission
-
An assignment is missing pages
-
An assignment has extra pages
-
One or more student have not submitted their work
REASONING
The design experience needed to equip the instructor with:
-
A way to clearly identify and convey any assignment related problem to the instructor
-
A way to clearly identify any page related issue to the instructor
-
Actions through which these problems could be easily and efficiently corrected
DESIGN DECISIONS
Submission Status Column
For conveying a message for submission assignment and pages, I chose to have a ‘submission status’ column for every submission that would tell two things to the instructor.
-
Its assignment status which could have the values of:
-
Unassigned
-
Auto Assigned
-
Manually assigned
-
-
If the number of pages were less or more than what they were supposed to be:
-
Missing pages
-
Extra pages
-
A submission could have a combination value of assignment and number of pages.
I provided column based filtering to filter out assignments based on these statuses so that it was easy for the instructor to take a look at assignments with a specific status.
Facilitate Assignment Assign and Re-assign
I provided a submission level action such that each submission could be assigned or reassigned at any point in time.
After every action, the system will provide a clear feedback to the instructor about what just happened
Managing Submission Pages
In order for the instructor to easily check the number of page scans and view its content, I decided to show thumbnails of those pages for every submission. An expandable row pattern was chosen which by default will be in the collapsed state. Expanding the row / submission will reveal the scans associated with it.
I decided that the thumbnails have to be clickable so that a full page view of each scan could be clearly seen in order to identify who it belonged to and see the student work.
I also provided a page level action where pages from any submission could be deleted or moved to another submission. This solved the problem where two submissions were merged together of if there was a mix up in the pages between submissions.
I also provided submission level action of Show, Hide, Rotate all pages which worked on bulk selection.
Providing an intuitive Grading Experience
Keeping the instructors oriented during different states of the workflow
The final Paper to Digital experience
In process of putting this content in this case study..