The usage of online platforms has skyrocketed in the past few years. Many students & professionals take courses from these platforms to upgrade their skills, learn something new or bolster their concepts. Supportify is a tool that helps online course takers retain and recall the information they learnt in these online courses.
The COVID-19 pandemic increased the dependence of students across the world on online education. Due to the lack of in-person experience, students have difficulty remembering the content taught in online courses. Our research also stated that the problem of retention and recall was mostly related to lecture notes.
The overarching design challenge
Design a way to improve the experience of note taking, managing notes and using them to recollect content for students learning from online course providing platforms.
The solution
We designed a web based application called Supportify which would help one retain and recall content taught in online course. Supportify provides advanced digital note-taking functionality, monthly quizzes to retain information and quick access to digital notes whenever needed!
The process
Behind the scenes of Supportify
Background
Retaining and recalling content taught in online course was a frequent issue.
Due to the high dependency on online courses, we wanted to explore the problems faced by students. We interviewed our peers in the course and tried to understand their experiences with online education. We found out that many students faced problems retaining and recalling the content taught in online courses.
User research
We decided to dive deeper into the problem of retention & recall
We conducted some user research to understand why was it difficult for the users to retain and recall online course content. For this, we reviewed some articles & papers, spoke to a few students and observed them while taking an online course.
Literature review
Gain understanding of exisiting research and challeneges in online education.
User Interviews
Learn about the problems faced by the users from their experiences
Contextual Inquiry
Observing the users to get a deeper understanding of their challenges
Affinity mapping
We synthesized the data collected from our research!
We used affinity mapping to organize and categorise the qualitative data collected from our literature review, interviews and contextual inquiry to help generate insights and brainstorm ideas to solve the identified problem.
Research Insights & painpoints
Many problems in retention and recall were focused on note taking.
Many students were dependent on notes for retaining and recalling content taught in online course. Many of the issues which contributed to the problems of retaining and recalling content were related to taking notes.
Handwritten notes make it difficult to capture digital content
“I want to take screenshots of diagrams and slides to include in my notes but that’s hard to do when I am writing with my hand.”
Managing paper notes is a tedious task
“I am unable to organize my handwritten notes. Sometimes I write on random papers. Sometimes, I do not know which notebook has what content.”
Students find it difficult to refer to these notes when they need
“I take a lot of online courses, and then I do not remember which notebook has what notes. Whenever I need to access the content, it is difficult to recollect which notes to refer to!”
Persona & Empathy maps
Stepping into the user’s shoes
Based on the insights, we defined a user persona to make sure that we stay connected to the audience we design for at every stage of the design process. We also created an empathy map to capture the needs and the frustrations of these users.
Competitor analysis
How are the existing products dealing with these problems?
I evaluated some popular online course providing platforms and some supporting applications which catered to the problem of retention and recall & studied how they dealt with the painpoints which we uncovered.
The design challenge
How might we improve the experience of taking online course notes, managing them and referring back to them whenever needed?
Idea generation & solution
We ideated many solutions and took a vote on the ones we should go ahead with.
Using mindmaps, we ideated on some possible solutions for the identified problems. We then converted these ideas into post-its and asked our peers from the HCI/d cohort to review our ideas and vote on the ones which they liked.
Mindmaps :
Post-it voting :
Iteration #1
We created Low Fidelity wireframes of the selected ideas.
User Testing
Usability test with 10 students revealed some problems in our designs!
We showed our wireframes to students who had taken an online course previously and tested our concepts. The usability testing revealed the following insights.
Notetaking features were distracting
We realised that the students were paying a lot of attention to various notetaking features and were completely distracted from their primary task, the course!
It felt more or less like Google docs
The students wanted the freedom to write anywhere on the page without any restrictions (as on a paper) but the current page restricted this due to a grid format.
Multiple notebooks are unnecessary
We realised that the students were paying a lot of attention to various notetaking features and were completly distracted from their primary task, the course!
Suggestions were too loud & aggressive
The students wanted the freedom to write anywhere on the page without any restrictions (as on a paper) but the current page restricted this due to a grid format.
The challenge
We wanted to simulate the experience of handwritten notes, but our current designs were not successful in providing that experience!
Research - II
We analysed handwrittten notes taken by students to understand patterns!
To solve the challenge we were facing, we decided to collect lecture notes from different students and analyse the notes to understand the patterns of note-taking. These patterns helped us prioritise features so that the users do not get distracted.
Lot of usage of arrows
Colours for highlighting
Frequent use of bullet points
Circles or squares for chunking
Iteration #2
Based on the results from our usability test, we iterated on our concepts!
And it all come together to make one single web application - Supportify!
Final solution
Main features of our solution!
Digital Notetaking made easy
Take notes in parallel as you watch an online course
Unstructured document with the flexibility of writing anything, anywhere!
Ability to capture digital content easily using screenshots and video exerpts.
Focused mode with only necessary features visible.
Suggestions to note down important points taught in the lecture.
Manage all notes in one place
All the notes will be stored on the webapp in one place
Search notes by course name, name of the notes or keywords
Filter by category, date created to find notes easily.
Refer your notes or edit them if needed.
Recall course content easily
The floating button (if enabled) will provide a quick access to your notes
The floating button would provide a quick overview of your lecture notes
If enabled, the floating button would also provide a subtle indicator of refering to notes
User Testing Round - II
4/5 students said that Supportify can help them retain and recall course content!
“Parallel notetaking, awesome!”
“I would definitely use this for taking notes. Its so simple and lets me capture the digital content very easily!”
“Now I won’t lose my notes.”
“I used to never remember where i left my handwritten notes because I took many courses. Now I do not have to worry about it!”
Retrospective
Reflecting on my learnings!
1
Feedback is of utmost importance!
While taking a vote on the ideas which we had generated for the identified problem, understanding different perspectives of people on our ideas gave us a better understanding of what would work and what won’t.
2
Prioritization is an important skill as a designer.
We tried including many features which ended up distracting the user. This project taught us to prioritise features and not to provide a lot of functionality because it can end up overwhleming the user.
3
Communication is the key to every conflict.
During this project, we had some team conflicts but we later realised that communicating our thoughts and ideas properly and understanding each other is more important.
