Project OVerview
Aerowaves is a dance organisation working with partners in 33 countries across Europe. Each year they identify the 20 most promising new works by emerging dance artists and then promote it through cross-border performances, this enables these younger choreographers to bring brand new dance to brand new audiences.
We worked with Aerowaves to create a dynamic new website that demonstrates the breadth of their programme and showcase the emerging European choreography talent.
My contribution
As the junior designer I worked across all parts of the project, my main responsibilities were the rollout of the design of the website and creating animated website assets.
My contribution
We began the project by doing comparative research of other dance companies and EU projects, looking at what their sites did well in terms of user experience and information dispersal. The head of the design team also ran workshops with the client to find out about their audience’s needs and created a range of personas that I made sure to consider in my designs.
From this discovery process came the aims of the website:
Clearly showing the breadth of the Aerowaves programme in order to secure EU funding.
Allowing artists to easily submit their work.
Showcasing their current 20 artists and building up an archive.
Highlighting their partners, annual festival and writing programme.
Initial ideas
The council had already done a lot of their own research as part of the bid for the London Borough of Culture including audience types, personas and themes that would flow throughout the year. They also had an existing brand, ‘I am Lewisham’, along with a visual identity that had been used for the bid. They wanted us to evolve that brand into something new whilst keeping the positive, authentic and rough-around-the edges feel of the current brand.
Sketch 1
Sketch 2
As the primary aim was to secure EU funding we knew we had to have an engaging homepage that cleary represents what Aerowaves does. I sketched out some different approaches of how this could be achieved, as well as thinking about different ways to incorporate movement and user interaction. Their old site was very static, and so the client wanted to bring much more movement to the new site.
Sketch 1 - Storytelling Video:
Full-page dance focused hero video for an impactful introduction.
Information presented one section at a time, aiming for clarity for both artists and funders.
Sketch 2 - Artist-Focused Grid:
Interactive grid with images of artists and their works.
Content comes to life upon user interaction.
Sketch 3 - Organizational Cycle Diagram:
Animated diagram showing the program's yearly cycle.
Helping artists and funders to understand the organization's operations.
Sketch 4 - Statistics Emphasis:
Highlighting statistics to impress potential funders.
Demonstrates Aerowaves' engagement across the continent.
Developing ideas
We had a meeting in which we discussed our sketches and the visual styling for the routes we wanted to present to the client.
There was a lot to consider in terms of the look and feel as they did not have any brand guidelines (beyond a logo) so we were free to use any colours, typography, imagery and design elements. In essence, we were updating their brand through the design of this new website, which resulted in each route looking very different.
I developed the homepage designs for two routes, with another being completed by another designer. We also mocked-up the artist detail at this point, so the client could imagine how the design would roll-out across more functional pages.
It didn’t take long before we settled, together, on a single route that felt perfect for them and their audiences. We took their existing logo as a visual motif, and weaved it through the site, tying elements together into a narrative with huge numbers to reinforce the story of collaboration across the continent.
Design and Development
I was then responsible for rolling out the designs in XD, creating a mockup for each block on each template using a series of components. These were then passed on to our developers for building, I worked with them to answer any questions that they had during development of the website, and snagged each template for any visual inconsistencies. I also assisted with the creation and technicalities of the scrolling SVG animations on the homepage, as I had prior experience in this area.
The home page is headed by an atmospheric video featuring multiple artists, intercut to show variety. As the user scrolls down the page, lines animate, follow the user down the page and swirl around the content, tying the different content elements together.
The scrolling line effect works well on mobile. It took a lot of focused collaboration between me and the developer to get this working effectively but it was worth it as these swirling lines have now become a staple of their brand and are used across their social media and print.
As part of the ‘25th Anniversary of Aerowaves’ branding job, I created the confetti animation which sits on the homepage, after the year is over they will be able to switch this off and the line in the background will adjust accordingly.he home page is headed by an atmospheric video featuring multiple artists, intercut to show variety. As the user scrolls down the page, lines animate, follow the user down the page and swirl around the content, tying the different content elements together.
As the lines on the homepage were becoming a core brand asset, I wanted to incorporate this playfullness across the site, but without being as prominent or difficult to build as it is on the homepage. So I designed an animated footer. This is triggered when the user arrives at the end of any page, bringing a sense of fluidity and movement to the more functional templates, without being in the way.
Another way we re-enforced the new, more dynamic visual identity was by focusing on micro-interactions. These small considerations bring little moments of delight to the user. For example, the hamburger menu is a custom built SVG animation. This gently transforms into a cross when the user clicks on it, mirroring the style of the lines on the homepage.
Partners Page
The partners page was designed so that users would see Aerowaves reach, but also find out about each of their partners. An interactive map works well to do this, but users can also switch to ‘grid view’ which lists the partners alphabetically, which is more helpful for a certain type of user, for example a dance producer who is looking for information on a specific partner. The grid view is also particularly useful on mobile, where maps can prove a bit harder to navigate.
Artist Listing
The artists listing page was designed to showcase the 20 artists for the current year. It was important that no one artist was given prominence over another so an alphabetised grid works well here. Users can easily navigate to previous years by using a dropdown.
The site uses wordpress as its CMS and whole site is built around a hugely flexible grid. When designing the artist detail page I had to be mindful that the client would have varying amounts of content for each artist so the design had to be flexible in that regard and not ever look empty or incomplete. My using a modular approach of ‘blocks’ that they can add or take away the pages can accommodate a wide variety of content whilst being both consistently structured and fluid in their feel.
At the end of the page there is a link to the next artist in the grid, removing the need for the user to go back to the listing page and making it much easier to browse
Artist Listing
Screenshots of the clients actual content, showing how the flexible the design is.
Overview
Overall we delivered a great site that evolved the brand and better showcased their dynamic range of works. The site does well at conveying the different aspects of Aerowaves and the client was able to secure their funding.
This was the first website I worked on at the agency and it was a fascinating process from start to finish, using the UX/UI skills I learned at university but having to consider at all times the clients perspective and build practicalities, as well as designing for ever changing content. The questions the developers asked me during the build really helped me learn where I could be more clear in future designs.
The site had a large number of templates, so the biggest learning curve was how to design each one so that it is consistent with the overall style, but with different functionality. I also learned a lot about best practice within design files and how to manage a large number of components and templates.