A bold new website for the newly branded Bristol Beacon

Author: Kathryn Mason

Bristol Beacon is a music charity, performance venue and award-winning music education hub. Having recently undergone a huge brand transformation that’s given them a new name and vibrant visual identity, they’ve also got a snazzy new website. 

We loved partnering with the Bristol Beacon team to launch their new site. So we’ve spoken to their Digital Marketing Manager Duncan Smith and Substrakt’s Brand & Communication Design Lead Daniel Alcorn about the website project, Bristol Beacon’s journey, and how our collaboration with branding agencies Saboteur and Rising Arts made the project such a success.

We’ve broken the conversation down into five sections:

  1. The Bristol Beacon story
  2. New brand, new website
  3. Choosing the ‘bolder’ design route
  4. Working collaboratively
  5. Reactions, reflections and advice

The Bristol Beacon story

Can you tell me a little more about Bristol Beacon’s story? The background behind the recent transformation and what it involved?

Duncan: There’s a long history to Bristol Beacon but in short, we are a music charity, a venue and a music education hub for the city of Bristol. In September 2020 we changed our name from Colston Hall to Bristol Beacon, but there was a lot of wider work leading up to that announcement.

There were a couple of main reasons we changed our name. The first being that its association to the slave trader Edward Colston didn’t represent our organisational values, which was particularly significant for us because we’re a cultural venue who are meant to be open to everybody.

The second reason is less well known –  we were more than just a music venue and the name just wasn’t representing who or what we were. Yes, we definitely were a music venue and had occupied a physical space in the city centre for over 150 years, but most people who engaged with us didn’t know that we were also a music education hub for the whole city of Bristol (which had a different name, Bristol Plays Music). We provide loads of educational opportunities in schools, alongside artist development and community engagement programmes. So there was a huge brand gap between the two, and we knew that we needed a new brand that could better tell the story of who we were as an organisation.

So in 2017 (before we’d begun the work around opening a new concert hall) we announced the decision that we were going to change our name. It was quite a big moment of discussion both locally and also nationally as well because it connected into the wider discourse around heritage, inclusion and whose stories are valued by our society.

This really made us look at ourselves and think ‘what do we stand for?’ and ‘what’s our organisational purpose?’, so it kicked us into making sure we had a solid foundation behind the name change. We were also developing our EDI plans, so we tasked ourselves as an organisation to do all of that internal thinking. We spent a couple of years speaking to audiences, consulting communities and working with agencies to help us really define this – we worked with Morris Hargreaves McIntyre to develop a brand evaluation project, which helped us land on a brand essence, and this was the first bit of robust, documented work that helped facilitate the rebranding conversations we had moving forward.

We appointed two agencies to help us with this work, as we wanted a combination of people that had a good experience of changing names and rebranding organisations (we chose London-based brand studio agency Saboteur), but we also knew we wanted to work with young people who would bring a more diverse voice to the table and challenge us throughout the process (so we also worked with a local artistic agency called Rising Arts Agency – whose talented emerging creatives worked with Saboteur to make sure that the brand represented the voices of Bristol’s up and coming musicians and audiences).

While this was all great and we’d made good progress with the strategic work, from an external point of view it looked like we hadn’t done anything beyond announcing that we’d have a new name. This made us realise that we needed to move quickly and announce our new name as soon as we could, and this meant changing our website, social media handles etc – essentially a reskin of how we looked in a digital world.

So ‘Brief A’ became the name change, ‘Brief B’ became a new visual identity.

Tell me more about the concept of ‘Make space for music’ and what this means?

Duncan: It really comes back to our brand essence and purpose – we’re a music charity and our purpose is to share the joy and unity of live music. We want to make space for musical experiences in people’s lives – whether that’s by alleviating barriers to music for different people, supporting musicians with advice and our emerging talent programmes, or through our music education opportunities for young people etc. ‘Make space for music’ is a nice succinct way of communicating what we do.

make-space-2

New brand, new website

How and where did you first hear about Substrakt?

Duncan: Substrakt had been on my radar for quite a few years. I used to work at Bristol Old Vic and I remember doing some initial website research and thinking ‘what do other arts organisations do?’ and ‘what’s happening in London?’. We’d recently done a project with the Royal Court and I was really impressed by their website, and then I saw your work on the Globe’s rebrand and thought that was really interesting, so I started discovering what you were doing a little more.

