Scaling Financial Learning Across Platforms

Migrated legacy learning experiences into Schwab while redesigning for responsive web and app—stabilizing performance through transition and establishing reusable components adopted across business units.

Company: Charles Schwab

My Role: Principal Product Designer partnering with Product, Engineering, Research, Content and the Design System team

Scope: Migration + redesign of legacy learning content and interactions from TDA into Schwab, delivered across responsive web, tablet, and native app surfaces

Constraints: Legacy content structures, cross-platform parity, accessibility requirements, performance at scale, content governance dependencies, and phased rollout risk

The Problem

Schwab needed to migrate and modernize learning experiences coming from TDA while meeting Schwab design standards and expanding beyond desktop.

The challenge was not simply “porting content.” The legacy experience was built for desktop conventions and content models that didn’t translate cleanly to responsive web or app.

We had to:

  • preserve continuity during migration (no traffic collapse)

  • redesign the interaction model for cross-platorm usage

  • ensure parity across surfaces while respecting platform constraints

  • create repeatable patterns, not one-off screens

Why This Was Hard

This work sat at the intersection of three moving systems:

  • Migration risk: content, templates, and IA were shifting while we were building

  • Cross-platform parity: we needed consistent mental models across web/tablet/app without forcing identical layouts

  • Systemization pressure: Schwab needed reusable components that could scale beyond the learning product—meaning decisions had downstream design system implications

There wasn’t one “correct” design. We had to align stakeholders on tradeoffs, define standards for consistency, and ship incrementally without breaking the experience.

A simplified model of how legacy learning content was translated into reusable components and delivered across platforms, while accounting for governance, accessibility, and performance constraints.

This framing kept teams focused on building a scalable system instead of redesigning individual screens in isolation. It also created a shared language for design, engineering, and content as migration details shifted.

Approach

1) Translate legacy content into a platform-agnostic structure

We normalized legacy content patterns into a smaller set of content types and modules, making delivery consistent across responsive web and app.

2) Define reusable components and states (the “hard part”)

I defined component behaviors and system states (progress, completion, not started, error/empty states), and documented them with specs usable by engineering and the design system team.

3) Ship iteratively while protecting continuity

We delivered in phases to avoid disruption, validating parity and performance as the experience moved from desktop-first to cross-platform.

Solution

The redesigned Schwab learning experience established a consistent cross-platform interaction model with scalable components, including:

  • standardized learning content cards

  • consistent progress/completion states

  • learning path modules designed for scanning + continuity

  • responsive layouts supporting desktop, tablet, and mobile

  • reusable patterns adopted beyond the learning product

Cross-Platform Execution

Side-by-side comparison of learning path structure across responsive web and mobile, showing how hierarchy, progress, and content modules remain consistent while layouts adapt to platform constraints.

This view demonstrates parity without sameness: the same mental model and content sequencing carry across platforms, while each surface optimizes for its usage context.

My Responsibility

My responsibility was to lead design through ambiguity—defining a cross-platform interaction model, aligning teams on reusable components, and protecting quality during a high-risk migration.

Specifically, I:

  • mapped legacy patterns and identified where they broke on mobile/responsive

  • defined component and interaction standards (including accessibility and states)

  • created specs and documentation to enable engineering buildout

  • partnered with the Design System team to pitch and land reusable components

  • ensured experience parity across responsive web and app while respecting platform needs

Before exploring UI, I aligned teams on a simple model: content types → reusable components → platforms, with constraints made explicit.

Outcomes (Metrics)

This work delivered both measurable product impact and system-level leverage:

  • +5% month-over-month engagement growth

  • +22.1% increase in courses completed (exceeded goal by 2.1%)

  • +3.2% lift in Learning Paths completed

  • Stable course traffic throughout the migration

  • +94% progress against retention goal during transition

  • New registrations for learning content increased across Schwab + TDA client segments

What Changed

  • Modernized legacy content into a cross-platform learning system

  • Delivered parity across responsive web and app while protecting continuity during migration

  • Established reusable components and interaction standards adopted across Schwab business units

  • Created a scalable foundation for learning experiences beyond a single product surface

Operating Model

I treated this as a systems migration, not a redesign. I aligned teams around a shared model, defined component standards and states up front, and partnered with the design system team early to ensure what we shipped could scale.