Education

Note: some of the details of this project are removed to protect the company’s confidential and proprietary information.

Problem

Gradescope’s biggest problem we needed to solve was the difficulty the freemium users had in getting their institutions to purchase an institutional license. We also needed to re-engage existing users who haven’t used the product in a while. This resulted in missed growth opportunities for Turnitin (owner of Gradescope). Key issues which lead to low conversion rates:

• Lack of effective onboarding flows which would allow new users to learn new features without spending too much time
• Lack of incentive for basic (freemium users) to upgrade to an institutional license because the basic tier was as useful as the paid tier
• Lack of help to direct satisfied customers to become advocates who get their institution to purchase an Institutional license

Qualitative data from already recorded user interviews with Gradescope users further confirmed the key issues listed above. Users were stuck on where to start once they jumped into Gradescope, what assignment type would be the most appropriate for which use case, and what the advocate program is all about.

My Role

As the lead designer of this project, I held regular synchronous meetings with stakeholders to ensure alignment on scope and requirements. Design decisions were supported by competitive analysis and feedback from user interviews.

Defining Scope

I identified the original scope of the onboarding flow, that would assume users would walk through the entire experience of Gradescope in one sitting, would not align with what customers expect from the product. To prevent the development of an onboarding experience that overwhelms customers and doesn’t meet their needs, I did the following:

• I put together examples of effective new/returning onboarding flows from other applications that showcase broken down tutorials.
• Using the competitive analysis, I emphasized with stakeholders that breaking down tutorials into small chunks would encourage more growth by giving users the power of choice. The power of choice refers to the user being able to decide which features they would like guidance on.
• Gradescope users love the ability to grade assignments quickly without anything getting in the way of that process (user interviews also confirmed this). Our users want to save time, not add more time. After realizing this, we decided to change the requirements and move forward with a broken down onboarding approach.

Another challenge was determining which features in Gradescope needed a tutorial. It was important that the new onboarding provide better guidance for users on how to navigate the demo course and how each different assessment type works, along with appropriate scenarios for each one. The last part of the onboarding was to give Institutional Trial users the push they need to advocate for an Institutional License.

• Banners were added to the dashboard to make it more clear to users they are in an Institutional Trial
• Another engagement was added to the Analytics page informing that users will lose access to their premium features when their Institutional Trial is expired. The engagement’s Learn More button directs the user to the appropriate page on the Gradescope website where they are guided on next steps

Designing Solutions

The design phase of this project started out with wireframe boxes over the existing screenshots of the Gradescope app. Wireframes were regularly reviewed during synchronous team meetings with product managers to ensure alignment on the chosen direction and guarantee on-time delivery by the launch date. After wireframes were approved, hi-fi designs were created in Figma that uses Turnitin’s internal design system to keep them consistent with the visual identity of Gradescope. A new product I had to learn quickly was Gainsight PX, a non-UX centric platform I had never used, but this was another opportunity to use my HTML/CSS knowledge to make the engagements that launch in Gradescope to look exactly like the figma designs.

Impact

The final designs of the onboarding experience have successfully led to new growth and engagement of the Gradescope product, in addition to an increase in institutions with a license. The biggest win is how it has raised more awareness of the Gradescope Advocate Program with a new engagement that entices users to learn more. By June 28, 2023, 28 out of 45 users (62%) click on Learn More as shown below. Gradescope advocates continue to help advance growth opportunities for Turnitin.

• The How to Use This Course 3 step carousel for the Tutorial course has a shocking 901/1010 completion rate. meaning they clicked through all 3 slides instead of x-ing out.

 

Note: some of the details of this project are removed to protect the company’s confidential and proprietary information.

Problem

The Ordering question proposed for development was not back by research and select use cases.

My Role

I was the lead designer for this project and worked with developers, engineers, and other stakeholders to get this question type released. Design decisions were supported by feedback from both stakeholders and customers.

Research & Analysis

Feedback from customers of our testing products revealed that there was a pressing need for a new Ordering question type for assessments. While the UX for creating the question within the administrative portal was already scoped and released, the same was not defined for its functionality in the client application (Examplify). The current designs for Ordering proposed for development were not supported by research and feedback.

