Enable students to use imagery in essays

Feature to submit an essay combining handwritten drawings or text and digital content

Company Learnosity
Role Senior Product Designer
Topics UX design, prototyping, user flows, B2B
Year 2019

Project Overview

One of the most popular Learnosity question types is the essay question with rich formatting, like bullets and text formatting, as it is useful for educators to assess a students ability to explain their responses and thinking. Handwritten drawings and diagrams can be used for clearer explanations to accompany a students digital response.The existing question type did not have a way that students could incorporate images within their essay responses so the product team was tasked with coming up with a solution that met the students needs as well as a grader evaluating the students work.

Working collaboratively with the team we were able to develop a shared understanding of the problem, identify our user needs and context, and deliver a feature that met those needs and in turn was successfully adopted by multiple clients and met our success metric goals.

Feature Goals

  • Enable seamless image integration in student essay responses
  • Support both student submission and grader evaluation workflows
  • Optimize the image upload experience
  • Reduce student stress during the assessment process

My Role

  • Discovery research to understand user needs and pain points
  • Student and client interviews to gather requirements
  • Design exploration and concept development
  • Wireframing and prototyping solutions
  • User flow development for optimal experience

Design Challenges

Student Experience

  • Creating a simple image upload process
  • Minimizing stress during high-stakes assessments
  • Supporting various image types and quality levels

Grader Experience

  • Ensuring uploaded images integrate seamlessly with essay text
  • Providing clear view of student submissions
  • Maintaining assessment workflow efficiency
Handwritten chemistry diagram made by a student with pen on blue lined paper.
Discovery research uncovered more information around the users needs and context which helped my understanding of the importance of certain capabilities in the user flows of both students and teachers. This diagram is a real example of an image a student might include in their essay response.

Research and Discovery

Before starting on any design exploration I did some discovery research to help me understand the problem and the user personas, including what they are trying to achieve and where and how are they doing it. The research included desktop research, interviews with two students about their experiences, leveraging existing research available from a domain expert in teaching and grading online assessments, and sessions with our clients to understand their specific users needs.

Through my research I also wanted to understand our current capabilities, if there were any existing UX patterns in our products that we should leverage, and what were the best practice UX patterns existing today. It was important to me to not maintain existing patterns if they are not good patterns. Our users use an ecosystem of software every day and they should not have to re-learn an interaction that has an existing best practice.

Design and Prototyping

The design process for me always starts with a lot of questions and more questions arise as you go. From what we learned about our users needs we could answer some questions but still needed to ask others.

  • How does the student want the image to look?
  • What devices will the student use to take their image?
  • How will they get their image to their computer? Is it already there?
  • Will their be issues with image size?
  • How can we help the student feel confidence in their upload?
  • How does stress impact a student when uploading images for a test?
  • How can they resolve mistakes? e.g. uploaded the wrong image, image orientation, image name
  • For graders, what is important for them to see in the image? What other content might they have on their screen when grading?
Image of a clickable prototype of the grader view with other tools a grader might use on screen when grading like a rubric.
The design process included basic clickable prototypes to run through with users and clients for the different views. These prototypes also aided conversations and prioritization of the different capabilities available in each users view.
Image of the user flow of a student creating, uploading and submitting an image online.
This user flow diagram of a student creating, uploading and submitting an image online helped to understand the process and mental models of the different users. To view image at a larger size, right click and select view image.
The final deliverable included some helpful features for the student and grader personas.
The final deliverable included some helpful features for the student and grader personas that at one point were on the chopping block but were saved because of what the research told us. Note: The UI design had to use existing UI styles so is not very flashy.

Learnings and reflections

In this project I was able to use my research to impact the decisions the product team made when defining the “shoulds” and “musts”. By using the real world examples and user journeys to build a picture of the “why”, my design decisions could bring the personas and their context into the product development process.

The power of getting across the emotional situations of our users, for example a student in a stressful situation during a test or a time-poor grader trying to assess their students effectively, was what supported crucial, even though small features, in being included. Things like rotating or replacing an image for students and zooming into a specific location on an image can save our users time and stress when completing their tasks.

Outcome

The Essays with Images feature was successfully adopted by multiple clients and met all defined success metrics. The design successfully balanced technical requirements with user experience needs, creating a smooth assessment experience that reduced support burden while enhancing educational outcomes.

Impact

This feature expanded Learnosity’s assessment capabilities, allowing for more diverse and creative student responses while maintaining the platform’s reliability and ease of use for educators and administrators.