Lesson Space Experience
Overhauling an interactive whiteboard
We revamped MyTutor’s interactive whiteboard, The Lesson Space, with a host of new features and UI updates. Based on extensive research, we ideated, validated and delivered three distinct feature sets.
MyTutor
Product Designer
July 1, 2020
Before COVID, MyTutor had to convince the market that online tutoring was effective. When COVID fundamentally shifted everything online, online edTech company MyTutor faced new challenges. People not only believed in online-first, they expected it. Needless to say, a plethora of direct competitors entered the scene. These new players, built on out-the-shelf and nimble technology could pose a serious threat.
MyTutor's key offering was their interactive whiteboard, called the Lesson Space. It's in the Lesson Space that tutors and students meet face to face for lessons. The Lesson Space, however, hadn’t been updated in years. With the fresh competitors to the market, the Lesson Space started to show its age. Unstable technology, usability issues, lacking features were among the challenges. Needless to say, it was time for a revamp.
The Lesson Space project was a cross-functional endeavour. It divided into three distinct streams, each with their Direct Responsible Individual (DRI). The three streams were
I was the Lesson Space UX DRI which meant I devised and managed the entire design process, end-to-end. My responsibilities included:
In total, the entire project ran over 2 months of development and design time. Additionally, I devised content and business strategies and facilitated workshops for the Content workstream.
“Fall in love with the problem, not the solution" Uri Levine, co-founder of Waze.
Understanding the problem space is always my first priority. I typically approach the problem from three different lenses: Business, User, and Technology.
To learn more about the business and technology, I interviewed internal stakeholders. I wanted to learn more about the key results and how the project fitted into the broader vision of the company. From a tech perspective, we needed identify the the technical constraints related to the project.
In terms of learning more about user the problem space from the user's perspective, we conducted extensive user research. These activities included
More in the in the next section
Before initiating the research, none of the team members had any deep knowledge into how the users (tutors and pupils) were actually using the Lesson Space. Sure, they gave their lessons there, but that’s about all we knew.
So, we needed to clarify a few things upfront: What we need to learn? And how to learn more about it?
For context, MyTutor offers 40+ subjects pairing tutors and students (ranging roughly between 9-19 of age). We thus chose a data-driven approach to help scope our research efforts. Using the Pareto-principle, we chose to focus on the minority of subjects, that accounted for the vast majority of all lessons taught. These were: Maths, English, Biology, Chemistry. For good measure, we chose to research more obscure subjects to get a fuller picture of the lesson space usage.
Having scoped the area of focus, we then had more questions around actual Lesson Space usage. For example, how would an English and a Chemistry lesson compare, if at all? What same tools are relevant in both cases?
We thus created a hierarchy of research goals ranging from pain points, pupil engagement, tool usage etc. to drive our research.
MyTutor stores past sessions in a database so students are able to review them. We were able to access anonymised session recordings to study common lesson space use cases and to identify where the Lesson Space breaks.
In addition to reviewing recordings, we also set up user interviews with our tutors (students are, for legal reasons, next to impossible to talk to firsthand). We’d typically ask the tutors to give us a demo lesson whilst commenting on the usability and pain points as they performed their tasks. We’d also prompt for softer questions such as how the students found the lesson space, how they felt about using it and so forth.
As we went along, we captured quotes and observations, creating a bulk list of data we could analyse.
Once we gathered our data, we were ready to start making sense of it all. We set up two sessions to clarify the data. Firstly, we did an affinity mapping exercise, grouping and subsequently naming specific patterns.
As we progressed through the interviews and reviewed recordings, clear problem patterns started to emerge. The Lesson Space had way more issues than any reader would care to read about here. However, some of the larger issues were
Lessons lose momentum because the tutor and student don't know if they're looking (and talking) at the same thing on the canvas
“Often the student sees a different part of the lesson space to me”
“I really don't like the synchronised pan feature. Often I'll be right in the middle of writing/drawing something, my student will adjust the zoom/move the page and completely mess up what I am drawing or writing”
“It seems that a lot of times students cannot see the same thing as the tutors. When trying to teach and draw diagrams live for students, it is hard not knowing whether or not they can even see it.”
We found there were plenty of issues with text boxes. For example, they would randomly disappear, they would destroy formatting, clip content amongst other things.
“Bullet points often do not work altogether or mess up the formatting.”
“The text boxes can be very jumpy, change size & colour very easily without you meaning to do it, and can be hard to place.”
“The text boxes are rubbish”
Many tutors rely on pasted content, but pasting is unreliable and tutors may not be aware of it
“Copying and pasting screenshots into the lesson space would break most lessons.”
“Once you copy and paste something from within the lesson space, it stops you from pasting external content into the space”
Especially true for the hard sciences like chemistry, biology and maths, we saw that native Lesson Space tooling wasn’t quite up to par. There is no easy way to create text, equations, diagrams, graphs, or triangles on the canvas
“It’s really difficult to draw if I’m being honest. Even though I have all the tools available to me, including a drawing pad.”
With so many problems, which one should we attempt to solve? We set up a problem prioritisation matrix to inform our decision. We chose a simple matrix with two axes: severity of impact and frequency. We landed on solving the issues related to visibility. Though not the most severe issue, it was the most frequent and happened across all subjects.
With a clear problem to go after, we were ready to start ideating different solutions.
We ran two half-day workshops, borrowing heavily from activities and techniques in the Design Sprint toolbox. On the first day, we focused on reviewing the user research (Also, I did some competitor research) and drafting initial solution sketches. For the second day, we elaborated the draft sketches into full-flow solutions. We presented our solutions back and voted. It was our first time doing everything 100% remotely, using Miro.
In a nutshell, we settled on a three-pronged solution:
To prototype the Lesson Space experiences, I knew static frames wouldn't cut it. The Lesson Space is an interactive canvas, relying heavily on dragging elements around. I, therefore, settled on Protopie to simulate an experience closer to the real thing
In total, we ran 5 tests, iterating slightly between them. Running the tests proved insightful: The first 2 concepts, Canvas-frame and Cursor-tracking were well received. Tutors found these additions both helpful and welcome.
Our third concept, the map with view outline, however, didn’t fare that well. Polite tutors said it could (could or would is almost always a no-trust word during research) be a handy tool whilst more candid participants didn’t see a need for it.
After reviewing the test results, we chose to reframe the initial problem thesis: It wasn’t so much that participants got ‘lost’ from each other on the canvas. Instead, they thought they could see the same amount of the canvas when in fact, due to difference in screen resolutions etc. they were not.
A classic scenario: A tutor is writing an equation out on the whiteboard, and see everything he or she wrote. The pupil, however, misses the last parts of the equation and gets lost in the process.
We thus chose to pivot the concept slightly. Instead of building a map of the lesson space, we chose to implement a view frame (our made-up term for the concept). A view frame is an outline of what the other person was able to see in the canvas, at their screen resolution and zoom level. That way, the tutor was always in the know about their student's visibility and can adjust accordingly.
Whilst our developer worked on the view frames and updated canvas controls, we went back to our backlog of issues. Since we had done most of the groundwork upfront, it was fairly straightforward to pick text boxes as the next issue to solve.
The text boxes were ‘rubbish’ to use a verbatim quote from user research. To attack the issue, we did a breakdown of the problems we’ve identified ourselves and from the research. That gave us a clear indication of what needed work. However, we still needed not just to fix the issues, we wanted to delight our users as well (that is, go above and beyond their expectations).
As always, we set out to explore the industry best practices. We researched direct competitors as well as other online collaboration tools such as Miro and Mural. The result of this work was a bulk list of features we could implement. To prioritise which features to go after, we mapped the features against a UX hierarchy of needs, ranging the features from
From this list, we picked the essential features we wanted to test and left some of the higher order features for future iterations
We ran five tests with tutors where we mostly tested for usability. We based most of the text box interactions of established brands like Miro so the tests ran rather smoothly.
Due to changes in strategy, the third Sprint was our final on the Lesson Space for a while. We were faced with the hard choice of prioritising what to build next. We had a whole backlog of exciting ideas to pick from.
In the end, we chose to focus on streamlining the user experience by updating the UI for the entire app. Again, the app showed its age. With the new features we just added, the UI was clearly misaligned.
Additionally, we chose to enable the tutors to effectively teach from other app and services through a screen sharing feature. Especially true for older, science students, tutors would often guide them through distinct apps (eg. writing formulas in Excel, etc). We a screen sharing feature, we hypothesised, we could Lesson Space’ core capabilities.
The Sprint went fairly smoothly. By this time in the project, the team from PMs to devs has built enough tacit knowledge to work efficiently. As a designer, I had built up a core library of components already which dramatically decreased the time updating the UI.
For the screen-sharing feature, the most tricky thing was to sort out the feature from a legal/policy perspective. Other than that, we relied on established patterns from services like Google Meet. We tested the feature internally before sending it off to dev.
And with that, we concluded the design phases of the Lesson Space.
Given the core position the Lesson Space plays for MyTutor, we needed to test every single change carefully before putting it onto production. We tested the platform extensively through internal sessions, working through different scenarios and noting bugs.
To test the updates on a larger scale, we worked with alpha versions of the Lesson Space which we tested against a group of dedicated tutors (our Alpha tester). To achieve that, we set up a closed group on Facebook where we announced feature releases in advance. We would then have the tutors report back on how they found the Alpha lesson space during actual lessons.
Whilst I didn’t stay around at the company to witness the impacts of our work on the bottom line, this project was a great (and fun) learning experience. It was my first project where I’d lead the design efforts 100% remotely. This meant I learned a lot about conducting remote workshops and how to keep people focused when not physically present.
This project also taught me a great deal about breaking vast amounts of data (from interviews to surveys results, to observational studies) into an actionable problem statement that we could intelligible prioritise. Finally, I learned a great deal about building larger-scale prototypes with multiple gestures and text input capabilities.
