opera-wireframes-02-main.jpg

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

opera-hierarchy.png
 

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. 

 
 
opera-wireframes-04.png
 
 

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.

 
 
opera-wireframes-05.png
opera-wireframes-06.png
opera-wireframes-07.png

client: The Opera 101  |  developer: Robert Walport