I saw Ash Mann do a presentation at a couple of conferences and remember him speaking about the work you’d done with the Bridge Theatre on what could be quite a dry subject of ticketing purchase paths [obviously super interesting for us], but the way he focused the talk around the importance of understanding what the audience and user needs when coming to a new theatre (he talked about speed, variety and options etc) showed that you understand what’s needed from a purchase pathway beyond just “you’re a cultural organisation that needs to sell tickets”.

So around that time I knew you were top players, and what stood out from my point of view about Substrakt was your approach to the Discovery process and how to understand audiences. And secondly your ability to interpret brands, and that came across whether you were thinking about it from a technical or wider organisational purpose perspective. I felt that you really understood how to interpret and engage key brand values, which we got a real sense of through the several conversations we had with you.

How did you approach translating curated brand guidelines into engaging website content?

Dan: Both Bristol Beacon and Saboteur kept us really well informed on the brand development as the process went on, with regular meetings to update us on what the Bristol Beacon team were liking (and not liking) which informed how we applied this to the current iteration on screen. From these discussions, we began to formulate ideas around how we could animate some of the brand devices, such as the beams and frame. It really came together when experimenting with the brand in situ and applying some of the treatments to the page – working out how the frame device could interplay with familiar user interface patterns.

image-13
billboard-3

Frame treatment

What specific challenges, problems or opportunities did your new website need to address?

Duncan: Well there were obviously loads of technical things that were important – like load speed, discoverability, flexibility in how we can construct pages, digital accessibility, improving overall performance etc – all of those things that are on the big checklist of things. And we knew from our conversations that these all came as part and parcel of working with Substrakt.

But the greater challenge was really all to do with the brand gap we’ve spoken about, and more specifically from a website point of view about how we give equal prominence to our artistic and education programme. So hierarchy of information was a really important consideration and it was something we struggled with. We ended up having lots of internal conversations about what to include in the ‘What’s On’ feed (we didn’t want any unuseful information there) and we knew there wasn’t going to be a silver bullet solution.

But we had lots of conversations with yourselves about the different ways we might approach it, and you offered us some really good solutions, through things like a curated ‘What’s On’ feed which gave us the flexibility to have a ‘Netflix-style’ feed, while at the same time having different filtering options. And we were also able to have ‘mini feeds’ on different parts of the website that were made relevant to slightly different user journeys. So even though it was an (ongoing) challenge, we have lots of opportunities to showcase the wider programme that we have.

image-14

Curated ‘mini feeds’

Was there anything else you specifically needed the website to do?

Duncan: Outside of those bits I’ve talked about already, the other main thing was having the ability to grow our content strategy over time, which is really important for increasing our lifetime value with our audience. The more we invest in developing that strategy and communicating it through the tools you’ve given us on the new website, the stronger and more meaningful the connection we’re going to have with our audiences.

And that’s the stuff you knew was important – your content strategist Zosia was brilliant at looking at the site map, thinking about how we structure content, and taking us through the more ‘Marketing 101’ things like how to write engaging website content etc, so it was great to have that expertise in your team. It’s what will hopefully allow our strategy to evolve over time and give our brand longevity.

How do you think the new website reflects your new brand and ethos?

Duncan: Our brand value is “unity and joy through live music” and the way Saboteur interpreted that was to have vibrancy and creativity through the brand, with things like a bright colour palette and not being restricted by building blocks or grid structures when it came to creating visual designs. So there’s a really handmade element to our brand and this has all been carried through to the new website.

image-5

Colour palette

There’s also a huge amount of flexibility with the brand, it’s a set of guidelines as opposed to rules, and this is reflected in the way the website has been built. One of the practical reasons we did this is because we wanted to reflect and embrace the sector that we work in – the live music sector is hugely creative and comes with so many different styles, texts and colours that are all inherent to its subculture of artistic design. So instead of forcing that into a fixed brand style, we wanted to celebrate all of that diversity and so we needed flexibility built in from the start. 

