Essays with Images

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

Skills / Tools

  • UX Research
  • UX Design
  • UI Design
  • Collaboration
  • Figma


  • Desktop Research
  • Interviews
  • Prototyping
  • User Flows
  • Client Feedback Sessions

Learnosity is a white-labelled, set of embeddable API’s that cover the authoring, delivering, capturing and reporting on student responses for online assessments. With 14.8M monthly users, powering the world's leading learning platforms and publishers.

The Brief

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.

My Role – UX design and research

For this project I was the lead designer and was responsible for:

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 defined success metrics.

Discovery Research

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.

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 Exploration

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.

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.

Understanding the Whole Interaction Flows

Getting deeper into the design it was helpful to put together detailed user flows that broke down the interaction. By doing this I was able to identify all of the points where a student or grader might experience an issue or where we could simplify or "add delight" in the process. I was also able to break down the different mental models the user might have and compare them to what's technically happening in the background.

An example of where this helped me make a design decision was when we were considering image optimization. The initial designs included a warning that told the user when an image was optimized. When exploring this a bit further and doing some testing on different size images, I realized that high quality images from a variety of mobile devices had no visible change in quality when optimized. By showing a warning message for these images we eroded the confidence the student had in their upload. I made the design decision to make the warning show only when the image is just over the size of high quality mobile device images, therefore still giving the warning where it might be necessary but not for most students where there was no image quality change.

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.

Learnings and reflections

Image of the student view when uploading an image in the modal.

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

In this project I was able to use my research to impact the decisions the product team made when defining the "shoulds" and "musts" for this feature. 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 helped some crucial, even though small features, be 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.