Streamlining the Online Tutoring Experience

UX Research
User Journey Mapping
Prototyping

Online video tutoring in one display

Literal Change is a not-for-profit organization whose goal is to increase academic accessibility for underserved communities in the GTA.

My capstone project for my master’s degree in User Experience Design was to partner with Literal Change and use my expertise to design a better online tutoring experience.

Mockup of redesign

My Role

• Conducted user research
• Created empathy map for persona
• Created user journey maps
• Conducted usability testing & interviews
• Synthesized data
• Ideated & wireframed solutions
• Created hi-fi clickable prototype
• Tested protoype & iterated on design
• Handed-off design to developer

Tools

• Figma
• Miro 
• Adobe CC
• Google Workspace

Initial Communication & Project Kick-off

Cognitive walkthrough

I used our initial meetings and communication to establish a nuanced understanding of Literal Change’s organizational goals, various users, and the existing system used to conduct essential actions, including all relevant software and hardware. 

User Research

The target user was a volunteer tutor. Using our initial discussions, open-ended interviews, and preliminary research, we developed Tina, a persona that represented a Literal Change volunteer tutor.

Empathy Map

I created an empathy path of our persona to highlight pain points as well as valued experiences,  helping us to develop a deeper understanding of the psychology of the user. 

Usability Testing

I lead a think-aloud walkthrough of the current tool with 6 participants. All of our participants were recruited from inside the Literal Change organization, and to meet our inclusion criteria each participant had to be familiar with using the tool. 

Affinity Diagram

Using Miro as an online whiteboard, my group members and I compiled all our observations and findings from our user testing sessions. We utilized an affinity diagram to group together related data and identify patterns and common themes. 

As-Is Experience Map

I created this as-is experience map to develop a complex and organized understanding of the user’s journey from start to finish. 

Ideation

For our redesign of the Literal Change assessment tool, we aimed to build on the existing tool’s foundation by addressing usability issues while maintaining design elements that already work. Our ideation integrated findings based on preliminary and heuristic UX research, as well as data drawn from our interviews and usability testing with coordinators and volunteer tutors. On a more granular level, we focused our redesign and prototyping mainly on the assessment tool’s homepage and global features, which appear throughout the tool, such as the new sidebar navigation and user video displays. To align our team at the outset of our design ideation process, we developed the following three hill statements:

Hill 1: A volunteer tutor can complete an assessment without external programs.

Hill 2: A volunteer tutor can refer to previous session notes at a glance.

Hill 3: A volunteer tutor can easily determine assessment progress at all times.

I presented our hill statements and initial ideas to our Literal Change project partner to receive stakeholder sign-off before proceeding with our redesign.

Medium-Fidelity Sequential Storyboard

