Website Design & Development

Website Design & Development

Tyne & Wear Archives & Museums (TWAM) is a major regional museum, art gallery and archives service. TWAM manages a collection of nine museums and galleries across Tyneside and the Archives for Tyne and Wear.

The pre-existing TWAM site had ‘flavoured’ subpages for each of the venues.

The site told the story of a great idea: one site with many flavours, a common structure but a different set of styles for each venue. A creative and efficient approach especially appropriate in the public sector - but the implementation was far too rigid. The layout didn’t suit the fact that some venues had more current events than others, that there were varying degrees and types of visual content for each. It was - in the final reckoning - a series of containers that had to be filled with content, rather than useful tools which could allow each venue to tell its own story.

Screenshots of the different TWAM websites
“from content containers to authoring tools”

In addition to this, everything was masterbrand-led rather than venue-led. This was confusing for members of the public who knew they want to visit a museum but didn’t necessarily mind which organisation owned it. Not that TWAM isn’t important to the story, but it isn’t the average visitor’s first thought when considering a visit to Discovery Museum, and so it shouldn’t be presented that way online.

Through years of using the CMS, the in-house content editors had also identified a healthy list of improvements to make easier the task of running eleven sites.

The project was about more than just bringing the sites up-to-date. Of course - we needed to make sure they met tighter accessibility criteria than before and that they were easier to use on mobile. We sought to go further than that, to find a ‘true accessibility’ which was about tempting visitors to explore and build a deeper relationship with their local museums, galleries and archives.

“tempting visitors to explore and build a deeper relationship with their local museums”

Could we allow each venue to tell its own story while removing clutter and improving ease of management?

TWAM Takes Action

The marketing team at TWAM consulted across the organisation, especially venues and education specialists, in order to establish the state of play.

Their invitation to tender identified what worked and what could be improved upon in terms of both front end design and the back end content management system.

Tariff Street was chosen from the shortlist to develop the new website for several reasons. Firstly through our partnership with Morris Hargreaves McIntyre (MHM) we had made research and audience insight key to our approach. Secondly we’d recommended a more radical and cost-effective approach to creating a tailor-made solution to the brief. Third it was our knowledge and agnosticism when it came to end solutions - we were able to demonstrate that we were committed to finding and implementing the best answer together rather than relying on existing tools or preconceptions.

What did we decide to do?

Many digital agencies would have recognised TWAM’s brief as fairly typical given the age of the pre-existing site and CMS. There were legitimate gripes with the admin side of things and many well-informed suggestions aimed at bringing everything up-to-date and in keeping with the way visitors actually interacted with the brands.

In order to do a good job for the people of Tyne & Wear, we needed to get under the skin of the brief. We wanted to undertake some strategic analysis and planning alongside our partners MHM who are the undisputed experts in audience insight and visitor attraction marketing.

Our plan was to tackle the project in four phases:

  1. Strategy
  2. Design planning
  3. Production
  4. Deployment

Throughout the whole project we sought to get the basics right. As you can imagine an organisation like TWAM has much history, many activities, commitments and funders. Such a context means a lot of content and an array of competing priorities. To gain focus we proposed a modest prioritised list of aims for the visitor:

  • Find out something that’s on that’s relevant to me, either through specific criteria or being tempted.
  • Find out how to use the venue and find authoritative information about its facilities.
  • Find out about TWAM’s educational activities and opportunities.
  • Find out anything else about TWAM.

The Project

1. Strategy

Alongside our research partners MHM, we engaged a large group of TWAM stakeholders to explore and capture insight on the problems we hoped to solve. Together we built a consensus on the top-level definition and objectives for our work.

More than just agreeing aims and objectives and reflecting people’s concerns, this was about producing specific guiding principles for the project which could be used as criteria by which to judge the finished product.

2. Design planning

Wireframing of the TWAM websites

Design planning started with a full inventory of content and an exercise to map it according to the principles uncovered in the first phase. Most importantly of all we encouraged a shift towards navigation and description suited to visitor instincts, not organisational structures or traditions. There were so many examples of things that were named after internal departments or initiatives which taken out of that context had little meaning to a visitor. Making things as obvious as possible was an old adage very well suited to this work.

