Case Study: Education | Lead Product Designer

ARTCENTER COLLEGE OF DESIGN

Online Learning Interface, Course Catalog, Advertising Campaign

Challenge: How to deliver, fast, a demanding design curriculum and industry-level critique tools to a global student body in an intuitive, streamlined and unified digital platform.

PROBLEM

Fragmented Digital Ecosystem & Urgent Digital Transformation


With the onset of COVID-19, ArtCenter College of Design faced the immediate challenge of migrating its highly tactile, studio-based curriculum to a remote environment. The existing digital landscape was fragmented across multiple legacy platforms, creating significant friction for users.


There was a critical need for a centralized "source of truth" that could:

  • • Bridge communication gaps between students, faculty, and administrators.
  • • Maintain the prestigious brand identity of the college across new digital touchpoints.
  • • Ensure technical parity and seamless navigation between the primary marketing site and the new learning interface.


SOLUTION

A Unified, Component-Based Learning Interface


As the Lead Designer, I spearheaded the design of a single, cohesive online learning ecosystem tailored to diverse user personas (students, faculty, and prospective applicants).

Key deliverables included:

  • Unified Interface: A centralized dashboard that streamlined course management and administrative tasks.
  • • Scalable Visual System: An evolution of the ArtCenter brand into a digital-first Visual Style Guide, ensuring aesthetic continuity.
  • • Modular Component Library: Developed a robust UI kit and interaction toolkit to ensure rapid deployment and technical consistency across all ArtCenter online properties.
  • • Ecosystem Integration: "Dovetailed" the new platform with the existing marketing site to create a frictionless transition for users moving from public-facing content to private learning environments.


MY ROLE

Lead User Experience Designer, Lead Visual Designer, Lead Brand Creative.

Advertising for ArtCenter Online, the digital learning site for the world-renowned design institution in California.


Course Catalog page for self-paced courses.


Course Catalog page for Live Interaction Courses.


Web Architecture for ArtCenter LMS.


ArtCenter College of Design Online unified learning interface – Faculty Dashboard.


ArtCenter College Online unified interface – Administrator Dashboard.

ArtCenter College Online unified interface – Student Dashboard.

Marketing Site Wireframe.

ArtCenter College YouTube Channel showcasing course previews.

ArtCenter College YouTube Channel showcasing course previews.

Instagram promotional post.

Instagram Video Ad.

Google Ad.

ArtCenter Visual Style Guide

Web Color Specifications and their WCAG 2.1 ratings.

Button Construction Specifications.

Typography Specifications for ArtCenter Font.

Magazine Ad on college publication.

Magazine Ad on college publication.

INSIGHTS

Migrating Tactile Studio Culture into a Digital Ecosystem

The defining challenge for the ArtCenter Online project was executing an urgent digital transformation that could successfully translate a highly tactile, studio-based design curriculum into a remote environment. Because the college’s existing digital landscape was fragmented across multiple legacy platforms, it created immense friction for a community built on hands-on creation and rigorous critique. The breakthrough insight was establishing a centralized digital “source of truth.” By designing a unified interface with tailored dashboards for distinct user personas—students, faculty, and administrators—the platform managed to bridge critical communication gaps and streamline complex course management without losing the collaborative energy of a physical studio.


Dovetailing Brand Continuity with Technical Parity

Beyond facilitating remote learning, the project required absolute aesthetic and structural continuity to protect the institution’s world-renowned brand identity. This was achieved by developing a robust, digital-first Visual Style Guide and a modular component library, which standardized everything from exact button construction specifications to typography and WCAG 2.1-rated web color specifications. By “dovetailing” this scalable UI kit across both the public-facing marketing site and the private learning management system (LMS), the design ensured seamless navigation and technical parity. The result successfully married functional flexibility with strict visual alignment, turning an abrupt operational hurdle into a frictionless, premium e-commerce and educational powerhouse.