CASE STUDY
Blair School of Music Website Redesign
Designing an accessible, student-centered digital experience for Vanderbilt's premier music school
Context & Overview
The Blair School of Music at Vanderbilt University needed a comprehensive website redesign to better serve prospective students, current students, faculty, and concert attendees. As the lead UX designer and researcher, I collaborated with stakeholders to reimagine the digital experience.
Project Details
- Role: Lead UX Designer & Researcher
- Timeline: 6 months (2024)
- Team: Associate Dean, Communications Strategist, Web Development Team
Focus Areas
- Information Architecture
- User Research
- Interaction Design
- Visual Design
The Challenge
Blair's existing website struggled with:
- Confusing navigation structure making it difficult to find key information
- Poor event discovery experience, especially for live performances
- Lack of mobile optimization
- Inconsistent visual identity across pages
- Low engagement with event pages despite high-quality programming
Pre-Project Contribution: Visual Identity Foundation
Before the website redesign project began, I had already established Blair's color identity framework as part of a broader brand refresh initiative. This foundational work became crucial for ensuring visual consistency across the new website.
The color system I developed emphasized Blair's signature purple while introducing complementary warm tones that reflected the school's welcoming, creative environment. This palette would guide all design decisions in the website redesign.
Research
Understanding User Needs & Business Goals
I conducted comprehensive research to understand both user needs and organizational priorities:
User Research Methods
- Stakeholder interviews with Associate Dean and communications team
- User surveys with current students, prospective students, and concert attendees
- Analytics review of existing site (12-month period, 2024)
- Competitive analysis of peer music school websites
Key Findings
- Navigation confusion: Users struggled to find admissions info
- Event discovery gap: Difficult to find live-streamed performances
- Mobile pain points: 40% of traffic was mobile with degraded experience
- Information hierarchy issues: Critical content buried deep
Data-Driven Insights
Analytics revealed critical patterns in user behavior that shaped our information architecture decisions. The top 5 pages accounted for over 175,000 views in a 12-month period, with the livestreams page ranking as the second most-visited destination after the homepage.
This data confirmed that event content—particularly livestreams—was a major driver of engagement, validating our decision to prioritize the events experience in our redesign strategy.
Design Strategy & Process
Based on research insights, I developed a four-pronged design strategy to address user needs and business goals:
1. Navigation Re-Architecture
I restructured the entire site navigation to create clear, intuitive pathways to critical content. The new information architecture reduced navigation depth and grouped related content logically.
- Flattened navigation hierarchy from 4-5 levels to maximum 3 levels
- Created dedicated "Events" top-level navigation item
- Consolidated admissions information under clear parent categories
- Improved internal linking structure for better content discovery
2. Events Experience Overhaul
Recognizing that live-streamed performances were a major draw (48,731 page views), I designed an interactive venue selection and video streaming interface that dramatically improved event discovery and viewing experience.
Users can browse performance venues through an elegant carousel interface, then click to open a modal overlay with embedded video streaming, venue details, and related event information.
3. Mobile-First, Accessible Design
With 40% mobile traffic, I prioritized responsive design from the start. Every component was designed mobile-first, then progressively enhanced for larger screens.
- WCAG 2.1 AA compliance throughout
- Keyboard navigation support for all interactive elements
- Sufficient color contrast ratios (4.5:1 minimum)
- Screen reader-friendly semantic HTML
- Focus indicators on all interactive elements
4. Visual Identity Integration
I integrated the color identity framework I had previously developed, ensuring consistent visual language across all pages while allowing flexibility for different content types.
- Typography scale based on modular scale (1.25 ratio)
- Component library with buttons, cards, navigation elements
- Consistent spacing system (8px base unit)
- Blair purple (#AF73BB) used strategically for CTAs and emphasis
- Warm neutrals for background and supporting elements
Hypothesis
Testing & Iteration
I conducted multiple rounds of usability testing throughout the design process to validate decisions and identify areas for improvement.
Testing Methods
- Moderated usability testing with 8 participants
- A/B testing of navigation structures
- Accessibility testing with screen readers
- Cross-browser and cross-device testing
Key Iterations
- Navigation labels: "Events" tested better than "Performances"
- Venue carousel: Added hover states and clearer affordances
- Mobile menu: Redesigned hamburger menu structure
- Video modal: Added prominent close button
Validation
Testing confirmed that users could successfully complete key tasks 40% faster with the new design, and navigation confidence scores increased significantly.
Solution
The final design delivers a cohesive, user-centered experience that addresses all identified pain points while showcasing Blair's vibrant musical community.
Results & Impact
The redesigned website launched in late 2024 and immediately showed positive results:
Quantitative Results
- 40%reduction in time to complete key tasks
- 48,731livestream page views validated event-focused strategy
- 40%of users benefited from mobile optimization
- WCAG 2.1AA accessibility compliance achieved
Qualitative Impact
- Stakeholders praised the clean, professional aesthetic
- Users reported increased confidence in finding information
- Event discovery improved with new streaming interface
- Faculty appreciated easier content management
Reflection
This project reinforced the importance of data-driven decision making combined with qualitative user research. The analytics showing livestream page views as the second-most visited destination validated our focus on the events experience, but it was the usability testing that revealed exactly how to design that interface effectively.
Key Learnings
- 1.Start with data, validate with users: Analytics pointed to opportunities, but user research revealed the "why" behind the numbers
- 2.Design systems save time: Having the color identity framework established beforehand streamlined visual design decisions
- 3.Accessibility is not optional: Building accessibility in from the start was easier and more effective than retrofitting
- 4.Iteration is essential: The venue carousel went through 4 major iterations before we got the interaction right
What I Would Do Differently
If I could start over, I would have conducted more extensive card sorting sessions earlier in the process to validate the information architecture before moving to high-fidelity design. While our final structure tested well, earlier validation could have saved iteration time.