While visiting Toronto recently, I found myself walking by the Four Seasons Centre, home of the Canadian Opera Company. Dressed in a nondescript pair of jeans and polo shirt, I found myself suddenly face to face with a group of lavishly costumed greeters at what must have been some high-end event. I was impressed and overwhelmed by the attention to detail in crafting an over-the-top experience for their guests. 

As soon as I got in front of a computer at my hotel room I checked out their website and - I’ll be honest - I was disappointed. The experience didn't match the excitement of my encounter on the street, and it didn't communicate to me that the COC is one of the most prestigious Opera companies in all of North America. 

While the site could use a revamp, I’d like to point out five immediate fixes that would have a positive impact on the current user experience, and boost the COC's brand. 

Simplify Navigation

While there are some better pages throughout the site, the homepage has a serious UI/UX problem; there is too much navigation. Simpler and more focused navigation would help shape the user's experience and draw them towards the most powerful content on the site. The current content of homepage is minimal and takes a back seat to the eight levels of navigation I counted, they are:

  1. Account / Cart
  2. A. Neef - Tickets - Calendar
  3. Main 
  4. Side 
  5. Side call-out 
  6. Expanded super 
  7. Social 
  8. Footer

The way users access information needs a rethink and should take up half the space it does now. When you load a site that is 80% navigation and 20% content (consisting of 3 slider features with even more navigation!) it does little to establish the brand of the COC. There are a few particular challenges that are easy to fix.

First, the Account / Cart navigation lists the items “Sign In | Sign Out”. This is confusing and doesn’t indicate your current state. This should be one text element offering either action depending on your logged in status. 

Second, there are two instances in separate navigation blocks that ask you to follow the COC on Twitter or Facebook. There is no need to duplicate social follow links across the page. 

Third, the “Side call-out navigation” suggests that these 4 items are the most important actions on the site, but the design reads as an afterthought. Rather than tack them underneath the side navigation, the header/main navigation should be re-prioritized to reflect their importance.

Fourth, the navigation is inconsistent between the desktop and mobile versions of the site. Each of them offers a very different experience — more on this below.

Finally, the text resizing tool only adjusts the size of the main content box. The tool has no effect on 80% of the page which the user may also want to resize. Additionally, this ability is now built into most modern browsers and isn’t extremely helpful. 

Use Expressive Typography & Photography

There are two distinct ways the design of this site can be improved, both of which will help boost the COC brand. 

Right now the site uses only two fonts, Arial and Verdana, which are default browser fonts. While both of them are legible (even if the size of the type is a bit small) typographic options have expanded to allow designers more freedom beyond base operating system constraints. Embedding fonts into a page offers limitless possibilities for design, branding, and emotional impact. Organizations should set the same level of design expectations for digital projects as they would for any other.

Opera is an emotional, creative field, and visiting the COC’s website should evoke the experience of being moved by attending a live performance. The photos of the performances are an anchor that could make someone connect with and be excited about the company. I suggest reinforcing this emotional connection through large, dramatic photos, unencumbered by superimposed text.

What’s going on behind all that text?

Improve Mobile Strategy

Whenever I visit a website, I always play with the size of the browser to see if it supports responsive design principles. Responsive design is presently the best way to support as many device formats possible while maintaining one code base. 

When I played my little browser game and saw that the COC website didn’t respond to my adjusted browser window, I was worried they hadn’t taken into account mobile users at all. I was relieved to see they had a separate, adaptive version of their site that supported mobile, if it did offer an altered experience.

The problem with this approach to mobile is that by supporting two different experiences and code bases, it has created a few unnecessary problems. First, the user experience for each is different enough to be confusing. The navigation and site structure are not the same. Second, the navigation elements don’t conform to expected mobile behaviour. While we do see the standard “hamburger” navigation menu, the text is so small you don’t have a finger-sized click state. Third, the mobile site was not designed for a phone’s landscape mode, and doesn’t format well for a wide screen. Finally, the biggest issue is they are managing two distinct code bases. This means any change to the code or design of the site will need to be done twice, doubling the work and cost to maintain.

Remove All Flash Elements

When Apple released the first iPhone almost 10 years ago (yes, 10 years!) they said they would stop supporting Adobe Flash technology. On that day it was clear that Flash had a limited future on the internet. That was the year Plank stopped producing any Flash projects and discouraged our clients from using it. Flash had always been a buggy piece of software and with the open web movement prevailing, a non-standard compliant plugin didn’t have much of a future.

Ten years later, Flash is hanging on for dear life (thanks mainly to advertisers) but will die off completely soon enough. In addition to a lack of mobile support, Chrome and Firefox will soon stop loading Flash components. 

I suggest the COC revamp all content in the “Look & Listen” section of the site so that all media will play natively in any browser. This is a wonderful repertoire of sights and sounds, but the current experience is hampered by limited access.

Switch to LAMP Hosting

While the average user won’t care about website hosting as long as it’s delivered quickly and bug-free, I like to consider different factors such as workflow, code optimization and ongoing costs.

It appears the site is running Microsoft’s proprietary ASP / ASPX / Azure technology as well as a proprietary CMS solution called Agility CMS. What this means is the website hosting is on a server that supports IIS / Azure technology, which is usually quite a bit more expensive than LAMP hosting. 

In my humble opinion...

It looks like the different iterations of the site were tackled in the early 2010’s so it’s possible the COC is already thinking about some of the things I’ve considered above. Heck, they may even be in the midst of revamping. If they are, I hope they find a different approach to the development of their site so that it’s not a big overhaul. An iterative evolution will ensure they don’t end up back where they started with an out of date platform that needs to be rebuilt regularly.

Design & Code