Nathan Henry Logo

Menu

Modernizing a Student Portal
2023completed

Modernizing a Student Portal

This initiative transformed Penn Foster’s fragmented digital ecosystem into a unified learner experience. As Head of Design Systems, I guided the development of a modern student portal and a scalable design system, while aligning cross-functional teams toward a common vision. The project consolidated five separate brand experiences, simplified key workflows, and put in place a sustainable design system and workflow the team could run with a small staff.

Nov 2022 – Dec 2023
18 (cross-functional build team)

Introduction

When I joined Penn Foster in 2021, the company faced declining enrollment despite strong marketing and increased demand for online education. Legacy systems, fragmented brand experiences, and a drawn-out infrastructure overhaul strained resources. Leadership turnover further amplified uncertainty, creating an urgent need for clarity and modernization.

The Challenge

Penn Foster was navigating intense operational and product complexity. On the surface, the brand had momentum: a surge in online learning demand, increased venture interest, and a strong reputation in the education sector. But beneath the surface, the learner experience told a different story.

Five distinct brand platforms, each acquired at different times, had evolved in isolation. Each carried its own design language, navigation patterns, and workflows. For students, this meant inconsistent terminology, disjointed user flows, and a frustrating need to jump between systems to complete basic tasks.

Compounding the user experience issues were deeper organizational and technical challenges. Leadership turnover (four CEOs in three years) created change fatigue and an unclear strategic vision. A long-running, over-budget infrastructure overhaul consumed engineering resources, delaying innovation and eroding morale. Payment and enrollment workflows had grown into a labyrinth of exceptions and legacy business logic, introducing friction right where students needed clarity most.

Meanwhile, design resources were scattered across low-impact projects, with little influence on the core learner experience. The absence of a unified product design process meant that every initiative risked adding to the inconsistency rather than reducing it. Modernizing the student experience would require not just new interfaces, but a complete realignment of priorities, processes, and platforms.

Key Objectives

Unify the Learner Experience

Consolidate fragmented platforms into a coherent, modern learner hub that reduces friction and increases clarity.

Ground Decisions in Evidence

Adopt data-informed design practices—research, analytics, and testing—to ensure product decisions address real learner needs.

Systematize Design for Scale

Build and apply a scalable design system as the foundation for consistency, faster iteration, and alignment across teams.

Streamline Product Development

Establish efficient, repeatable workflows that empower a lean team to deliver improvements with speed and confidence.

Approach

Phase 1: Understanding the Problem
We began with a deep audit of the five brand platforms, mapping their navigation, terminology, and task flows side by side. Usability sessions and learner interviews surfaced recurring friction: students struggled to find grades, set up accounts, and complete payments. This phase clarified not just what was broken, but why learners were dropping off.

Phase 2: Resource Realignment
Design effort was being diffused across low-impact work. Partnering with leadership, I shifted the team’s focus toward core learner journeys. Within one quarter, strategic design work grew from ~20% to ~80% of total output. Agile processes were adapted to align design sprints with organizational priorities, giving design greater leverage over critical workflows.

Phase 3: Unified Platform Development
With clarity and alignment in place, we built the Learner Center portal, a single entry point for all student interactions. Using a MUI-based design system, we introduced consistent patterns across navigation, tasks, and support flows. Legacy systems were consolidated, and migration milestones were met ahead of schedule. This created a coherent learner hub that replaced fragmentation with focus.

Before: an outdated portal with fragmented navigation and unreliable links, making even basic tasks unnecessarily complex.
Before: an outdated portal with fragmented navigation and unreliable links, making even basic tasks unnecessarily complex.
From scattered platforms to a single learner hub: early wireframes captured the first steps toward a coherent, task-centered experience.
From scattered platforms to a single learner hub: early wireframes captured the first steps toward a coherent, task-centered experience.
Initial design study translating wireframes into a modern interface, experimenting with color, hierarchy, and component structure.
Initial design study translating wireframes into a modern interface, experimenting with color, hierarchy, and component structure.
Detailed wireframes established the content hierarchy and interaction patterns that would guide the learner hub’s design system.
Detailed wireframes established the content hierarchy and interaction patterns that would guide the learner hub’s design system.

