Designing Multi-Modal Drawers for Pearson’s eTextbook Platform

Pearson (EdTech)

Improving navigation and content accessibility with a unified drawer system across web and mobile.

Context

Assignable eText (AeT) is Pearson’s core reading and assessment product, used daily by students. While multiple drawers and task screens existed, they were:

• inconsistent across light, dark, and sepia

• visually overloaded

• misaligned with the design system

• different between web and native

• not accessible or theme-aware

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

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

Continue scaling the drawer framework to additional learning tools and assessment experiences, expand AI driven study support within drawers, and further refine accessibility behaviors through ongoing audits and student feedback, particularly around contrast, focus states, and assistive technology support.

Next Projects

GFS Search

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.