Tincan are the hardest working supplier we have ever worked with. The new site is a triumph, it represents the WNO brand perfectly.Head of Marketing, Welsh National Opera
Welsh National Opera is an award winning, world-class opera company, recognised both in the UK and internationally for its artistic excellence. It is the UK’s largest provider of touring opera, and the most active in Europe. With a permanent staff of 250 including orchestra, chorus, principal singers, production, technical, WNO MAX and administrative staff. It's home theatre is Wales Millennium Centre in Cardiff .
Welsh National Opera had an existing body of excellent content which they weren't showcasing on their site. This was due to a combination of limitations within the existing CMS and a 'bad' structure and inefficient workflow. Additionally WNO were struggling to present their programme in a meaningful way that was intuitive and enabled efficient user journeys.
WNO recognised that its online audiences were increasingly using smartphones and tablets and that this trend would continue to grow. The existing site did not cater for these devices and so users were getting a poor experience.
Our goals therefore were to:
What we delivered
We took a touch first approach to building this site and this meant rebuilding it from the ground up - visually, functionally and structurally. We began by analysing the existing site structure and content. Then we ran workshops with the team and their stakeholders to devise a new, optimised site structure.
We developed site personas to identify who we wanted to talk to and established a primary audience type, helping to create a focus for the new structure. This enabled us to develop a simpler structure and the content within it to appeal to the target audiences more effectively.
Working collaboratively with WNO, we quickly sketched up some page layouts, exploring early on how the responsive elements to the design might work. The process of producing wireframes allowed us to have conversations about functionality early on in the process. This included discussions including bespoke pieces of work around rich media delivery (image, audio, video) and displaying the event programme effectively using search and filtering.
Alongside wireframing, we started high level visual exploration. Taking the new WNO branded print material (which was lovely), we created element pieces, explored layout patterns and relationships between text, imagery, iconography. We started to start to build a visual language for the new site. We wanted to be sure that the site could convey the spectacle of opera with the strength of the new WNO brand. This meant looking closely at imagery, displaying strong, stylised photography and giving prominence to the supporting audio and video WNO produce.
As the deadlines were tight, time could not be wasted. Taking the solid pattern foundation and agreed wireframes we decided to take a more agile approach to the project with all the remaining design decisions taken in the browser. So we began to build the site prototype. By getting key functions such as multi-level navigation into code early, we were able to identify problems quickly. Within a few iterations we had improved the original design, dramatically reducing time to delivery. We were able to test rigorously and refine the interaction experience across a wide range of devices.