Overview

A central part of each BookNook session is “Book Time”, where tutors help students take turns reading a short book or passage and ask discussion questions. Tutors often reported this to be a frustrating experience due to our eReader’s outdated designs and lack of critical functionality. When an overhaul of this feature was put onto our roadmap, I spearheaded the tutor experience to envision how we could empower tutors to oversee Book Time more easily.

Synthesizing Research

To kickstart this project, design led a story mapping exercise for the entire product team to foster a shared understanding of our product goals, as we had begun losing sight of the big picture due to rigidly working off the backlog and issues had been accumulating. We asked ourselves: What are tutors doing during Book Time and how can we support that? Important tasks included things like directing their students’ focus to certain passages and discussing content using stopping points.

Flexible Stopping Point Solution

I moved stopping points from their old position on top of content to a consistent, easy-to-see spot in the top nav.

I wanted the associated interaction patterns to allow tutors to lead discussion while not disrupting other tasks. Stopping points now appeared in a draggable dialog box that could be moved away from content.

Simple But Powerful Annotation Tools

Technical constraints uncovered by engineering prevented us from shipping markup/drawing tools, so I pivoted and created a highlight tool so tutors could highlight text and have it reflected on their students’ screens. This feature was well received by tutors during testing, as gave their students a visual of where to focus instead of having to rely on auditory cues.

I included several options for highlight color including black, to ensure that highlighted text would contrast against a variety of book backgrounds and WCAG requirements were met.

Customizable Book Layouts

Allowing users to adjust book layout and enlarge the content was a key part of making my designs accessible and adaptable to different devices and disabilities.

Clear Metadata and Progress Bar To Help Users Navigate Book

I re-vamped the progress bar and added page numbers to surface concrete metadata and support pacing. Tutors could now adjust pages through both arrows and an input field, adding critical functionality by allowing them move arbitrarily through a book as well as linearly.

Adapting the eReader to All Contexts

I needed the eReader to work in our new in-session experience, which required navigating many technical constraints. I moved away from having the screen reload to the eReader mid session and decided to slot the eReader into our session “wrapper”. Having navigation bars stacked on top of each other wasn’t ideal, but I made the conscious decision to keep the eReader navigation separate from the session navigation to reduce engineering lift and keep consistency in the session navigation bar.

Impact

Usability tests conducted with tutors showed positive results and that the addition of these features made tutors more confident during Book Time. This project was also a big learning experience in working with complex technical constraints and finding an ideal solution that pivoted carefully around them.