Process

  1. 1.

    Discovery & Definition

    Audited legacy platforms, mapped workflows, and surfaced learner pain points through research and usability testing.

  2. 2.

    Design & Alignment

    Developed wireframes, prototypes, and an initial design system to unify navigation, tasks, and visual language across teams.

  3. 3.

    Build & Validate

    Launched the unified Learner Hub, migrated users from legacy systems, and measured adoption and task completion to guide iteration.

Solution

Our solution addressed both the surface-level learner experience and the structural challenges beneath it. At the heart of the transformation was the Learner Center, a unified student portal that replaced five separate platforms with a single, cohesive environment.

Building on Phase 1 audit and research, the Learner Center directly resolved navigation and task flow issues by streamlining enrollment, simplifying information architecture, and consolidating critical learner interactions.

Phase 2’s realignment of resources paid off in execution: by focusing design and engineering on high-impact workflows, we tackled the thorniest problems first. A dedicated research initiative into payment and enrollment clarified requirements, reduced misunderstandings, and improved trust between Design and Engineering.

In Phase 3, the MUI-based design system became the engine for scale. It provided a shared component library, consistent interaction patterns, and a maintainable foundation for future features. This accelerated development, reduced maintenance overhead, and ensured cohesion across all learner touchpoints.

The end result was a sustainable platform model. The Learner Center positioned Penn Foster to move faster, respond to user needs more effectively, and evolve without accruing new design debt.

An early built prototype of the Learner Hub dashboard, showing how componentization began to shape the experience.
An early built prototype of the Learner Hub dashboard, showing how componentization began to shape the experience.
Exploration of dashboard layout and visual themes, refining how learners would see critical tasks surfaced at a glance.
Exploration of dashboard layout and visual themes, refining how learners would see critical tasks surfaced at a glance.
Deconstructing the dashboard into modular components—each designed for reuse across the Learner Center.
Deconstructing the dashboard into modular components—each designed for reuse across the Learner Center.
Annotated component specifications aligned design and engineering, reducing ambiguity and speeding up delivery.
Annotated component specifications aligned design and engineering, reducing ambiguity and speeding up delivery.
Redesigned payment flow reduced complexity and exceptions, delivering one of the most critical business wins of the project.
Redesigned payment flow reduced complexity and exceptions, delivering one of the most critical business wins of the project.
Future-facing concept tying the skills-based content model to a dashboard experience, paving the way for adaptive, AI-supported learning.
Future-facing concept tying the skills-based content model to a dashboard experience, paving the way for adaptive, AI-supported learning.

Results

The Learner Center launch marked a turning point for Penn Foster. By reallocating resources toward core learner journeys, the team accelerated delivery of meaningful improvements while building trust across disciplines. The unified portal and design system not only improved consistency and reduced development time, but also positioned the organization to sustain digital transformation through a clear multi-year roadmap.

  • +60% shift in design focus: strategic resource allocation grew from ~20% to ~80%
  • Projected +20% student progression following the Learner Center launch
  • Unified student portal consolidated five platforms into one streamlined experience
  • Design system adoption reduced development time and improved product consistency
  • Comprehensive 2024–26 roadmap established to guide ongoing digital evolution

Reflection

This project reminded me that transformation goes way beyond UI; it’s about creating alignment across people, processes, and platforms. Clear communication and steady stakeholder engagement proved as critical as the design work itself.

For me, the biggest lesson was the value of interdisciplinary collaboration: working closely with engineering, product, and business teams made the design system stick and kept improvements sustainable. If I were to do it again, I’d bring content strategy and success metrics into the design process even earlier, so that outcomes were defined as clearly as the interfaces.

Technologies

Figma
React/MUI
Storybook

Tags

Design Systems
UX Modernization
Ed-tech
Application Design

Team

18 (cross-functional build team)