Designing a lecture delivery platform built with online learning in mind
by Team Awesome
How the idea for illume was born
2020 has been a year unlike any other. COVID-19 has forced students and professors to scramble to find a way to quickly pivot to online learning methods with little to no preparation or training. As university students, after using existing learning management solutions for several months, we felt they were simply not designed with distance learning in mind, and little emphasis was placed on ensuring a great learning remote learning experience for students. For instance, while video conferencing solutions like Zoom and Google Meet are free and easy to use, there is no way to have smaller group or one-on-one conversations during a live video lecture. Further, many students are stuck watching pre-recorded lecture videos on their own, and miss out on the many important social and educational benefits of learning with friends and fellow students that in-person learning provides. Existing content delivery solutions weren’t great for professors either, as they get little insight into how much of the various online lectures students are actually watching and understanding, and any available analytics are cursory at best.
As university students, after using existing learning management solutions for several months, we felt they were simply not designed with distance learning in mind, and little emphasis was placed on ensuring a great learning remote learning experience for students.
Despite the significant added challenges and impact COVID-19 has had on online learning, we feel that remote learning options are here to stay, even in a post-pandemic future. Universities will be expected to provide students with more choice in how they learn, with one of those ways being through online learning. The more we talked to our fellow students, the more our goal with this project became clear: we wanted to design a product that would help both students and professors to have a much better experience with online learning than those of us forced into it due to the pandemic. And thus, the idea for illume was born: a lecture delivery platform built with online learning in mind.
In the remainder of this blog post, our team will outline our design process: from empathizing with users and defining the problem, to ideating potential solutions, to prototyping these in both a low and high-fidelity manner. Finally, we will share our hope for the future of illume.
Empathizing with users and defining the problem
Personas
In any design process, anticipating the users who are going to use the product is important. In order to do this, our team came up with 3 personas that will represent the types of users who will be using our product. Each persona shares a little bio of the individual, the goals, fears, personality, technological knowledge, brands that they like, and the motivations. The 3 personas that we created were “Kelly the Keener”, “Mary the Many Extracurriculars”, and “Peter the Procrastinator”. As these names might suggest, Kelly is an individual who is focused on studying and doing well in school academically. Mary is a busy individual with many extracurricular activities outside of school. Peter is a procrastinator who has a hard time starting his assignments and studies on time.
Empathy Maps
We also created Empathy maps in order to further explore the senses and perspectives of each persona, and better see their needs and wants. We listed the pains, gains, what the person sees, hears, thinks, feels and does.
User Interviews
As part of our exploratory study process, we gathered user observations and interviews to verify our beliefs about anticipated users, and further strengthen the information about the actual users of the product. We carefully drafted user interview and questionnaire questions that would provide more insights about the actual users, and show that our product is what the actual users would want. Here are the questions that we asked our interviewees.
The purpose of questionnaire questions Q1, Q2, Q3, and Q4 was to get a better sense of the student’s background, which could give insight as to why some students would answer the remaining questions differently. Q5 and Q6 could tell us how the universities are currently managing the students’ online learning. Q7 and Q8 would show how the students are individually able to organize their tasks.
Interview question #2 and #3 elaborate on the last two questionnaire questions by allowing students to use their words to describe how effective their organization is. Interview question #4 builds on that and provides more context for the researchers to be able to fit each student into a persona. Interview questions #5–8 ask the interviewees to describe their current view of online learning.
Interview Process
Six students were given the questionnaire and then subsequently asked a series of follow-up interview questions by a member of the project team. The questionnaire was to be filled out individually by each student on a Google Form and the responses were stored on a secure cloud service (Google Drive). The interviews were completed via video call after explaining the interview process and obtaining consent. All interview notes were stored on Notion, a secure cloud service. The interviewees were then sent a thank you email for their time and assistance.
The interviewees were specifically chosen to be from different backgrounds (i.e. from different universities, different years of study, different genders, etc.). The purpose of having people from different backgrounds is to have a more diverse perspective of what could potentially be needed as a solution for the problem we are trying to solve.
Interview Results
From the questionnaires, our team learned that many students think that online learning is “a bit more difficult” regardless of year of study and their familiarity with online courses. Some of these challenges were outlined in the interviews, where the omission of a “routine” often led to procrastination, and professors not providing an effective learning environment for their students.
We also learned what other apps students use to help manage their online learning, and these included Google Calendar as well as physical planners and day books. We also found that students rated the effectiveness of their current organizational strategy between 2–4 out of 5.
Affinity Diagram
In order to summarize and analyze our exploratory study results, we then created an affinity diagram based on the user questionnaire and interview responses. We were able to determine 3 key themes from the users we spoke to:
- Course content delivery needs improvement
- Lack of in-person interaction is undesirable
- An advantage to remote learning is flexibility of time to complete course content
At the bottom level, the summaries of different points that each interviewee had stated were listed. The 3rd level shows the categorized cluster of the summaries of bottom level. The second level is a single sticky note that summarizes every idea. The first level takes into account the frequency and weights of each idea, to determine the important ideas. These ideas are our main key themes.
From this process, we determined that the focus of our product would be on tackling the themes of “course content delivery needs improvement” and “lack of in-person interaction is undesirable”.
User Tasks
Our team had identified 3 key user tasks from the questionnaire and interview responses that users would encounter daily when studying online courses:
- Watching a pre-recorded lecture
- Coordinating study groups online
- Scheduling using Google Calendar & Keep
For each of these key user tasks, we performed a Hierarchical Task Analysis, in order to pinpoint where in the workflow would need improvements.
From the HTA on watching pre-recorded lectures, we have learned that managing lecture materials such as textbooks, slides, and notes in multiple tabs are costly subtasks that could be improved via better window management on a single tab. This could emulate using multiple monitors on a single screen, which could lead to increased productivity.
The HTA on coordinating study groups online shows that numerous steps that are taken to organize an online group study session could be cut down via a system that supports all the tools that are needed. These tools include messaging, document sharing and collaboration, video chat, screen sharing, and a scheduler.
Analysis of products like Google Calendar and Keep shows that the cloud sync across all devices is a useful feature that many users like. Ultimately we learned that users prefer accessibility, convenience, versatility and customizability when it comes to using a scheduling application.
Coming up with ideas
Through the use of storyboards and sketches, we came up with a number of possible features and use cases that we thought would be valuable for both students and professors.
Virtual “rows” in live online video lectures: As a student, I want to replicate sitting in a row with my friends or classmates for live online lectures so we can have side conversations without interrupting the entire class
“Live Chat” with professor with pinned comments and threaded conversations: As a student, I want to chat live with professors and other students, quickly see the top pinned comments, and easily follow conversation threads
Watch pre-recorded lectures at times that convenience the student: As a student, I want to watch lectures at times that convenience me and be able to rewatch old lectures to not miss any details
“YouTube Chapters” on pre-recorded lecture videos: As a student, I want to see the different sections of the recorded lecture video so I can quickly jump to the part I need to watch
Video analytics for professors: As a professor, I want to get analytics on which course content students have completed, so I can better understand their content delivery preferences, and improve the quality of my lectures
The first main feature that we brainstormed for was “watching pre-recorded lectures with other students”. At first, when brainstorming about this feature, we were going to give the functionality of watching pre-recorded lectures at any time of day, as can be seen from the storyboard below.
From the perspective of a student, we believed students had the mindset of wanting to watch lectures at times that convenience them. However, as we started creating sketches for this feature, we soon realized that there could be added functionality (watching lectures with other students) that would really benefit students. This new idea was further confirmed when we looked back at our previous user interviews and noticed that many students wish to regain in-person interaction with their classmates.
After completing various “Crazy-8” sketches and discussing as a team which format would be preferred, we ended up with a consistent design format that we would create sketches for.
Here are some sketches from “watch pre-recorded lectures with other students”.
As you can see from the sketches above, we were able to identify the format of our “pre-recorded lectures” and we annotated some functionality that would be available when creating our prototype. From there, we created some user flow diagrams to give us a sense on how the app would flow from sketch to sketch.
The critiques that we received for our storyboard and sketches were positive. We were able to convey the purpose of this feature effectively, and how it differentiated from other applications.
The second feature that we focused on was having “Virtual Rows” in live video lecture. The storyboard that we created was focusing on the idea that students wish to sit in a “virtual” row with friends/classmates for live lectures, to being able to interact with other students in a setting that replicates in-person lectures.
Here is the storyboard:
After lots of discussion, our team decided on a certain design to be able to easily describe to users that our app is replicating a lecture, by creating “Virtual Rows”.
Here are the sketches:
Moreover, we created a user flow for the sketches, to show the transition from each screen. Here is the user flow:
Again, the critiques were positive. We got feedback that our screens should have a more consistent design, which we kept in mind for future iterations, and ultimately ended up creating a more uniform look in our prototype with a shared home screen and app header to maintain consistency for all features.
Prototyping, testing, iterating, and then iterating again
Based on design critique feedback from other student teams in the course as well as the TA, we decided to focus our prototyping efforts on the two features that showed greatest potential: select virtual seats in live lectures and watch pre-recorded lectures with friends.
Select virtual seats in live lectures: The virtual classroom where this live video lecture happens simulates the physical lecture room setting. Students can choose their preferred seat in the classroom. Simultaneous text, audio and video chatting is available between students seated in the same row during the video stream.
Watch pre-recorded lectures with friends: Students have the possibility to create chatrooms to watch lecture videos together with a group of other users. The chatroom allows users to play video and text, with the ability to engage in audio and video conversations at the same time. Students can join any chat room either by invitation or by searching for a specific one.
Low-fidelity prototype and evaluation
Using the free online prototyping tool Whimsical, low-fidelity static screens were designed to test the general usability of the interface. Participants were expected to take a single action on each screen, following specific instructions. Each screen portrayed some feedback about a single action to be taken on the previous screen. A simple interface was created by limiting textual information and including self-explanatory clickable widgets.
In general, we received positive feedback from participants about the unambiguous nature of the prototype interface. However, some participants experienced some confusion on some of the screens because of multiple options available on a single page. During later iterations, we focused on improving information discoverability, findability and to better progressively disclose information to users to help them solve the problem. Limiting the amount of information displayed on a page might help to narrow down the options presented on a single screen, and we learned that this could work towards helping users more easily determine which actions they need to take on any given page.
High-fidelity prototype and evaluation
While we were pleasantly surprised at how willing participants were to work with us on the low-fidelity prototype, and despite the fact we got a lot of great early feedback, there are some things that just can’t be determined without a higher level of fidelity. Thus we began work on upgrading to a high-fidelity prototype by adding colors and transition controls using Figma, another fantastic free online prototyping tool. Heuristic evaluation and cognitive assessments were then conducted on this version of the prototype. Unlike the low-fidelity prototyping, participants were not presented with any detailed instructions on how to carry out the requested tasks during the usability testing. Instead, they were given realistic use case scenarios and encouraged to navigate the interface independently and naturally to complete the assigned tasks.
This prototype received positive feedback on several aspects, including the use of familiar terms in the interface, good choice of colour scheme, efficient minimalistic and clean design, and above all for providing virtual social meeting opportunities within the virtual classroom setting. However, some participants questioned the lack of certain control components. Moreover, some felt that certain control icons were not clear enough. A few task steps were also deemed to be inefficient.
In response to this feedback, our next design iteration focused on trying to strike a balance between minimalism and efficiency to improve the issues and concerns raised. For instance, since the participants failed to perceive the lightbulb icon in the top-left of the application header as the app’s logo, they also failed to notice that clicking on the logo triggered the prototype to go back to the initial dashboard. This problem was overcome by adding the name of our app, “illume”, as clickable text next to the icon. Furthermore, in the following screen, where participants were presented with the possibility of selecting their seats in the virtual classroom, we decided to combine what was previously two screens into one, so users could now both choose their seat and change the seat order on the same screen. We felt these screens were intrinsically related to each other, and we recognized we had an opportunity to simplify the user flows and remove extra clicks and inefficiencies.
Reflecting on our design process and our hope for the future
Through the course of the term, our team started with a problem we ourselves were facing as students learning remotely due to the pandemic, and through our design process, and months of hard work and continual iteration, we were able to arrive at a design we were proud of. Before we talk about our hope for the future with illume, let’s look back at that design process and journey that got us here.
For starters, by focusing on the value proposition and fleshing out our user personas allowed for better insights into how each user group’s needs should be accommodated and developed in the best way possible. By plotting out these specific user groups and their needs, we were able to establish a better idea of what both students and professors would require from an online lecture delivery platform. We also conducted a number of user interviews with real students to validate our ideas and find even better solutions than what we had at the time, as well as better understanding the frustrations and limitations students had with existing solutions, such as the inability to communicate with friends and classmates during a live virtual lecture.
By mapping an affinity diagram from user issues, we were able to derive the basic user tasks needed by a user of our system. This allowed for further refinement on the three core use tasks: watching pre-recorded lectures with friends, coordinating study groups, and scheduling future lectures and group times through google calendar. These three key tasks maximize value for the system and remain our concentrations for the rest of the idea development.
Throughout our ideation process, we focused on finding new value in our existing system. This included ideating the concepts of ‘virtual seats in live lectures, a ‘live chat’ question and answer thread directly with the professor, the ability to watch pre-recorded lectures with friends, and having classes and courses organized in a ‘YouTube Chapters’ style. Focusing on our design critique feedback from other student teams in the course as well as the TA, we decided to focus our prototyping efforts on the two features that showed greatest potential: select virtual seats in live lectures and watch pre-recorded lectures with friends.
Through multiple rounds of prototype iteration and subsequent user interviews and usability testing sessions, we were able to narrow down the user experience for each feature. These included iterating through several models of low and high fidelity prototypes with Whimsical and Figma, allowing for a steady improvement in each of the user flows and crafting a better interaction experience.
In the future, if we were to implement this project we would most likely leverage React (for Web and Desktop) and React Native (for mobile), similar to how Zoom exists on all platforms (Web, Desktop, Mobile). This will allow maximum cross-platform compatibility, and would be ideal for connectivity for both students and professors in the future. This would truly realize our vision for illume, and finally make possible an online learning experience students so desperately need.
