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.
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:
- Discovery research including interviews with students, clients, and domain experts
- Design exploration and wireframing
- User flows
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.
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
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?
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.
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" 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.