The European Union Youth Orchestra (EUYO) organises two tours per year in which talented young musicians get to play with one another in concerts around Europe – unless, that is, their tour was scheduled during a global pandemic and corresponding shut down of travel.

The EUYO approached us about creating an online space where the members of the orchestra could get some sense of community without the need to physically meet each other. They were already using Slack to discuss, Zoom for seminars and meetups and Google Calendar to keep things organised, but all these platforms felt rather disjointed. 

To help we built them a members-only website that allows them to pull together these different strands and present them in a way that gives their users more of a sense of what the tour is doing and offering.

Like most coronavirus related projects (it seems) they needed it very quickly. We agreed to deliver it on Friday 20th March and they needed it up in time for their first all-hands meeting the following Wednesday, so we had three working days to plan, design, build and launch it. We like challenges!

What we built as the minimum viable product

To meet their tight deadline we focussed on getting a “minimum viable product” up and running in a couple of days. This consisted of a very simple but fairy secure login system:

An events calendar with links to their Zoom calls:

The individual events linked through to pages with Zoom joining instructions and credentials:

Phase 2: more sustainable hub

The initial site went down well and the members reported back that it was useful to have a common place to get this information. With the assumptions about the need validated we went on with a second phase of the project. The key priorities for the EUYO from this phase were:

  • Give members an impression of who and where the other members were
  • Promote different types of event including social events and rehearsals
  • Provide a single place where members can download resources such as sheet music, or access recordings of past performances
  • Extend the events to include YouTube “watch alongs” as well as Zoom meetings
  • Make it easier for members to discuss their events and resources

To deliver this we created:

  • a searchable map that lists and locates orchestra members
  • a revamped events page with “live events” and events filterable by category
  • A resources repository that links to downloads or external links
  • A “discuss this on Slack” button to link events and resources to Slack channels

Members page

The members page profiles each of the orchestra members, highlighting them on a map and providing a short bio. Members can search for other members via the section, instrument, location or name.

Filterable events page

It’s important that people don’t miss live events, but there are now dozens of events so people need to be able to filter and search them.

Resources page

Members can access everything from sheet music to recordings of past recitals in a single repository.

Homepage

The homepage provides a “jumping off place” to the other content which gives members a snapshot of what they can do on the site. It’s basically a set of quick links to filters on the events and resources pages.

Technology

Content management

We used WordPress for the main site as it makes it really easy for the EUYO team to manage the content.

Google Calendar integration

We added automated importing of Google Calendar events to help reduce the management workload on the team. We kept things simple and created a process that fetches the calendar events every 15 minutes and compares them to the events already in WordPress. If there are any new events or changes it updates the WordPress events with the start and end times, description and Zoom link (which it extracts from the event description).

Slack integration

I’m still a bit perplexed that I couldn’t do the simple Slack integration that I wanted to. I wanted to essentially embed Slack channels in an iFrame on the EUYO site. For those who don’t know, an iFrame is a box/frame/window on a website that displays a different website inside the box. They used to be very popular but they have a lot of limitations (it really is a window on another website, like a mini-tab inside the main webpage) so you can’t do any interactions between what’s in the iFrame and the main page (at least, not without quite a lot of work). However, because it really is another site, if you’re logged into that site on another tab you can automatically be logged in inside the iFrame. This would be ideal in this use case – people would already be authenticated as their Slack user, and then would be able to see the content of a particular channel, and be able to post as themselves. Basically like blog comments mixed with a forum but powered by Slack.

Anyway, for whatever reason Slack has prevented itself from being embedded in an iFrame, and no-one seems to have made a service that functions as we’d envisaged. There are various services that offer a support Slack-powered chat-style interface for websites but they’re aimed at anonymous users talking to a support team rather than peer-to-peer discussion.

In the end we made a simple integration that allows EUYO admins to create a “Discuss on Slack” button that links either to their main team Slack or a specific channel. It works well and it was a lot less messy than trying to re-implement Slack functionality directly in the website.

Next steps

The site is live and doing its thing and now we’ve got a bit of breathing space we’re thinking about how it could work better for the next tour in the summer.

Some ideas include:

  • Integrating more collaboration tools such as Miro, Google Drive, Next Cloud or even some musical collaborations
  • Work out how it fits in with their main website
  • Polish off the fairly rough edges 
  • Add more granular permissions for specific section of the orchestra or similar
  • Add more peer-to-peer elements to encourage collaboration

In the meantime the EUYO team seem happy with the quick turnaround that will stand their future tours in good stead even when this present crisis is over.

“We went to Outlandish with a real challenge – a completely new webspace to put an EUYO residency for 150 people online in a matter of days in response to COVID-19. And they delivered. Excellent work – good humoured, thoughtful approach and a great result.”

Marshall Marcus, Secretary General, European Union Youth Orchestra