The Opera 101 Educational Website

Relaunching a website for people to learn about opera


The Problem

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.

My Role

Create site plan for easy navigation.

Create wireframes that could be customized to incorporate current branding colors.


Phase 1: User Flow


Users wanted to either learn about opera as a genre or experiencing opera. This informed the main navigation as well as topic and sub pages, encouraging users to learn first then experience the operas and opera houses in person.


Phase 2: Wireframes and Components


Opera pages were designed with the three main sections: learn, review, and experience. All pages featured an endless scroll with a fixed section navigation in the right rail. 


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