This is achieved through the colour palette Dan’s used – he’ll be able to explain it far better than me, but there’s essentially a base layer and then a second layer, which means we can get really creative with the combinations and what we show. Whether that’s a content block that we want to shine, or a specific page element that we want to have visual synergy with the rest of the page.

image-9

Colour experiments

But what Dan also understood was that we needed flexibility with things like title treatment, which we’ve been given through the way the mastheads have been built to allow for various different types of content, like video or static imagery. And the thing we really love is what we call the ‘Beacon Beam’ treatment, where those lines slowly animate. So it’s all those subtle animations that deliver hints of our brand which is coming through lots of different parts of the website.

billboard-2

‘Beacon Beam’ treatment

What were the main priorities for you when building and designing the site? 

Dan: With all of our website projects, the client retains a lot of control over the content and layout once we’ve handed over the Content Management System (CMS). Using our page building tool, Construkt, clients can add a variety of elements to a page in any size or colour from a number of presets defined by us. This provides an incredible amount of flexibility, but there’s also a margin for error, so it’s important that anything we build is easy for the client to manage and curate.

So a priority for us was making sure this was the case for Bristol Beacon, while also giving them the level of flexibility they needed. It was also really important to make sure that the content feels vibrant, so the Construkt blocks are set up in a way that lets us make the most of the brand elements at our disposal.

For the most part, Construkt blocks across different clients retain the same admin inputs and settings, we then alter them on a project by project basis (using the HTML and CSS with additional settings if required). This is what gives our clients something that feels individual to them while maintaining a workable codebase.

Beyond the page builder setup, it was really important that we made it easy for the user to find information. Whatever we did with the brand and the structure of the site had to be done in a way that allowed the user to easily navigate, book tickets and plan their visit to the venue.

Choosing the ‘bolder’ design route

What were the main differences between the two creative routes you presented?

Dan: When approaching the general structure of the page, I initially created something that felt very traditional – a header bar across the top of the page with some primary navigation elements and a burger menu. This meant that the content flow was equally traditional, with full width mastheads and rows of content with the core brand functioning as a flourish rather than a centerpiece.

This worked and looked nice, but as soon as I decided to use the frame device as a frame for the whole site, the brand became the focal point. It allowed the content to be structured in a more interesting way that was permanently contained within the wordmark. This then leant in on the tagline ‘Make Space for Music’ and the website began to look more like the brand collateral that was being created.

While the structure of the content inside the frame didn’t alter much, the defined space made it easier to manage and the use of the beam device felt more intentional. This route also meant we could play with the colour palette a lot more. Knowing that there was always going to be a space around the edge of the page where colours were really visible meant we could experiment with the broad colour palette created by Saboteur, which made the design even bolder and more engaging.

So there’s something about having the wordmark bold and persistent throughout the website alongside such vibrant colours that makes it feel so adventurous and a little bit different to some of the other websites we’ve produced.

image-11

Option 1 vs Option 2 (the ‘bolder’ design route)

image-121

Of the two design routes we presented, what attracted you to (what we’re calling) the ‘bolder’ option?

Duncan: Well we sat with it for a few days, because you gave a great presentation and to be honest we loved both routes presented, so it became more a question of “how bold do we want to be with this?”. It was more a confidence thing I suppose. It was the first point throughout all of the work we’d done where there would be a definitive visual output for the world to see, there was no going back, and so it was a real decision moment.

And we felt we’d be doing a disservice to all of that work if we didn’t go through with what was the purest expression of that brand, and that was definitely the bolder route. It was so much closer to how we’d been talking and experimenting, and how you’d been working with Saboteur and Rising Arts Agency throughout that process, so if we tried to dilute it at this initial moment we knew we wouldn’t be staying true to all of the work we’d put in. So while it didn’t feel comfortable, it was exciting. And it still is. It was the only decision we could have made.

How did you feel when Bristol Beacon chose the bolder option?

Dan: With every design you create you hope the client will feel as passionately as you do about a particular direction. I think in this instance we were very excited about the bolder option because it did feel so different and utilised the brand so well. With a new website you don’t want to alienate the existing audience, so there’s always a concern over doing something that is perceptually very different. But Bristol Beacon were really good at knowing, communicating and embracing the messages they wanted to present, and I think the design hits the right balance between feeling very new and exciting, but still easy for audiences to engage with.

