Designing Multi-Modal Drawers for Pearson’s eTextbook Platform

Pearson (EdTech)

Led the design of a multi-modal drawer system for Pearson’s eText platform, unifying fragmented patterns into a scalable, reusable solution across web and native.

Context

Assignable eText AeT is Pearson’s core reading and assessment product, used daily by students. While multiple drawers and task surfaces existed, they lacked consistency and scalability across the platform.

• Inconsistent across light, dark, and sepia themes

• Visually overloaded and difficult to scan

• Misaligned with the design system

• Inconsistent between web and native implementations

• Not fully accessible or theme-aware

As the Senior Product Designer, I led the effort to standardize these patterns into a unified, multi-modal drawer system that could scale across experiences and platforms.

Problem

Before this work, AeT drawers suffered from:

• Different layouts and interaction patterns

• Components that didn’t adapt correctly in light, dark, or sepia

• Contrast failures in Sepia Mode

• Unclear flows and heavy cognitive load

• Mismatched web vs native behavior

This resulted in a fragmented user experience that didn’t scale for future features or themes.

Global Design Decisions

Built a single drawer framework that supports reading, tasks, and AI across web and native
Optimized for theme scalability first, not one-off screens
Prioritized consistency and cognitive clarity over visual novelty
Designed patterns to be reusable across future Pearson products

Approach

To standardize drawer behavior across AeT, I defined scalable patterns that balanced flexibility, consistency, and cross-platform usability.

1. Standardize patterns across use cases

Defined a consistent structure for drawers that could support multiple content types while reducing fragmentation across the platform

2. Design for flexibility and scale

Created a multi-modal system that could adapt to different contexts, including navigation, tasks, and supporting content without introducing new patterns

3. Ensure cross-platform consistency

Aligned behavior, layout, and interactions across web and native while accounting for platform-specific constraints

What I Worked On

Drawer System Improvements

• AI Drawer

• Summary Drawer

• Practice Drawer

• Explain Drawer

• Study Prep Drawer

• Search Drawer

• Table of Contents Drawer

• Notebook Drawer

For each drawer, I:

• Unified hierarchy and spacing

• Aligned components with design system tokens

• Clarified actions and navigation

• Matched web and native variations

• Ensured drawer content flowed consistently across screen sizes

Screen Refinements

Across all drawers, I improved:

• Question layouts and spacing

• Feedback and correctness states

• Icon usage

• Progress indicators

• Pressed, active, and loading states

• Empty and error states

Visuals

This section highlights the final desktop drawer designs across light, dark, and sepia modes, showing how a single drawer system supports multiple learning contexts including reading, study prep, search, notebooks, and flashcards. Visuals emphasize consistent layout, hierarchy, and interaction patterns across all core drawers.

Table of Contents (Light, Dark, Sepia)

Study Prep (Light, Dark, Sepia)

Flashcards (Light, Dark, Sepia)

States

These examples demonstrate how the drawer system supports key states across learning workflows, including default, loading, empty, error, correct, and incorrect states. Each state was designed to provide clear feedback, reduce cognitive load, and maintain visual consistency across themes and platforms.

Descision

Defined and validated success, error, loading, and empty states across all drawer types.

Why it mattered

Missing or inconsistent states created uncertainty during study and assessment flows.

What it enabled

Clear feedback, reduced confusion, and more confident student interactions.

Study Prep (Light, Dark, Sepia)

Empty progress state & Search empty (Light, Dark, Sepia)

AI Drawer (Native first)

The AI Study Tool drawer was designed as a native first experience, built on the same drawer anatomy and design tokens as web. This allowed AI powered study support to feel integrated rather than bolted on, while ensuring consistency across light, dark, and sepia modes in mobile environments.

Descision

Designed the AI Study Tool as a native first drawer built on the same structural system.

Why it mattered

AI features needed to feel integrated, not bolted on, especially in mobile contexts.

What it enabled

A scalable AI pattern that feels consistent with core AeT experiences across platforms.

AI Study Tool Default(Light, Dark, Sepia)

AI Study Tool Practice (Light, Dark, Sepia)

AI Study Tool Explain (Light, Dark, Sepia)

AI Study Tool Summarize (Light, Dark, Sepia)

Theme + Accessibility Work

This work focused on making drawers fully theme aware and accessible across light, dark, and sepia modes. Improvements included refined color palettes for readability, corrected semantic token usage, consistent contrast for text and surfaces, and validated interaction states to support inclusive learning experiences.

I improved:

• Palette values for readability

• Contrast for text, borders, and surfaces

• Semantically correct tokens for interactive vs non-interactive elements

• State behavior validation across all modes

These updates were applied consistently across:

• Flashcards

• Matching tasks

• Reading views

• Study prep modules

• Drawers and sub-screens

Descision

Made all drawers fully theme aware using semantic tokens across light, dark, and sepia modes.

Why it mattered

Previous components did not adapt correctly, especially in Sepia Mode.

What it enabled

Accessible contrast, readable surfaces, and consistent behavior across all themes.

Matching (Light, Dark, Sepia)

Flashcards (Light, Dark, Sepia)

Table of content (Light, Dark, Sepia)

Results

For Students

• A calmer, more readable Sepia experience

• Clearer task structure within drawers

• Easier navigation with consistent patterns

• Better hierarchy that reduces cognitive load

For AeT

• Unified drawer patterns across the entire product

• Reduced design and development inconsistencies

• Theme-ready components for future features and modes

For the Pearson Design System

• Strengthened semantic themed tokens

• Foundation for future theme variants

• Components reused by other Pearson teams

• Clear documentation for spacing, hierarchy, and interaction behavior

These outcomes were driven by system-level decisions focused on consistency, scalability, and accessibility rather than individual screen optimizations.

Outcomes

The drawer system is now in production and serves as the standard framework for AeT reading and task experiences. These designs established a consistent, theme aware drawer pattern across web and native, and enabled the successful rollout of Sepia Mode while laying the foundation for future theme expansion across Pearson apps and web.

Next steps

• Scale the drawer system across additional learning and assessment experiences

• Explore AI-driven study support within drawer surfaces

• Advance accessibility through continuous audits and student feedback, with a focus on contrast, focus states, and assistive technology

Next Projects

Gordon Food Service Search Redesign, improving speed and ordering efficiency

Gordan Food service (B2B eCommerce)

Improving autocomplete logic, UX behaviors, and design-system components across the Gordon Ordering platform.

Building an On-Demand Platform for Barbers and Shop Owners

Pilo (Marketplace)

A mobile marketplace connecting licensed barbers with shops that need last-minute staffing.