Responses by Whitespace.
Background: The objective of the site is to attract the next generation of musicians from around the world during this transformational moment in time. This site acts as a digital portal into life at the Royal Academy of Music, London. It showcases the passion, talent and energy that comes through its doors. Coinciding with the introduction of the Academy’s new branding by Johnson Banks, the site’s launch together acted as a transformational moment in time, updating this heritage brand for the future. The site is primarily aimed at students but also speaks to an older demographic, including parents, alumni and stakeholders.
Design core: The design is clean and reductive while also ensuring elevated details to create a contemporary, youthful feel. A limited palette of black, white and red has been applied throughout, an approach that encouraged consistency and made us carefully consider how each element works together.
The homepage offers a rich, immersive look into the Academy. As you begin your journey with an introductory film, created by Johnson Banks and design and photography studio Roscoe Rutter, you feel as though you are experiencing day-to-day life at the Academy. This film has been carefully edited to create a full-screen experience on mobile and exudes sound as you journey through the rest of the page.
Navigating through the pages, black-and-white photography sets a sophisticated tone, mixing with full-color imagery to bring areas of the site to life. As you reach the Alumni section, you can see a rich animated wall of incredible artists that have walked the Academy’s corridors in previous times. Throughout the site, small micro animations improve the pathways through certain tasks, giving clarity to navigation.
Process: This was a huge project, and the scale of this site made us keenly aware of timings on the project. We originally created the designs in Sketch; however, during this project, the agency moved to Figma. If we had used this from the start, it may have made collaboration across teams easier at times during the process.
Balancing the requirements of a varied stakeholder team while also delivering a functional content platform proved to be a challenge. The same content is reused in many different contexts. Creating a design-driven content repository enables content editors to tell the stories of the academy and also meet the more functional needs of students searching for information, with tools such as course finder, course-lookup tools and site search. We used long-form, print-style layouts for text-heavy pages, while keeping tools such as course finder quick and to the point. All of this was powered from the same content, reducing any data entry overhead and saving precious time for content editors.
From a purely technical point of view, the main navigation and “mega-menu” were pretty challenging. We had pushed things with the design and also had to meet Web Content Accessibility Guidelines, as the client is a higher education establishment. Across the site, we were constantly balancing the drive to push the design envelope against the functional and accessible parameters. Throughout this project, we learned internal discussions about what is best for the project can be just as challenging as any client-facing conversations, especially on such an emotive subject as music.
Technology: The site is built in Craft CMS, which runs on a PHP and MySQL stack hosted on Amazon Web Services and deployed using Capistrano. The front-end build was constructed in Storybook, which was also used for accessibility testing. Webpack, SASS and Babel/ES6 were all used in the build process.