Working collaboratively

Tell me a little more about the collaboration between Bristol Beacon, Saboteur and Substrakt. How did the working relationship between the three companies enhance the overall project?

Duncan: I think it was probably the best thing about the project. You’re always going into an unknown when you’re involving different creative opinions, but what you gain is a wider perspective and that almost always enriches whatever it is you’re making. So when we brought Substrakt in as a third element to the collaborative working model we’d already established with Saboteur and Rising, we already knew that having an additional perspective would be really beneficial to the project overall. 

It’s definitely challenging to work in this way (especially remotely) but we ultimately recognised the importance of doing the groundwork and getting these voices speaking together before moving to the fun bit – the ‘making of’ stuff. So we took our time and made sure that all four of us had a collective understanding of why we were doing what we were doing. And we’d created a forum where it was okay to challenge something, which (while sometimes feeling like you’re making very slow progress) means that what we’ve now got is so much more exciting, and has greater value for the people involved.

How did the collaboration with Saboteur improve the project? 

Dan: The meetings we had throughout the early stages of the project were incredibly helpful for both teams. Saboteur continually presented really wonderful, inspiring brand directions that had been given a great deal of care and thought, and we wanted to match that in the way we approached the website.

Being involved at the point we were helped us direct some of the digital approach when it came to typefaces and colours. We could help make sure that we were creating something as accessible as possible while still reflecting the core purpose of the brand, and Saboteur were really accommodating to our feedback there. We finished the brand process knowing exactly how we should be interpreting the brand and had all the tools we needed at our disposal.

Reactions, reflections and advice

What has the initial reaction to the new brand and site been like?

Duncan: Audience feedback about the website and the booking experience has been really positive. And the internal feedback has been great – the Senior Management team have said how easy it is to communicate what we do now externally.

So when they’re having conversations with people who might be slightly outside the sector, they’re able to say “oh, we’re a music charity, look at our website”, and they can get it up on their phone right there as a really easy way to demonstrate who we are and what we do. It’s made explaining our identity so much simpler – you can say it in a sentence, and show it in a second. Which is something we just couldn’t do before.

new-about

What’s been the most challenging part of the entire process – from the transformation, to the rebrand to the website launch itself?

Duncan: Nothing about this journey has been easy, and we’ve encountered a lot of challenges throughout. Particularly going through that communications crisis (I don’t use that term lightly) and the huge amounts of brand exposure that came with it.

But also going through the process of such significant organisational change. I think it takes real courage of leadership, long-term ambition and resilience for leadership teams to commit to that, and I don’t think anyone in our organisation realised how exhausting this was going to be. It’s always going to be challenging to get buy-in from senior management, but to make sure this is being done in the right way, and not being rushed into the ‘easier’ decision is where I think the real challenge lies. So I guess it’s about being unafraid of change, and knowing that you’re not doing it alone. Getting that support wherever you need it, whether that’s internally or having discussions externally to build the right teams around you.

From a rebrand perspective, it was both really hard and really rewarding to be collaborating with multiple people. While it was sometimes difficult to streamline that communication, we were always rewarded with this creative forum of diverse opinions but it definitely came with its challenges.

And in terms of the website launch, I think we completely underestimated how much content we needed. It was a really successful launch from a Substrakt point of view, but I think we as an organisation didn’t step back early enough and see that challenge. If I was to talk to myself three months ago I’d have said “you think you need these pages but you really don’t”.

But I recognise that we were also trying to merge the two organisations and so it felt like a strange moment to be pushing back on exactly what was needed (particularly as we were trying to collaboratively decide exactly who we wanted to be). But we missed an opportunity to think about our content creation properly, which led to a lot of content being created in the wrong way and means we’re now having to revisit our overall content strategy.

Can you share one piece of advice for any arts organisations taking on a new website project?

Duncan: Hmmmm, one piece…that might be tricky! I guess it would be something I’ve been talking about quite a lot – don’t be afraid of working with a variety of people and inviting a greater range of opinions. It’s the scarier option and there are definitely more unknowns, but I really think it’s what’s made this project such an enjoyable and successful experience.

 

If you’d like to hear more about anything we’ve talked about here just get in touch, we’re always happy to have a chat: team@substrakt.com