Opera Lafayette — Reviving Historical Opera for a New Generation
Opera Lafayette — Reviving Historical Opera for a New Generation
Opera Lafayette — Reviving Historical Opera for a New Generation
Service
UI/UX Design
UI/UX Design
Client
Opera Lafayette
Opera Lafayette
What I Do
Re-Design Websie
Re-Design Websie
Live Website
www.operalafayette.org
www.operalafayette.org
01 Branding
02 Website Design
03 Figma
04 Opera Lafayette
05 Design System
01 Branding
02 Website Design
03 Figma
04 Opera Lafayette
05 Design System
01 Branding
02 Website Design
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 performances easier to explore. The old website had scattered information, outdated design elements, and a confusing ticket-buying flow.
Opera Lafayette wanted to modernize their website to improve ticket sales and make their rich performances easier to explore. The old website had scattered information, outdated design elements, and a confusing ticket-buying flow.
I redesigned the end-to-end experience with a focus on clarity, easier navigation, and a modern theater-brand visual system and the goal was to redesign the experience to be more modern, visual, and conversion-focused, 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 theater-brand visual system and the goal was to redesign the experience to be more modern, visual, and conversion-focused, while staying true to Opera Lafayette’s classical identity.
Problem
Opera Lafayette’s website had not clear navigation, outdated visual identity, and a long ticket-purchase flow. Users struggled to find shows quickly, leading to drop-offs and low engagement.
Opera Lafayette’s website had not clear navigation, outdated visual identity, and a long ticket-purchase flow. Users struggled to find shows quickly, leading to drop-offs and low engagement.
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.
Impact
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 as designer
My role
UX/UI Design, Branding, UX Strategy
Timeline
3 week
Tools
Figma, Notion
Challenge
Challenge
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.
Understand upcoming performances at a glance
Navigate the site across multiple scattered pages
Find ticket details quickly
Trust the website enough to make a purchase
Browse comfortably on mobile
Understand upcoming performances at a glance
Navigate the site across multiple pages
Find ticket details quickly
Trust the website enough to make a purchase
Browse comfortably on mobile
Outcome of research
Outcome of research
Outcome of research
60% of users visited only the performance pages → strong need for easier show discovery
60% of users visited only the performance pages → strong need for easier show discovery
60% of users visited only the performance pages → strong need for easier show discovery
60% of users visited only the performance pages → strong need for easier show discovery
60% of users visited only the performance pages → strong need for easier show discovery
60% of users visited only the performance pages → strong need for easier show discovery
Old site issues: navigation 40% / ticket clarity 30% / content clutter 30%
Old site issues: navigation 40% / ticket clarity 30% / content clutter 30%
Process
Process
Process
Research & Strategy
1 WEEK
Research
User Persona
Empathy map
Information Architecture
Design & Branding
2 WEEK
Design System
Wireframing
UI Design
Visual Design
Delivery Execution
3 WEEK
Development
Testing
Finalization
Prototype
Key Research Insights
Key Research Insights
Key Research Insights
Users couldn’t find season performances easily
Users couldn’t find season performances easily
Redesign the homepage with a hero that highlight current season + show cards.
Redesign the homepage with a hero that highlight current season + show cards.
Event storytelling was weak
Event storytelling was weak
Built a rich event page structure: Cast section, Trailer/video embed, Quotes & reviews, Historical background
Built a rich event page structure: Cast section, Trailer/video embed, Quotes & reviews, Historical background
Ticket CTAs were hidden
Ticket CTAs were hidden
Added a sticky “Buy Tickets” button on all show pages.
Added a sticky “Buy Tickets” button on all show pages.
Navigation was too deep and time-consuming
Navigation was too deep and time-consuming
Users got the between events, schedule, and details.
Users got the between events, schedule, and details.
Website Flow
Website Flow
Website Flow
Analysis
Analysis
Analysis
I analyzed leading performing-arts websites like The Met Opera, Royal Opera House, and Broadway.com to understand how they structure show discovery, ticket booking, and event promotion.
I analyzed leading performing-arts websites like The Met Opera, Royal Opera House, and Broadway.com to understand how they structure show discovery, ticket booking, and event promotion.
I used these patterns as benchmarks to modernize Opera Lafayette’s website and redesign their show discovery experience.
I used these patterns as benchmarks to modernize Opera Lafayette’s website and redesign their show discovery experience.
UX Strategy
UX Strategy
UX Strategy
Simplify Navigation
I combined multiple result with “Performances / Events / Tickets / Schedule” pages into one streamlined structure.
2. Visual Storytelling
Large hero images and rich photography to create emotional engagement.
3. Increase Conversion
Clear ticket options, clean layouts, and mobile-first design to ensure fast decision-making.
Style Guide
Style Guide
Style Guide
A clean and intuitive design focusing on user engagement and personalization. LifeCrafting’s UI combines soft, calming color palettes with modern typography to create a welcoming atmosphere.
A clean and intuitive design focusing on user engagement and personalization. LifeCrafting’s UI combines soft, calming color palettes with modern typography to create a welcoming atmosphere.
Visual Output
Visual Output
Visual Output
The visual aesthetics are designed to captivate, inspire, and engage. Whether through dynamic imagery, refined layouts, or elegant typography, every element is thoughtfully crafted to enhance the storytelling experience.
The visual aesthetics are designed to captivate, inspire, and engage. Whether through dynamic imagery, refined layouts, or elegant typography, every element is thoughtfully crafted to enhance the storytelling experience.
Final Design
Final Design
Final Design
To preserve the legacy of Opera Lafayette, we refined — not rebranded — their identity.
The final site balances clarity and sophistication, with immersive visuals, refined typography, and a performance-focused layout that invites users to engage deeply.
To preserve the legacy of Opera Lafayette, we refined — not rebranded — their identity.
The final site balances clarity and sophistication, with immersive visuals, refined typography, and a performance-focused layout that invites users to engage deeply.
Every element — from ticket flow to content blocks — was crafted to ensure smooth navigation and powerful storytelling.
Every element — from ticket flow to content blocks — was crafted to ensure smooth navigation and powerful storytelling.
Results & Impact (After redesign)
Results & Impact (After redesign)
Results & Impact (After redesign)
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.
40%
Increase ticket sales
28%
Reduction in bounce rate
22%
Mobile conversions
32%
Users spent time