We used real content to imagine layouts and scope what the most important as well as the most variable aspects of the design would be for each of the venues. Doing this in a rough and ready way initially allowed us to explore the limitations and opportunities together factoring in concerns for accessibility, brand differentiation and ease of ongoing management and evolution.

A key guiding principle was to allow the separate identities of the venues to flourish and lead in the interaction. This was one of the hardest aspects of the project.

“Keeping the separate brand personalities was a creative challenge straight from the off. In order to design twelve sites which shared an underlying architecture we designed a flexible modular structure for the content which would use common HTML but allow styles to vary between brands.

“It was essential to allow the sites to grow and change, giving content editors the freedom to create the sites that best suited the brand - be it a venue or another strand of TWAM’s work such as ‘Learning’. These modules had to be as effective for an art gallery as for a museum targeted at children and families, so many scenarios were developed. We were keen to avoid the feeling in the design that anything had been shoe-horned into something too rigid.”
Kim Farrall, Human Graphic Designer

3. Production

Graphic Designer working on the computer

We employed a three-way working methodology which has been successful on our website development projects in the past.

“If you create a full design without writing the code then it will omit key ‘moving parts’, the opportunities and limitations of the technology being used. If you create a fully developed design into a working site and CMS without developing the content then you are likely to mis-judge many aspects and create a solution that is disconnected from the reality of its use. The only way to truly solve this is to do all three things at the same time: content, code & graphics - the holy trinity of bespoke web development.”
Christopher Charlton, Human Strategist & Founder

This approach was responsible for so many small-yet-vital changes in course, choices of method and updates to design. Just one example was our decision to use the BBC’s open-source ‘Imager’ solution for handling responsive image loading.

To see great images on large or high definition screens (such as Retina) you have to start with pretty big versions. But it would be grossly inefficient to load such images in every context - quite a lot of the time, a lower res version doesn’t appear any different but across a whole site will save a tonne of bandwidth.

“With so many different images at so many different sizes, we needed to know that this was going to work across all browser and devices at our different breakpoints. We wanted to see that it already was working in a tried and tested environment, and you don’t get a better real-world testing ground than the BBC News website.”
Matthew Chadwick, Human Developer

Production took place with a single dedicated team all working simultaneously on the project during intense and focused two-week sprints. A way of working familiar to those who know about the Scrum methodology. So as we designed and built the sites and their new CMS, content editors at TWAM were using the prototype to author real-world content which would be published at go-live.

At fortnightly showcases, a working and more-complete version of the sites and their CMS was demonstrated by the Human team. Each sprint therefore involved testing, review and delivery of something functional and of value to the client.

4. Deployment

We entered the project’s final phase with a strong product everyone was happy with. All that remained to do was pick through the patchwork of existing domain names, redirects and brands and make the technical changes required to switch everything over to the new schema.

The result was more logical, cleaner and easier to understand - but not to the detriment of search rankings. We were careful to ensure this by implementing redirects and making all of the proper submissions.

Did it work?

Screenshots of the TWAM websites on mobile devices

The new sites went live in July 2015 and received great praise from client and stakeholders alike.

“We were very clear from the outset that what we wanted to achieve from our new website was that it was intuitive, visitor-focused and branded by the individual venues rather than the corporate TWAM branding.

“Whilst we wanted users to find what they were looking for quickly and easily we also wanted them to explore and discover things they weren’t expecting. We launched our new collections discovery engine at the same time as the new website which really helped with creating richer and more interesting content.

“Working with Tariff Street on this project has been both interesting and exciting. They guided us though the process, posing challenges and finding solutions until together we crafted a website we’re all proud of and which more than meets our original objectives.

“more than meets our original objectives”

“Feedback so far has been fantastic. Comments have focused on the clean and attractive design and how easy it is to find information – particularly on the what’s on section. The process of creating the new website has been inspiring and we’re already dreaming up future phases of development.”
Sheryl McGregor, Principal Officer for Communications
Tyne & Wear Archives & Museums

In the coming months, we’ll seek to find out what the difference has been for TWAM in a more empirical way as stats and visitor behaviour can be more fully evaluated.