1. Having logged in, Tina waits for her student to join the session at the Welcome Page. If the student is late (as they sometimes are), Tina can send a reminder to the student by clicking the “Share session link” button. Fortunately, the student is right on time. They’ve enabled their video, so Tina can see her student on camera. She can also see what’s on the student’s screen in the “Student view”. Finally, “Administrator video” is Tina’s camera. Tina greets the student with some small talk, then starts her second session of the assessment by clicking “Resume assessment”.
1. Having logged in, Tina waits for her student to join the session at the Welcome Page. If the student is late (as they sometimes are), Tina can send a reminder to the student by clicking the “Share session link” button. Fortunately, the student is right on time. They’ve enabled their video, so Tina can see her student on camera. She can also see what’s on the student’s screen in the “Student view”. Finally, “Administrator video” is Tina’s camera. Tina greets the student with some small talk, then starts her second session of the assessment by clicking “Resume assessment”.
2. The Homepage loads. Before Tina selects a test, she wants to refresh her memory about the areas the student finds challenging. She clicks the “View all notes” button.
2. The Homepage loads. Before Tina selects a test, she wants to refresh her memory about the areas the student finds challenging. She clicks the “View all notes” button.
3. The Assessment Notes page appears. Tina is happy to see information gathered from the first session all in one place, as this is something the previous version of the assessment tool lacked. Tina consults her notes, and sees that she wrote that the student had trouble recognizing similar-sounding words. Tina wonders if she previously administered the PASS test. She glances over at the left navigation column, and sees the yellow progress bar. She realizes that this test is only partially complete. She decides she will resume the test by pressing “6. PASS Test”.
3. The Assessment Notes page appears. Tina is happy to see information gathered from the first session all in one place, as this is something the previous version of the assessment tool lacked. Tina consults her notes, and sees that she wrote that the student had trouble recognizing similar-sounding words. Tina wonders if she previously administered the PASS test. She glances over at the left navigation column, and sees the yellow progress bar. She realizes that this test is only partially complete. She decides she will resume the test by pressing “6. PASS Test”.
4. From the PASS Test page, Tina sees the PASS test is broken up into smaller tests. She immediately knows which ones she’s already administered because of the green checkmark next to the test’s name. She also sees that they have started but not finished the Syllable Segmentation test. Tina can also see that the test is 70 percent complete. Tina decides to have the student finish it off and presses “Syllable segmentation” to launch the test at the last unanswered question.
4. From the PASS Test page, Tina sees the PASS test is broken up into smaller tests. She immediately knows which ones she’s already administered because of the green checkmark next to the test’s name. She also sees that they have started but not finished the Syllable Segmentation test. Tina can also see that the test is 70 percent complete. Tina decides to have the student finish it off and presses “Syllable segmentation” to launch the test at the last unanswered question.
5. Tina is pleased to see that there are now script prompts and reminders that can help her prepare her student. She reads out the text highlighted in blue. The student says that they understand the instructions, so Tina presses “Ready” to resume the Syllable segmentation test.
5. Tina is pleased to see that there are now script prompts and reminders that can help her prepare her student. She reads out the text highlighted in blue. The student says that they understand the instructions, so Tina presses “Ready” to resume the Syllable segmentation test.
6. Tina asks her student to break down the word “camping” into syllables. The student says “camp-ing”, which is correct. Tina clicks the “Correct” button, and the test moves on to the next question.
6. Tina asks her student to break down the word “camping” into syllables. The student says “camp-ing”, which is correct. Tina clicks the “Correct” button, and the test moves on to the next question.
7. As the next question appears, Tina notices that the yellow progress bar has grown, so she knows exactly how far into the test she is, and this makes it easier to pace the assessment. She asks the student to break the word “elbow” into syllables. The student says “el-bee-oh”, which is incorrect. Tina wants to make a note of the student’s mistake, so she clicks “Notes”.
7. As the next question appears, Tina notices that the yellow progress bar has grown, so she knows exactly how far into the test she is, and this makes it easier to pace the assessment. She asks the student to break the word “elbow” into syllables. The student says “el-bee-oh”, which is incorrect. Tina wants to make a note of the student’s mistake, so she clicks “Notes”.
8. A notes tab pops up. Tina writes out how the student incorrectly broke down the word. Literal Change tutors often take notes about student performance. This is helpful for planning a tutorial package. Tina is happy that she can instantly make a note right where the mistake occurred. Tina clicks “Incorrect” to move to the next question.
8. A notes tab pops up. Tina writes out how the student incorrectly broke down the word. Literal Change tutors often take notes about student performance. This is helpful for planning a tutorial package. Tina is happy that she can instantly make a note right where the mistake occurred. Tina clicks “Incorrect” to move to the next question.
9. At this point, the student realizes they made a mistake with the previous question. The student grows frustrated. Tina relies on her Literal Change training to calm the student down, who does seem to relax. Tina thinks she should resume the test, but because she is still new to this, Tina isn’t sure if that is the right decision. She wants to ask her coordinator if she should continue. Thankfully, she can now do this through the assessment tool. She clicks the “Chat” button.
9. At this point, the student realizes they made a mistake with the previous question. The student grows frustrated. Tina relies on her Literal Change training to calm the student down, who does seem to relax. Tina thinks she should resume the test, but because she is still new to this, Tina isn’t sure if that is the right decision. She wants to ask her coordinator if she should continue. Thankfully, she can now do this through the assessment tool. She clicks the “Chat” button.
10. A chat window replaces the image of Tina’s camera. Tina types her question. Her coordinator assures her that everything is fine. Tina is relieved to have a second, more experienced opinion. She asks the student the question. The student answers correctly. Tina presses “Correct” to move on to the next question.
10. A chat window replaces the image of Tina’s camera. Tina types her question. Her coordinator assures her that everything is fine. Tina is relieved to have a second, more experienced opinion. She asks the student the question. The student answers correctly. Tina presses “Correct” to move on to the next question.
11. Tina runs through the remaining questions. When she asks the last one, the page changes to indicate that the test is complete. Tina wants to administer another test, so she clicks “Continue”.
11. Tina runs through the remaining questions. When she asks the last one, the page changes to indicate that the test is complete. Tina wants to administer another test, so she clicks “Continue”.
12. Tina runs through several tests, clicking “Home” to return to the homepage after each one is completed. Eventually, it is time to dismiss the student. Tina thanks the student and says that they will be in touch for next steps shortly. Tina clicks “End Session”.
12. Tina runs through several tests, clicking “Home” to return to the homepage after each one is completed. Eventually, it is time to dismiss the student. Tina thanks the student and says that they will be in touch for next steps shortly. Tina clicks “End Session”.
13. A pop-up window appears. Tina confirms she wants to end the session by clicking “End Session”.If the student is not already logged out, this will remove them from the session so that Tina and her coordinator can confer in private.Post-Session Mode launches.
13. A pop-up window appears. Tina confirms she wants to end the session by clicking “End Session”.If the student is not already logged out, this will remove them from the session so that Tina and her coordinator can confer in private.Post-Session Mode launches.
14. The student’s video window disappears, leaving only Tina and her supervisor on camera. Tina and her coordinator discuss how the session went. Tina is happy to get instant feedback on what she did well, and areas where she could improve. Tina and the coordinator discuss next steps, then bid each other goodbye. The session ends when Tina clicks “Exit Assessment”. Tina is proud of how she performed as a tutor.
14. The student’s video window disappears, leaving only Tina and her supervisor on camera. Tina and her coordinator discuss how the session went. Tina is happy to get instant feedback on what she did well, and areas where she could improve. Tina and the coordinator discuss next steps, then bid each other goodbye. The session ends when Tina clicks “Exit Assessment”. Tina is proud of how she performed as a tutor.

We create a medium-fidelity sequential storyboard, which documents our persona’s journey as she uses the improved assessment tool to assess the literacy level of an incoming student. 

Usability Testing of our Redesign

I tested the the medium-fidelity clickable prototype with four participants, all recruited from Literal Change. 

To-Be Experience Map

I created a to-be journey map to envision our persona’s future experience using the portal/tool with our proposed design improvements, based on the findings from two rounds of usability testing of the medium fidelity prototype. 

Lessons Learned

Leverage communication with community partners and stakeholders: I learned the power of team and stakeholder alignment. The most challenging part of this project was learning to overcome my fear of failing to meet Literal Change’s expectations. 

RETURN TO PROJECTS