Opera Lafayette: Redesigning a cultural website to drive ticket sales.
Opera Lafayette: Redesigning a cultural website to drive ticket sales.
Opera Lafayette: Redesigning a cultural website to drive ticket sales.
Service
UI/UX Design
UI/UX Design
Client
Opera Lafayette, USA
What I Do
Re-design Website
Re-design Website
01 Branding
02 Redesign Website
03 Figma
04 Opera Lafayette
05 Design System
01 Branding
02 Redesign Website
03 Figma
04 Opera Lafayette
05 Design System
About this project
About this project
About this project
Opera Lafayette wanted to modernize their website to improve ticket sales and make their rich performance catalog easier to explore. The old site had scattered information, an outdated visual system, and a confusing ticket-buying flow.
Opera Lafayette wanted to modernize their website to improve ticket sales and make their rich performance catalog easier to explore. The old site had scattered information, an outdated visual system, and a confusing ticket-buying flow.
I redesigned the end-to-end experience with a focus on clarity, easier navigation, and a modern, conversion-focused visual system — while staying true to Opera Lafayette's classical identity.
I redesigned the end-to-end experience with a focus on clarity, easier navigation, and a modern, conversion-focused visual system — while staying true to Opera Lafayette's classical identity.
Problem
Opera visitors struggled to quickly find show details, performance schedules, and ticket options. The previous site was content-heavy and text-dense with no clear hierarchy — patrons couldn't tell at a glance what was playing, when, or how to buy tickets.
Opera visitors struggled to quickly find show details, performance schedules, and ticket options. The previous site was content-heavy and text-dense with no clear hierarchy — patrons couldn't tell at a glance what was playing, when, or how to buy tickets.
Solution
I designed a fresh digital experience that reflects Opera Lafayette’s rich cultural legacy — while making it easy for users to browse shows, buy tickets, and learn more about the organization.
I designed a fresh digital experience that reflects Opera Lafayette’s rich cultural legacy — while making it easy for users to browse shows, buy tickets, and learn more about the organization.
Goals
Our design enhancements led to significant improvements in user engagement and accessibility.
Our design enhancements led to significant improvements in user engagement and accessibility.
Team
Client
Me
My role
Solo UX/UI Designer
Timeline
3 week
Tools
Figma, Notion
The Challenge
The Challenge
Audience members struggled to quickly find show details, performance schedules, and seats. The previous site was content-heavy, text-focused, and lacked hierarchy.
Audience members struggled to quickly find show details, performance schedules, and seats. The previous site was content-heavy, text-focused, and lacked hierarchy.
Audience members struggled to quickly find show details, performance schedules, and seats. The previous site was content-heavy, text-focused, and lacked hierarchy.
Understand upcoming performances at a glance
Navigation depth buried upcoming performances behind multiple clicks
Ticket-buying flow lacked trust signals and felt disconnected from the brand
Mobile experience was largely an afterthought of the desktop layout
Design Process
Design Process
Research & Strategy
Rsearch
User Flow
Competitor
Information Architecture
Design & Branding
Branding
Wireframing
Design System
Visual Design
Delivery Execution
Prototype
Testing
Development
Finalization
Understanding opera realities
Understanding opera realities
I started with a full audit of the existing site, mapping the user journey from homepage to checkout. I then benchmarked against The Met Opera, the Royal Opera House, and Broadway.com to identify what high-performing cultural sites do differently.
I started with a full audit of the existing site, mapping the user journey from homepage to checkout. I then benchmarked against The Met Opera, the Royal Opera House, and Broadway.com to identify what high-performing cultural sites do differently.
I started with a full audit of the existing site, mapping the user journey from homepage to checkout. I then benchmarked against The Met Opera, the Royal Opera House, and Broadway.com to identify what high-performing cultural sites do differently.
Five critical insights shaped the entire redesign:
Five critical insights shaped the entire redesign:
Five critical insights shaped the entire redesign:
60% of users visited only the performance pages
Users couldn't find the season calendar without clicking through 4+ pages
Ticket CTAs were buried mid-page
Event pages had no video, no cast info, no press reviews
The mobile experience was effectively unusable, despite 35% of traffic coming from phonesuild emotional desire
Mobile experience was broken — 35% of traffic came from phones
60% of users visited only the performance pages
Users couldn't find the season calendar without clicking through 4+ pages
Ticket CTAs were buried mid-page
Event pages had no video, no cast info, no press reviews
The mobile experience was effectively unusable, despite 35% of traffic coming from phonesuild emotional desire
Mobile experience was broken — 35% of traffic came from phones
60% of users visited only the performance pages
Users couldn't find the season calendar without clicking through 4+ pages
Ticket CTAs were buried mid-page
Event pages had no video, no cast info, no press reviews
The mobile experience was effectively unusable, despite 35% of traffic coming from phonesuild emotional desire
Mobile experience was broken — 35% of traffic came from phones
Research Insights
Research Insights
Homepage: Show discovery front and centre
Homepage: Show discovery front and centre
I moved the current season and upcoming performances into the hero section — the first thing every visitor sees. Show cards display the title, date, venue, and a "Buy Tickets" button in a single glance. No more hunting.
I moved the current season and upcoming performances into the hero section — the first thing every visitor sees. Show cards display the title, date, venue, and a "Buy Tickets" button in a single glance. No more hunting.
Rebuilt performance pages
Rebuilt performance pages
Each performance page was rebuilt with a trailer embed, cast biographies, pull quotes from press reviews, and a historical background section for new audiences. The insight: theater audiences are emotionally driven.
Each performance page was rebuilt with a trailer embed, cast biographies, pull quotes from press reviews, and a historical background section for new audiences. The insight: theater audiences are emotionally driven.
Sticky "Buy Tickets" CTA
Sticky "Buy Tickets" CTA
The ticket call-to-action now follows the user as they scroll through every show page. This single change was the single biggest driver of the conversion improvement.
The ticket call-to-action now follows the user as they scroll through every show page. This single change was the single biggest driver of the conversion improvement.
Simplified navigation
Simplified navigation
I collapsed "Performances / Events / Tickets / Schedule" into one clean navigation structure. Users now reach their destination in 2 clicks instead of 5.
I collapsed "Performances / Events / Tickets / Schedule" into one clean navigation structure. Users now reach their destination in 2 clicks instead of 5.
Mobile-first rebuild
Mobile-first rebuild
All layouts were rebuilt for mobile: large touch targets, vertical card layouts, and a checkout flow that works one-handed.
All layouts were rebuilt for mobile: large touch targets, vertical card layouts, and a checkout flow that works one-handed.
Key Design Decisions
Key Design Decisions
Problem
Problem
Patrons abandoned browsing when performance details were buried more than two clicks deep, and the ticket flow spanned multiple disconnected pages.
Patrons abandoned browsing when performance details were buried more than two clicks deep, and the ticket flow spanned multiple disconnected pages.
Considered
Considered
A dense mega-menu exposing every category up front vs. a simplified top-level structure organized around what patrons actually do — discover, browse, book.
A dense mega-menu exposing every category up front vs. a simplified top-level structure organized around what patrons actually do — discover, browse, book.
Chose
Chose
Simplified navigation with visual storytelling front-loaded on the homepage, and a single streamlined ticket-purchase path with the CTA persistent above the fold.
Simplified navigation with visual storytelling front-loaded on the homepage, and a single streamlined ticket-purchase path with the CTA persistent above the fold.
Why
Why
Research showed the drop-off point was navigation depth and CTA visibility, not lack of content — reducing clicks-to-purchase and keeping "Buy Tickets" always visible directly targeted where patrons were leaving.
Research showed the drop-off point was navigation depth and CTA visibility, not lack of content — reducing clicks-to-purchase and keeping "Buy Tickets" always visible directly targeted where patrons were leaving.
UX Strategy
UX Strategy
Simplify Navigation
Simplify Navigation
I combined multiple result with “Performances / Events / Tickets / Schedule” pages into one streamlined structure.
I combined multiple result with “Performances / Events / Tickets / Schedule” pages into one streamlined structure.
Visual Storytelling
Visual Storytelling
Lead every page with large performance photography rather than text blocks, to communicate the emotional experience of live opera
Lead every page with large performance photography rather than text blocks, to communicate the emotional experience of live opera
Increase Conversion Confidence
Increase Conversion Confidence
Clear pricing, seat availability, and trust signals (reviews, past sold-out shows) visible before checkout
Clear pricing, seat availability, and trust signals (reviews, past sold-out shows) visible before checkout
Style Guide
Style Guide
A refined visual system built around Opera Lafayette's classical identity — warm neutrals, elegant serif typography for headlines, and generous imagery that lets the performances speak for themselves."
A refined visual system built around Opera Lafayette's classical identity — warm neutrals, elegant serif typography for headlines, and generous imagery that lets the performances speak for themselves."
Final Design
Final Design
The redesign made Opera Lafayette's site feel modern, premium, and easy to navigate. By improving clarity and simplifying the ticket-flow journey, I helped the organization reach new audiences and increase revenue.
The redesign made Opera Lafayette's site feel modern, premium, and easy to navigate. By improving clarity and simplifying the ticket-flow journey, I helped the organization reach new audiences and increase revenue.
Results & Impact
Results & Impact
This wasn’t just a redesign — it was a digital transformation. Opera Lafayette’s online presence now echoes the beauty and nuance of their performances. It bridges generations, inviting both loyal patrons and new audiences into an immersive cultural journey.
This wasn’t just a redesign — it was a digital transformation. Opera Lafayette’s online presence now echoes the beauty and nuance of their performances. It bridges generations, inviting both loyal patrons and new audiences into an immersive cultural journey.
18%
Increase in ticket booking Sales
24%
Faster Improved navigation
30%
Improvement in user engagement