Defining Requirements

To define requirements, I needed to take a sample test within Examplify to take screenshots of the drag & drop question type in beta form, as drag & drop and ordering are similar concepts. Once the screenshots were gathered the following key issues were identified:

• No visual indicators were present to make clear to the user that items could be dragged
• No visual indicators appeared to show the user locations where items could be dragged to

Customer feedback also revealed that visual indicators would be necessary to make it clear that items are draggable. I made it clear in the new requirements that this addition would be essential for this question type to be in line with what customers expect. Additionally, these requirements needed to apply to both Desktop and Mobile versions of Examplify.

Prototyping

New project requirements and the key issues were presented to product managers during weekly synchronous team meetings to ensure alignment on the next steps. At this start of making the prototype, it became clear making it fully interactive would be necessary to showcase this new concept to get full buy-in from stakeholders. With early drafts of the prototype in Figma made the tool’s limitations obvious, I decided it would be best to start over and code it with HTML, CSS, and jQuery.

Demo round 1

Demo round 2 with the additional feature of a color change hover and drag events

Impact

The creation of the HTML/CSS/jQuery prototype resulted in a seamless handoff to development, as most of the developers were already familiar with jQuery and could easily adapt it to fit into the client app. The prototype was exactly all that was needed, with the only change to move the drag icon to the right of the pills to address the concern of the touch target being too close to the label. I also received help from a product writer who was gracious enough to host the prototype on an internal company server, so the link could be shared with rest of the UX team for further feedback. You can now view the documentation of the Ordering question here.

Note: some of the details of this project are removed to protect the company’s confidential and proprietary information.

Problem

The process users go through to tag category types, along with all or some of its subcategories, to a question is incomplete and inaccessible for administrators who cannot use a mouse to navigate.

Definitions:

• Category Type – a top-level category that contains its own tree with infinite levels
• Category Tree – a tree of nested levels similar to a folder tree, where a folder can contain subfolders within
• Category – an item similar to a folder, but represents a test topic
• Parent – the category of which the child categories live
• Child – a category that is within the parent category

My Role

I was the lead designer of the project and collaborated with stakeholders during synchronous and asynchronous meetings

Research & Analysis

This project for improving the experience of tagging categories to questions came about during my UX audit of our testing platform. Digging deeper into our internal knowledge base, I discovered that past user interviews were done six years ago but have not been reviewed since. After going through all the interviews, I organized the pieces of important feedback into common themes, but the one theme that stood out was Question Categories. The research showed that users had been asking for years for an enhanced category experience that allows browsing through a category tree and tagging multiple sub-categories to a question at once. The following issues also confirm the feedback from the research:

• When creating a new test question or editing an existing one, clicking the Add Categories button opens a long popup listing all the user’s category types. This component was proven to be inaccessible for users requiring screen readers
• The list of only the category types within the popup is cut off within the browser screen. Users expect to see their entire category tree and select categories. This popup was also inconsistent with how the category management page works, where users can browse their entire category tree and make changes
• There is no Save or Tag Category Types button in the popup to confirm selections. Users are expected to select each category type individually and then close the popup to see the category types added. To remove category types, they must open the popup again to manually change their selections
• To close the popup, the user must click outside of it with a mouse. Users aren’t able to close the popup unless they figure out by chance that clicking outside of the popup closes it

User Archetypes

Test Administrator

The test administrator is responsible for overseeing the entire curriculum of an academic program. The most important responsibility of the role is ensuring all tests, questions, and rubrics are aligned with the program’s requirements. Test administrators work closely with test makers who receive feedback on test quality from test reviewers.

Test Maker

The test maker creates questions that go into a test. Test making is a collaborative process that involves receiving feedback from test reviewers. Instructors do not make the tests.

Test Reviewers

The test reviewers are members of a review board that provide feedback on tests

Challenges & Defining Scope

