THE CHALLENGE

Designing an experience that mimics the physical reading experience within the classroom.

McGraw-Hill needed a digital reading experience for grades 6–12 that honored the pedagogical logic of the physical classroom, but the student UI didn't exist yet when external content vendors were contracted to start building. I had to design the shape of the product before many of its contents were defined.

• The student interface didn't exist when external content vendors began building activity templates, so authoring and student design had to proceed in parallel, each informing the other.

• Tools like annotation, graphic organizers, and long-form writing were still being scoped by separate teams, requiring me to design placeholder structures with enough flexibility to absorb whatever emerged.

• The research team lacked bandwidth to moderate usability sessions, so our PM, a fellow designer, and I had to step in, without a dedicated researcher to lead.

• Accessibility couldn't be a final-sprint checkbox: WCAG AA compliance had to be embedded into every interaction model, including a floating annotation palette that needed to be fully keyboard-navigable.

DISCOVERY & FRAMING

Teacher research had already been completed.

I took over this project after teacher research had already been completed by another designer. In a project full of open questions, that research gave me the structural anchor I needed before a single screen was designed.

"A student who has to close a book to answer a question on a worksheet, or who loses their place in the text every time they switch tabs, is a student whose cognitive load is working against them."

Teachers described the side-by-side experience of a physical book and worksheet not as a design preference, but as a pedagogical need. That became the structural principle for everything that followed: passage left, activity right, with the ability to move between them without friction.

What's already out there?

McGraw-Hill already had several reading products in its portfolio. I audited existing experiences and reviewed prior student research sessions to identify patterns worth carrying forward. Some products mimicked a textbook layout; others leaned toward an e-reader model.

I also took a look at existing literacy products that had muLti-layered tools for readers. Because this wasn't a textbook-based product, the e-reader direction felt right, and it aligned with the goal of reducing cognitive load for the student by keeping the interface familiar and the content foregrounded.

THE APPROACH

Designing while user content was also being developed.

One of the defining constraints of this phase was that almost everything was still in flux: the toolbar between panels was a placeholder, the pencil icon gestured at annotation functionality still being scoped, the graphic organizer and long writing experience were in active development by separate teams, and the Notes feature hadn't been decided. Rather than wait for every answer, I designed for the shape of the problem.

Mapping out the user flows provided an asset that could be shared with engineering and other stakeholders to refine user stories, find edge cases and align as a team as a whole before tackling the actual visual wireframes. This was a repeated process whenever a new feature was integrated into the base split screen student experience.

Ideal User Flows

User flows were the first step to help conceptualize the product experience holistically. It took the requirements documentation from a page of words to an output that gave a clearer idea of the user journey and could be used to facilitate technical conversations with engineering to identify technical feasibility or edge-cases or issues that would have otherwise come out later. This step also was incredibly helpful in reducing scope creep.

Lo-Fidelity Prototyping

The first low-fi explorations were about establishing structural logic, how the two panels would relate, how a student would move between reading and responding, with enough flexibility for the details to fill in as other work-streams matured. It was an exercise in designing with confidence under ambiguity, which in a project this size is less an exception than a constant.

I keep rapid iteration quite loose, using the split screen as the base and exploring the different possbilities for control positioning and anticipating where future features could live as well. The following features had to be considered:

• Annotations

  • Highlighting

  • Comments/Notes

• Graphic organizers

• Passage gating and scaffolding

• Audio controls

• Multi-passage controls and shortcuts

• Jump-to skip links

During the lo-fidelity process, I included engineering and other stakeholders once I had a more-defined ideas and used Loom to help facilitate asynchronous design reviews and feedback rounds. View part of one of the walk-throughs below:

Mid-Fidelity/High-Fidelity Wireframes

