Improving in-line commenting functionality

Pearson provides education products and services to institutions, governments and individual learners, to help people everywhere aim higher and fulfill their true potential. One offering of the Pearson higher education group is Writing Space, a learning platform that allows instructors to create tailored classroom assignments for students to complete and submit online.

Writing Space is designed to give students and instructors a single place to create, track, and grade writing assignments, share writing resources, and easily exchange meaningful, personalized feedback.

What follows is the execution on a particular UX need within Writing Space, including screenshots that illustrate the improvements made.

Responding to User Feedback

A fundamental component of Writing Space is the instructor’s ability to comment on students’ writing submissions. Discovery research uncovered that one of the most requested features was for commenting functionality to work as it does in Microsoft Word. Unfortunately, the inline editing ability within Writing Space (shown below), which uses a third party WYSIWIG called TinyMCE, did not allow the product to fulfill this requirement.

The Goals

Goals for Instructors:

Ensure that instructors can:

  • Easily insert text comments from a text document, in the form of personal comments, without typing directly into the live text (that was the “before” state). Execute something closer to Microsoft Word’s Commenting functionality.
  • Select from and insert ‘common errors,’ pre-authored comments from Pearson. Common errors consist of a ‘title’ and some brief explanatory text.
  • Save and reuse personal comments in other paper reviews.
  • Easily direct students to remediation in a parent course, as a function of the common errors. This assumes that selecting a common error will force a background call to the parent course and put the associated remediation on the ‘study plan’ in the parent course.

Goals for Students:

Ensure that students can:

  • Easily access comments when reviewing their paper and potentially revise their work.
  • Easily identify the ‘topics’ they need to remediate in the parent course.
  • Print their reviewed documents with the commenting included in the original document. Placing comments in margins or end-notes are possible options.

 

The UX Improvements

A Few Foundational Updates:

Although a complete redesign of the product was not within scope, we were able to enact changes that make considerable improvements to the overall experience.

  • Dividing a single, long “Tools” tray into separate tabs (shown below)

  • Applying Bootstrap look-and-feel that is more consistent with Pearson’s new design guidelines

  • Implementing a more touch-friendly design and responsive framework

Highlighting & Commenting Updates:

  • An instructors’ dialog box was added to the student paper, enabling instructors to leave comments. This is automatically activated when an instructor highlights text.
  • Once a comment is saved, it is added to the sidebar, supporting the requirement to enable users to more easily add, edit and track comments.
  • Instructors can now add three types of comments:
    • Custom
    • Favorites
    • Common Errors 

Reviewing Comments:

  • Numbers and a timestamp have been added to each comment, allowing students to better track and find comments.
  • Commented text is highlighted to provide clear indication as to which text the feedback is referring to.
  • Students can now check off the comments they’ve resolved.

  • Bi-directional scrolling has been added: When a user clicks on a comment in the essay, a list of comments auto-scrolls. When a user clicks on a comment in the list, the essay auto-scrolls.

Compare & Edit Mode:

Added a Comparison Mode to allow optional workflows when adjudicating an instructor’s comments: 

  • Show one version at a time
  • Show both the instructor feedback (read-only) and a new version (editable) at once

Additional Improvements:

  • Redesigned the rubric grader for easier use on tablet, and made it touch-friendly

  • Improved the File Upload workflow