Engaging STEM Audiences: Penn State CSATS Website Redesign

Information Architecture Strategy, UX/UI Design, Accessibility Compliance, UI Style Guide Development

Overview

The Penn State Center for Science and the Schools (CSATS) needed a homepage design that clearly segmented its audiences, showcased measurable impact, and aligned with the Penn State brand system. My role focused on translating approved wireframes into a visually engaging, accessible, and responsive UI—while integrating subtle interactivity to enhance exploration.

Design Goals

  • Clarify audience pathways for K–12 Educators, Penn State Researchers, and Business & Industry partners.

  • Showcase measurable impact through interactive maps and animated data blocks.

  • Align with Penn State’s visual system while adding fresh, modern UI patterns.

  • Maintain accessibility and responsiveness across all devices.

Key UX/UI Strategies

  • Navigation & Header: Two-level navigation with stacked text labels for legibility, sticky on scroll to keep the Donate CTA visible.

  • Hero Section: Mission-focused headline and carousel imagery with a subtle PSU brand texture for visual depth.

  • Audience Segmentation Cards: Interactive accordion panels for progressive content disclosure, reducing visual clutter.

  • Impact Section: Embedded Kumu map showing partnerships and registrations, paired with animated count-up stats to highlight reach.

  • Press & News: Card-based layout for recent articles and program updates, balancing data with storytelling.

  • Footer: Matches PSU’s global style for consistency, with secondary navigation, compliance links, and contact info.

Interaction & Motion Design

  • Subtle scroll-triggered animations for data blocks and content reveal.

  • Responsive scaling and stacking to maintain hierarchy and usability at all screen sizes.

  • Motion effects respect user preferences for reduced motion, ensuring accessibility.

Relevance in My Portfolio

This project demonstrates my ability to design within a large institutional brand system while introducing interactive, audience-focused elements. It highlights my skill in data visualization, progressive disclosure patterns, and responsive design—all while ensuring WCAG-compliant accessibility.