The biggest challenge was the hesitancy from product managers to invest in a new category tagging experience. Not only did this proposal fall outside of our team’s then-development roadmap, but there was also a concern that a redesign of category tagging wouldn’t provide a huge win. The current category tagging flow was viewed as a minor bug rather than a design problem. These concerns were addressed with an asynchronous meeting with the head product manager of testing. In that meeting, I presented the following potential consequences if category tagging is not redesigned:

• Future loss of business – our users utilize categories to group questions in subject areas to ensure alignment with accreditation. Failure to meet users’ needs may push institutions to switch to more customer-centric products
• Inaccessibility – this issue will eventually be confirmed in accessibility audits by our independent agency, and will result in a documented accessibility issue. Test administrators who require assistive technology cannot complete the same task administrators without disabilities can, therefore putting institutions using our product at risk of discriminating against specific user groups

The other challenge was to constrain this project to a medium size so it’s affordable to develop. To do this, my designs utilize our slider component found throughout the platform. Within this context of the business, some accessibility is better than none, so a compromise was needed to receive full buy-in on this solution. However, I ensured the in-scope requirements would be non-negotiable to push the company to start taking accessibility seriously.

The project also needed to utilize the current drill-down navigation instead of an expensive UI redesign. This would have immediately resulted in a rejection due to high cost. An extensive read-through of our product’s documentation was also a reference to make the designs more consistent with what users expect. To summarize the findings, a user flow of the current experience was created:

Link to complete user flow of the current experience for tagging categories to a new or existing question (Password-Protected)

More cons were discovered:

• Cannot search for category types to tag, yet can search for child categories within a category type
• If the user presses the enter key to try to select a category type, a new case study appears, which is irrelevant to the user’s goal

Exploring Different Directions

The next step was to create user flows of two directions. The first option involves all of the navigation, search, and selection happening within the existing slider component. Option 2 shows a search field in place of the Add Categories button. The second option maintains another step where child categories can be added only after a category type is added.

Link to complete user flow for option 1 (Password-Protected)

Pros:

• Only one button is clicked to activate the slider
• Way of navigating categories is similar to folders in a file manager

Cons:

• Selecting a category also assumes its own child categories are also selected. If the user decides to exclude some of the child categories within a parent sub-category, the user can drill into the parent category and deselect some of its children

Link to complete user flow for option 2 (Password-Protected)

Pros:

• Users can search for category types on the fly and add one if it already exists

Cons:

• Mini-search field component is currently inaccessible as results tend to get cut off from the screen
• Process still requires two steps and doesn’t allow for thorough browsing of the entire category tree

Solution

Note: The prototype is a proof of concept with some options not being available to click due to its constraints

Link to Prototype (Password-Protected)

Option 1 was the chosen direction as the team agreed that it’s a better way for users to go through their entire tree and make selections at different points. The final step towards getting full buy-in from the team, and get this issue on our roadmap, was to create and prepare wireframes that detail the broader functionality of option 1. This concept also shows how a user can drill into a fully selected parent category to exclude some of its children if necessary. The prototype also includes:

• Being able to jump to any place in the tree containing selections to prevent users from needing to figure out where in the tree do they have selections
• Being able to more easily modify or remove selections even after they’ve been added to the question
• Having a Save button to confirm selections
• Having the entire tree be viewable within the product with no categories being cut off from view
• Designs for selections are simple, with the ability to edit or remove selections after after being added to a question

Impact & Next Steps

The following concepts were later presented to the product team during their synchronous meeting for feedback. After providing further evidence of this issue, I was finally able to get category tagging listed on our long term roadmap for improvements. While the development of this concept won’t happen until the future, I enjoyed formal recognition by the entire company during our online Q2 2024 meeting with an Action & Ownership award for this effort, and was posted on LinkedIn shortly after.

“Turnitin is excited to give a shoutout to the 2024 Q2 Action & Ownership Value Champion Awards recipients! These employees exemplify sustained accountability at work. ✨🏆 hashtag#workplaceculture hashtag#educationtechnology hashtag#edtech”

These designs would later prove to be foundational, with most of these UX patterns carrying over to the Content Banks feature briefly explained in this overview.