Musical Futures

Website and branding

Musical Futures is an innovative approach to music learning. It brings real-world learning processes into schools – engaging, inspiring and promoting inclusion and diversity.

Originally an initiative at Paul Hamlyn Foundation, we’d worked with their team for a decade. We helped them translate academic research into a published syllabus, and produced workbooks, conference materials and other communications.

In July 2014 they became an independent not-for-profit company. Over the year that followed we worked with them to refine their existing brand and create a website fit for a new, membership-focused organisation.

Musical_Futures_home_straight_on

 

Musical Futures workshop session

Musical Futures persona workshop

Musical Futures workshop session

Musical Futures persona workshop

Our first step was a workshop with the Musical Futures team, including board members, stakeholders and international partners. Rather than starting with the specifics of the website, we began by talking about audiences.

Together, we created audience ‘personas’. We divided the potential audience into types and identified an individual for each. We gave them a name and a detailed backstory: we focused on their internet use and how familiar they are with technology – whether they’d be using a smartphone on the train, or snatching a moment to check email on an old PC at work.

We talked in particular about their relationship to Musical Futures and how well they know the organisation, or not. We chatted about use of language and the hierarchy of key information that would best meet their needs.

 

MF_personas2

MF_personas3

MF_personas5

MF_personas4

MF_personas1

The great thing about personas is that we can refer back to them throughout the project. Every time we make a decision about navigation, functionality or design, we think about how David or Lucy would respond.

Sam Scott Wood

 

Branding

Concurrent to our work on the site, we were working with Musical Futures to redefine their brand and visual identity.

Their logo had recognition value so we didn’t want to abandon that but we needed to show a significant change into the new organisation. We redrew the logo and reworked the typography, with particular emphasis on a marque that would work well on screen at small sizes.

We also created a unique colour palette, a suite of visual tools and a typographic treatment that would visually tie together all of their communications (everything from conference brochures to guitar plectrums).

MF_Guitar_plectrums

 

Musical_Futures_brand_guidelines_Page_03

Musical Futures brand guidelines

Musical_Futures_brand_guidelines_Page_05

Musical Futures brand guidelines

 

MF_analogue_site-map

Website design

Using all the information gathered from the user personas, a content audit of the current site, analysis of the site analytics and discussion with the team, we identified key content for the new site. We used a site plan to group content areas and develop a structure to meet users’ needs.

site plan for Musical Futures

As we usually do, we began the process with quick-and-dirty marker pens and Post-its. Once we were happy that the structure worked, from the perspective of each persona, we moved on to more refined digital versions.

Wireframes for Musical Futures

Next we developed wireframes – mapping out each page of the site in detail so that we could consider the hierarchy and layout of each page; how content and functionality is organised and positioned.

 

MF_designs_3
 And finally we brought all this together in visual designs for the site. We presented a range of initial approaches to the Musical Futures team, discussing and developing each of these until we selected an overall approach that would best convey the essence of Musical Futures to their audiences.

MF_alldevices

Thank for all your patience and hard work with this. It has been an absolute pleasure to work with you, and I couldn’t
have hoped for a better result.

Abigail D’Amore, Chief Executive, Musical Futures

 

We’re delighted with the final design for the Musical Futures website. Not only does it look good on desktop, tablet and mobile devices, but we have created a clean and clear style for what is actually a complex and content-rich site (with over 200 resources for teachers).

It was a particular pleasure to work with photographer Emile Holba. He perfectly captured the exuberance of a Musical Futures lesson, giving us a great selection of images for our full-screen, home page slide-show.

MF_in_screen_upload

With over 1,000 user registrations in the month since launch, it seems that our process has worked and users are as pleased with the site as our client is.

Have a look at the site and let us know what you think. And, if you’re a music teacher, do consider joining the incredible Musical Futures initiative.

www.musicalfutures.org