The Opera 101 Website

The Opera 101 is a place where people go to learn about opera. The client had all the content live, but it was confusing for users to navigate. The first step was to restructure the site into two primary categories: learn and experience. Topic pages and sub pages are also organized into these two categories so that viewers are encouraged to learn first then go and see the operas and opera houses in person. Interactive elements are incorporated into different topics to encourage playful learning. 

Homepage wireframe 

Learn category homepage wireframe

Learn category homepage wireframe

Opera pages were designed with three sections: learn, review, and experience to encourage users to experience opera in a comprehensive way. All pages featured an endless scroll with a fixed section navigation in the right rail. 

Opera page wireframe.

Opera page wireframe.

One of the most visited parts of the website was its interactive keyboard for each of the Voices page. We used that as the basis for establishing other interactive features in the site.

client: The Opera 101  |  developer: Robert Walport  |  role: UI/UX Designer  |  2012