Moving into mid-fidelity, controls shifted to the center gutter, a narrow strip between the two panels that belonged to neither side. This felt closer to right. The gutter became a neutral zone: present when you needed it, invisible when you didn't. Back and Next buttons were already part of the activity page templates, this couldn't be changed due to technical constraints, and it was consistent with already existing pattern. The difference in the updated version, is that the back/next buttons were moved into a sticky footer instead of having to scroll all the way down the activity page to find them.

But two things remained unresolved: the icons for expanding and collapsing the panel weren't landing with users, and the scope of what else would live in that gutter: annotation tools, graphic organizers, audio controls and other features still in development, was still an open question.

Refined design for user research sessions

After several rounds of lo-fidelity and mid-fidelity designs and reviews with stakeholders, the experience was refined and a prototype was created to test with students.

USER RESEARCH

Not enough UX Researchers. So we adapted.

As a team, we wanted to validate our direction with research, specifically with students since we already had the teacher validation. Although we had budget, the research team didn't have bandwidth to moderate. So we divided the work: the research team handled recruitment, and our PM, a fellow designer, and I split six moderated sessions between us over Zoom.

The sessions were conducted with 6th and 8th graders, to see where perspective and comprehension diverged. Getting to talk directly with students let me bring two parts of my background together: my teaching experience, which shaped how I communicated and listened to kids; and my UX research training, which kept the sessions structured and the insights actionable.

Central research question: Does the split-screen activity, its layout, navigation logic, panel states, and progression model, make sense to students on its own terms, without instruction?

The session scenario grounded students in a realistic classroom context: your teacher just assigned this activity on your Chromebook. That framing shifted students from "testing a prototype" to "doing an assignment," which surfaced behaviors that a more abstract session wouldn't have revealed.

Design Updates Based on Research

• Ensured that when students navigate backward, they are anchored for the corresponding passage associated with the previous pages for easy reference

• Revisited "Hide Panel" control to clarify iconography

• Added tooltip labels for the control buttons for better identification

  
  

  {insert image}

FEATURE COMPLEXITY

A Multi-Feature, Multi-Layered Product

The core of the design was the side-by-side reading experience, but has mentioned before, there were several additional complex layers that made the experience dynamic for students. Below is one example, the annotation tool, which was one of the more complex features.

Annotation Tool

The annotation tool was the most complex component of the project, substantial enough that it could be its own case study. At a high level: it's a floating palette that students can reposition anywhere on screen. When activated, it reveals annotation style options: highlight, underline, box, circle, and comment. Critically, the tool works across both panels. Students can annotate within the passage and within the activity panel, depending on what the instructional context calls for. An author might direct students to "circle all the nouns in the passage" as part of an activity; the tool needs to support that seamlessly wherever the student is working.

Authors control which annotation styles are available to students for any given activity, keeping the tool focused on the instructional goal rather than offering open-ended freedom in every context. The research finding around text selection expectations was directly addressed here, the final interaction model allowed students to select text first and then apply an annotation style, aligning with the mental model they already brought to the experience.

OUTCOME AND IMPACT

Designing one system for two different reading experiences

The 6–12 split-screen experience was one half of a larger parallel effort. Alongside it, I was leading UX for a K–5 product with a fundamentally different structure, a passage reader widget embedded directly inside an activity page, with no side panel. Because shared features like annotations, audio controls, and formatting notices had to work across both products, every design decision for 6–12 had to hold up against the K–5 model too. This meant working across two TPMs and two engineering teams simultaneously, with user flows and structured design reviews serving as the connective tissue that kept both tracks aligned.

By handoff, accessibility had been embedded throughout rather than reviewed at the end, keyboard navigation, focus management between panels, and WCAG AA compliance for every interactive state were part of the design specification, not retrofits. The full process ran as a phased cycle that repeated whenever a new feature was integrated: current state analysis, competitive audit, user flows, lo-fi, mid-fi, high-fidelity, and research where appropriate. Annotations followed their own condensed version of the same arc. The result was a validated interaction model, a shared component foundation serving both grade bands, and a handoff that engineering could implement without ambiguity.