Behance Instagram Pinterest Linkedin
Change Color or Text Size
webxd logo

UCI CTSA

HomeCase StudiesUCI CTSA

Inspiring Artistic Growth Through UC Irvine’s Claire Trevor School of the Arts Website Redesign

The result is a more intuitive, maintainable, and scalable website that improves the experience for students, alumni, donors, faculty, staff, and content editors.

  • Drupal 11 one consolidated department platform
  • 45+ custom paragraph types for content editors
  • Real-time desktop and mobile page building
  • Centralized news and advanced event filtering
Discuss a Project
UCI CTSA hero
INDUSTRY
Higher Education
TIMELINE
6 months, June 2025 - November 2025
ENGAGEMENT
Fixed-price website redesign and Drupal platform consolidation

Highlights

  • UC Irvine’s Claire Trevor School of the Arts needed to modernize its digital presence while consolidating separate Drupal department sites into one unified, scalable Drupal 11 platform.
  • WebXd delivered a vibrant, mobile-first website supported by a flexible design system, intuitive navigation, reusable page components, improved editing tools, and department-specific content architecture.
  • The result is a more intuitive, maintainable, and scalable website that improves the experience for students, alumni, donors, faculty, staff, and content editors.
  • UCI CTSA gallery image 1
  • UCI CTSA gallery image 4
  • UCI CTSA gallery image 7
  • UCI CTSA gallery image 10
  • UCI CTSA gallery image 13
  • UCI CTSA gallery image 16
  • UCI CTSA gallery image 19
  • UCI CTSA gallery image 22
  • UCI CTSA gallery image 25
  • UCI CTSA gallery image 2
  • UCI CTSA gallery image 5
  • UCI CTSA gallery image 8
  • UCI CTSA gallery image 11
  • UCI CTSA gallery image 14
  • UCI CTSA gallery image 17
  • UCI CTSA gallery image 20
  • UCI CTSA gallery image 23
  • UCI CTSA gallery image 3
  • UCI CTSA gallery image 6
  • UCI CTSA gallery image 9
  • UCI CTSA gallery image 12
  • UCI CTSA gallery image 15
  • UCI CTSA gallery image 18
  • UCI CTSA gallery image 21
  • UCI CTSA gallery image 24

About UCI CTSA

The Claire Trevor School of the Arts is an academic unit at the University of California, Irvine, dedicated to education, research, and creative practice in the performing and visual arts. The school brings together four departments, art, dance, drama, and music, within one interdisciplinary academic community.

Services Performed

  • UX/UI design
  • Drupal 11 development
  • Platform consolidation
UCI CTSA about media image 1
UCI CTSA about media image 2
UCI CTSA about media image 3
UCI CTSA client work 1

The Challenge

The Claire Trevor School of the Arts needed a website that reflected the energy and impact of its programs while making the platform easier to manage across multiple departments.

  • Disconnected department sites: Art, dance, drama, and music previously operated within separate Drupal site structures. This created duplicated work, inconsistent experiences, and long-term maintenance challenges.
  • Outdated design and user experience: The previous website did not fully reflect the school’s creative energy, academic excellence, or the breadth of its programs.
  • Complex content management: Editors needed a more visual and flexible way to create pages without relying on developers for every layout update or component change.
  • Buried news, events, and program content: Important information was spread across a fragmented content structure, making programs, events, stories, and resources harder to find.
  • Need for accessibility: As a public university, CTSA needed a website built with accessibility in mind, including more thoughtful color contrast, keyboard navigation, responsive behavior, and content structure.

The Solution

To strengthen CTSA’s digital presence, WebXd combined custom design, intuitive UX, scalable Drupal development, and a more flexible content editing experience.

  • Elevated Visual Design: We created a cohesive design system that brought CTSA’s four departments together under one polished digital experience while still allowing each department to maintain its own identity. The refreshed design uses bold visuals, refined layouts, and flexible content components to better reflect the creativity, energy, and academic excellence of the school.
  • Unified Drupal 11 Platform: We migrated CTSA’s department sites into a single Drupal 11 platform, creating one maintainable codebase while still allowing department-level customization for art, dance, drama, and music.
  • Scalable Component Design System: We developed 45+ custom paragraph types using Drupal Paragraphs and Single Directory Components, giving editors the ability to build responsive, visually rich pages without needing a developer.
  • Improved Editor Experience: Mercury Editor was implemented to give content editors a real-time visual editing experience, allowing them to see what they are building on desktop and mobile as they work.
  • Advanced Events and News Architecture: We created an event filtering system that allows users to search and browse events by keyword, department, price, and display format, including grid, list, and calendar views. We also consolidated multiple news content types into one unified news structure with department and category-based filtering.
  • Custom Mega Menu: We built a flexible mega menu using Drupal’s Block system and Layout Builder, allowing editors to manage menu sections as reusable layout blocks without code changes.
  • Accessibility-Conscious Design & Development: Accessibility was incorporated into the redesign through WCAG-informed design and development practices, including attention to color contrast, keyboard navigation, responsive layouts, and screen-reader-friendly content structure.
UCI CTSA client work 2

The Results

  • Elevated Visual Experience: The redesigned website presents CTSA with a more polished, cohesive, and visually engaging digital presence that better reflects the creativity, energy, and academic excellence of the school.
  • More Maintainable Website Architecture: CTSA’s separate department sites were consolidated into one Drupal 11 platform, reducing code duplication and creating a stronger foundation for long-term site management.
  • Greater Editor Flexibility: With 45+ custom paragraph types and real-time visual editing, non-technical editors can create complex, responsive page layouts with less reliance on developers.
  • Improved Content Discovery: Centralized news, advanced event filtering, department-based content organization, and a custom mega menu make it easier for users to find programs, events, stories, and resources.

Drupal 11

one consolidated department platform

45+

custom paragraph types for content editors

Visual editing

real-time desktop and mobile page building

Discovery

centralized news and advanced event filtering

What This Means for Your Institution

If your organization runs several disconnected sites, you already know the cost: duplicated work, inconsistent branding, and a platform only a developer can touch. Consolidating onto one modern, component-based Drupal platform fixes all three. Your team gets one system to maintain, editors get the freedom to publish without bottlenecks, and your visitors get a faster, more accessible, easier-to-navigate experience. That is a better website today and a stronger foundation for whatever comes next.

Discuss your Project

FAQs

Separate sites mean duplicated work, inconsistent branding, and higher maintenance costs. Consolidating onto one platform like Drupal 11 gives you a single codebase to manage while still allowing each department to keep its own look and content. It is easier to maintain and cheaper to scale over time.

Drupal 11 is the latest version of Drupal, an enterprise content management system trusted by universities, governments, and large organizations. It handles complex content structures, supports strong accessibility, and lets non-technical editors build pages with reusable components. That makes it a strong fit for institutions with many departments and editors.

Yes. We built more than 45 custom page components and set up real-time visual editing with Mercury Editor, so editors can build and update responsive pages on their own. The goal is to reduce reliance on developers for everyday content work.

We build accessibility in from the start using WCAG-informed practices: sufficient color contrast, full keyboard navigation, responsive layouts, and content structured for screen readers. For public institutions, accessibility is both a legal responsibility and the right thing to do for every visitor.

These Cases Might Also Interest You