The Association of British Orchestras is the national body representing the collective interests of professional orchestras, youth ensembles and the wider classical music industry throughout the UK. Founded in 1948, ABO celebrated its 70th anniversary in March 2018.
Their mission is to enable and support an innovative, collaborative and sustainable orchestral sector by providing advice, support and information to the people who make British orchestras a global success.
Their old website was built 6-7 years ago and was showing its age. As such, it was the right time to rejuvenate the website with a fresh new look with more streamlined functionality.
During our kick of meeting with the ABO, we identified the organisational goals and the issues that they face with their current site – with the primary goal to make the user's journey much simpler. This process included auditing and organising their content, developing site plans, user journeys and basic wireframes.
The design process
ABO produce a lot of content that is rich with information and text-heavy, but rarely contains images. Our challenge – and a challenge it was, given images are often used to provide visual interest – was to create a design for their website that presents the content in an engaging way, is easy to locate and easy to read.
We agonised over the little details of the UI (User Interface), carefully selecting new colours, icons and typefaces – developing a robust design system that, when deployed, has real clarity and consistency. Our goal was to create a design system that could be rolled out both on and offline, and one that would increase brand recognition.
We refreshed the secondary colour palette to compliment ABO's light blue. Each colour having its own role within the design system. With our aim being that members become used to how to interact with different elements guided by the colour.
Use of icons
One of the issues with their old site was the use of lots of links. It was unclear how these links would behave. Some would download a document, others take you to another page on the site and others to external links. We introduced three icons into the design that would inform the user as to how the link would behave.
Typography is such an important element of any design, even more so for ABO as we wanted to create a design system that worked entirely without any reliance on images. We spent time researching appropriate fonts and handpicked two typefaces that have a friendly, soft personality and complement one and another beautifully, whilst being professional, approachable and, more importantly, highly legible. These typefaces are Oxygen and Signika.
Once we had decided upon these key components, it allowed us to build the (vast) array of templates extremely efficiently.
The outcome is a design system that works seamlessly across the board and that provides a sophisticated, professional and authoritative look.
The website has been built using Craft 3 and Craft Commerce (for ticket sales). We even developed a custom Craft plugin to integrate with the ABO’s existing CRM system so that members have self service pages to update their details directly on the website.
It was delivered on time, just as the ABO enter their busy period of promoting their annual conference.