The design and build of Southbank Centre’s new website

The Brief

Our brief was to build a website which would vividly communicate the organisation, what they do and what they stand for.

• A best-in-breed event and ticketing website

• A unique global destination for arts and learning

• An open web platform

We expanded our in-house scrum team

We grew the scrum team from 4 - 12 in 1 year. We went from waterfall to agile in 8 months.

Stakeholder buy in

Proofs of concepts were presented to help stakeholders understand what was possible and how we could make it happen. We presented high level concepts and explained in depth how an in-house agile team would benefit the project and the company to insure a financially viable future proof digital platform in our ever changing organisation and digital world. 

Video homepage with central search proof of concept was an idea which would allow the user to understand what Southbank Centre is about without having to click anywhere or work to hard to find out what Southbank Centre is about. 

The concept of the video home page was that - whilst searching, video snippets introducing the content are played in the background. The user can explore these via a system of tags

Video homepage with central search proof of concept was an idea which would allow the user to understand the feeling of what happens at Southbank Centre without having to click anywhere or work to hard to find out what Southbank Centre is about. 

This in itself was highly successful and allowed us to secure funds to move on with the project.

We ran a series of website advisory group workshop sessions to engage the organisation with the project. We also ran workshops with external agencies Bureau of Visual Affairs and Cogapp to get the big thinking on the table.

• Initial thinking and focuses

• Open Data and Semantic Search

• Humanising interfaces to extend a warm welcome

• A communicated festival

• Global reach

• The social purpose / learning at the core

• Focus on user needs

• Communicate the breadth of content

User personas are used to ensure the site is focused on real user needs rather than solely on internal or organisational needs. We revisited and refined our personas and identified a primary persona to help us focus on the core user needs of the website. Below is a brief outline of our primary persona, the full persona was more detailed and included goals, motivations, frustrations, technology usage patterns and brand loyalty.

In the spirit of openness we (the dev team) partnered with Web We Want festival to work in a truly open way by setting up our team and working in a glass box within the Southbank Centre for 16 weeks. We worked in the middle of the Royal Festival Hall to be a direct point of contact with our users and colleagues from other organisations such as the Barbican. We tested our products, displayed our designs and asked for feedback and ideas from the customers. We ran workshops, met our users, tested our projects and shared ideas. It was an eye opening experience.

IA Design

In order to create a successful IA which would support findability and usability we had to pull our current IA apart and start from scratch. Southbank Centre has many cross genre/cross artform events and exhibitions. Alongside many other types of event such as festival, long running events and one off events. The list is long and complex and nothing fits neatly in 1 section. 

It was my job to design an IA which would support this whilst maintaining a coherent structure. It was decided early on we would need the search to be absolutely key in the user journey - not only to find events but to lead into related content intuitively. 

We decided to design an non hierarchical IA which would guide users through content rather than organising the content into places from the top down. The pages would be made up of modules which would interlink between event and content pages.

When the website project kicked off, Southbank Centre had no digital brand guidelines. A re-brand was on the horizon so we needed an interim brand which could be picked up easily in the future and co-exist and develop alongside the re-brand. 

I lead the project to create a digital style guide and pattern library to allow the team to have a focus when creating the new website. We ran workshops with stakeholders and engaged with customers to create 5 principles to guide the website - Open, Transformative, Surprising, Global and Socially Engaged.

We then started to create the grid system, typographic style sheet and some initial icon styles. With the developers we created code based styles to publish publicly on the online style guide. 

In my role as Scrum Master I coached the team when we took on the back end system integration work. We built a bespoke Drupal CMS specifically for the website in order to link it up to other systems and work with the Southbank Centre's complex set of needs.

Api built to connect Drupal with Artifax, Consultation on new Digital Asset Management systems, Tessitura considerations and integrations, Drupal as an Open CMS development work. We discussed and decided on systems and hierarchies, naming conventions and groupings of data, ontology, taxonomy and architecture.

In order to design a fully adaptable website, I lead the design using a modular approach. We approached each entity as a module rather than a page template. Each page would have to be flexible as each event and/or content page would have different needs. Some events may have multiple content blocks including video/image galleries/sound clips/reviews etc and other events would have basic information such as time, date, price.

We applied this approach to the back end by decoupling the front and back end. The back end using Drupal and the front end using Angular JS. 

We held group wireframing sessions to enable the whole team (including developers, project managers, sys admin etc) to input into the beginning stages of the work. It helped iron out any grey areas when it came to design and allowed us to design solutions which were achievable in the sprint time allowance. This didn’t mean we couldn’t think outside the box - I often challenged the developers and they equally challenged me and UX analyists. It was a healthy and productive way of working.

We used the wireframes to help create and flesh out user journeys, taken from user stories based on our personas.

Once we had user stories, wireframes ready to go we designed and built interactive prototypes to test with users. We tested them with real people who matched our persona - focusing on our primary persona ‘Wendy’. We ran lab based and more informal on site testing sessions. Our UX Analyst ran these and I was involved in preparing goals for the sessions, prototypes, listening to and implementing relevant feedback.

Once the tests had been done and analysed, the design iterations were made and designs passed to development to be built. The first iteration of the new design was for WOW festival 2015. It incorporated a basic introduction of the new look and feel, the new grid and the first version of the CMS. We pushed it live for the festival which in itself was a huge success being able to launch something which was not a finished product - a big step forward for the organisation. 

We immediately had real feedback from our users and our in-house team was in a position to not only fix problems there and then but learn from the analytics and work reactively to improve the experience for users.