The Royal Opera House wanted to update their website to better reflect their brand vision & be in-line with the quality of their print work. As their site is vast, with many moving parts, it was decided that building a design system was the right approach so that a digital blueprint could be created for the company going forward. This was also a good opportunity to solve current experience issues, visual inconsistencies & allow the move to a fully responsive site.
Existing Website Audit & Starting Point
The first step was to do an audit of the website to create an archive of components, styles & assets to be able to pinpoint all of the issues. The main issues were multiple versions of
the same components & inconsistent styling. Together these create points of confusing user experience. The components were consolidated down into a much smaller list, with what pages they affect, how complex they were & how flexibility could be applied to keep the number of components as small as possible. These components were then split down into two groups - ones which are used in a lot of places & would live within the design system, & ones which are only used in a single place would inherit the design system, but needed to be redesigned as part of this project.

Building New Foundations From Scratch
Following the audit, the main issues were easy to spot & outlined. As a new visual approach had been decided upon prior to this project, it meant that the design system could be started from scratch, & all styling on the existing site did not need to be considered. Starting from the core foundations, a new approach to grid, breakpoints & spacing was created from scratch to allow for a fully responsive approach. Alongside this, new rules for typography, colour, icons & image were developed. Foundational components in buttons, tabs, input fields & selection tools were also created from scratch as a base for the complex components.
Creating Consistency & Flexibility
While the website is large in number of pages, there is a lot of repeating types of content, meaning the number of components could be reduced right down & genericised, with fields that could be turned on or off depending on use-case. With all Event-related components, colour themes for On-Stage, Stream & Cinema were taken into account so this could simply be a variable. From the website audit, it also made it clear where components could be swapped out for new ones, showing that a roll-out of the design system could affect many pages in one go, making for an easier process in the long-run.
Designing Responsively
One of the existing problems of the current website was some of the UX issues on mobile & tablet. With the introduction of a new grid & breakpoints to cater to the main aim of having
a full-bleed responsive site, it meant that components could be completely redesigned for each breakpoint so to get the best experience possible. With the new grid, it meant these components moved seamlessly through the different screen sizes, no matter what device a user was looking on.
Completed at Ostmodern.
Back to Top