Distrakt
+44 (0) 121 212 9737 / team@substrakt.com
© 2017 Substrakt Registered in England. Company no. 5916054

Setting The Stage on The Bridge Theatre website

June 14, 2017

Often the projects we work on are taking place against the backdrop of (or sometimes concurrently to) a rebrand. This will usually involve a separate branding agency, on the recently launched Bridge Theatre project that agency was koto. In this post we outline how we worked with koto to develop the brand for digital implementation and our approach to the design of the site and the front-end build.

Rarely do you get the chance to work with a brand new organisation. The blank canvas that The Bridge Theatre project offered everyone involved was exhilarating. As we’ve written previously, the way in which the team at The Bridge embraced this challenge was a joy to work with.

We’ve been fortunate that with the big rebrand projects our sites have been involved with (namely English National Opera, Birmingham Hippodrome, Snape Maltings and now also The Bridge) the branding agencies involved have been very open to working collaboratively. We worked closely with koto as they developed their concepts so we could ensure that whatever was developed could be just as strongly and appropriately applied online via the website as it could in print, outdoor, signage or any of the other multiple applications that branded assets find themselves.

Websites make different (and we’d argue more complex) demands of brand assets than more traditional deployments. A website is not a poster. A user can actively engage with a website and the website should respond accordingly; a website will be delivered over 100s of devices at 1000s of different resolutions. No-one is ever going to create variations of the brand assets to be delivered perfectly in every possible permutation (ain’t nobody got time for that) but you need to ensure the brand is being delivered properly and robustly in all scenarios. On the flip side the web also offers us the chance to do some different and interesting things with assets that wouldn’t be possible in print or on other channels.

“In creating the new identity for The Bridge we had a few key eventual destinations in mind. One of the most important being the world of digital. With the website Substrakt have really brought the depth and dynamism that’s a key aspect of the brand to life. Through our open collaboration and mutual respect they’ve created a great output which really respects our work in the digital space.”

— James Greenfield, Creative Director – koto

Beam

The main brand device that koto developed is referred to as ‘Beam’ (you can read more about that on koto’s site here https://www.studiokoto.co/project/bridge-theatre/#4). This device was designed to be the centrepoint of the entire visual identity.

Given its importance we have deployed it at a variety of moments in the user journey, from more static use as a background image to using an animated version in some on:hover interactions and loading elements.

The Stage

The design system koto had set out was aptly named ‘The Stage’ – It detailed how artwork would be built up from a set of layers.

The layers were:

  1. Backdrop Colour

A solid / gradient colour as the background to the stage.

  1. Main Image

Either full bleed or isolated.

  1. Prop Layer 1

An isolated set of objects that sit atop the main image.

  1. Text Layer

The main type treatment of the artwork – the show title etc.

  1. Prop Layer 2

A secondary set of isolated objects that sit on top all other layers, including the type.

As soon as we saw this system we had ideas about how we could achieve this online. We saw each layer as an html element, with different z-index values. We would then be free to animate and move these layers independently of one another, creating visual interest and depth.

On the homepage we locked the image layer in a fixed position, whilst the titles and content scrolled over and revealed the next section.

On single show pages we used a subtle parallax effect on the individual layers, tracked to both the movement of the mouse cursor and the movement of mobile devices that include a gyroscope / motion detection hardware (similar to the effect you’d see on the home-screen background when you tilt an iPhone).

The example below shows how we put these layers together. Click the button to toggle a 3D view.

Typography

Screens get bigger, internet speeds get faster, 360 video happens, VR is introduced. But the web is still mostly text. Therefore typography is important.

Italian Plate No.2 by Playtype was used for large headlines and show titles. Canela was initially suggested for body copy, however after some on-screen testing it was decided a third typeface, Google’s Roboto, would be used for body copy on screens. We retained the use of Canela for smaller headings.

When selecting type it’s worth testing your choices on multiple screens, especially those with thin hairline stems and high stroke contrast, as they often don’t hold up well on standard pixel density screens, becoming blurry and difficult to read at smaller sizes.

A balancing act – show pages

Striking the balance between ensuring impact of the ‘stage’ artwork and enabling the user to find the information/carry out the tasks they’re there for is always a challenge.

Often when carrying out user research at the start of a project we will hear again and again that people are irritated by ‘unnecessarily large’ imagery ‘getting in the way’ of what they’re trying to do (see also: autoplaying videos, popups and other things that just get in the user’s way).

Through relatively simple UI devices such as jump nav and sticky headers we have ensured that it is always clear and straight-forward to the user how to move around the site and achieve their goals.

Getting these fundamentals in place then gives us slightly more space to explore how best to achieve the maximum impact for the brilliant artwork that koto have developed.

This is achieved not just through physical size but through utilising the options presented to us through ‘The Stage’ so that the user is presented with something more than ‘just a big picture’.

This was even more important given the likelihood that the majority of traffic would be coming from mobile devices, simply making an image as big as you can is still not going to make it especially interesting on a small(er) screen so you need to look to employ other techniques that these devices make possible (such as leaning on the subtle gyroscope-triggered movements that we mentioned above).

Performance, FPS, and Jank

This is the least sexy but arguably most important aspect of the site’s design. From the outset the team at The Bridge were clear that the speed of the site was key, and we agree. The volume of research showing the impact that the perception of (and actual) site performance has on a) a user’s perception of a brand and b) conversion rates is fairly irrefutable as this article from Denys Mishunov outlines (“Why Perceived Performance Matters, Part 1: The Perception Of Time”), as does this article from Brian Jackson (“Perceived Performance – Don’t Forget the User”), these case studies from Zuzana Padychova at Hubspot (“How Page Load Time Affects Conversion Rates: 12 Case Studies”), this (old) infographic from Kissmetrics and this white paper from goMez (“Why Web Performance Matters: Is Your Site Driving Customers Away?”).

Whilst we were very keen to animate the layers of the ‘Stage’, we didn’t want to introduce any jank (“Jank is any stuttering, juddering or just plain halting that users see when a site or app isn’t keeping up with the refresh rate. Jank is the result of frames taking too long for a browser to make, and it negatively impacts your users and how they experience your site or app.” – http://jankfree.org).

We investigated the most performant ways of achieving the animation effects we wanted, this article from Paul Lewis and Paul Irish highlights how ‘cheaply’ browsers can animate position, scale, rotation and opacity.

For example, on the homepage it would have been easy to use a background-attachment: fixed; property on the image layers we wanted to remain fixed, however in testing we noticed that having a fixed background attachment triggers lots of repaints as the user scrolls, resulting in a low page FPS (Frames per Second) rate, which leads to the feeling of jank.

We found various people had come across similar issues (this article from Chris Ruppel outlines a similar problem). Unfortunately most fixes that people had arrived at only concerned themselves with a single fixed element with page scrolling atop, rather than multiple elements, each rolling into one another.

Undeterred, we continued to investigate. We finally came across a solution that rather than using position: fixed; pseudo element, uses a clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); as a container for the fixed element, which allowed us to achieve the effect we intended, without jank. Side effects were that we needed to fix the issue cross-browser, but once we’d sorted those, we were happy.

On the production pages themselves we wanted a subtle pointer-tracking parallax animation, but again we did not want to suffer a performance hit. We made sure that any animations lent on the four ‘cheap’ animation properties mentioned above i.e. position, scale, rotation and opacity.

As for the layered assets themselves, we were keen to keep each layer as light as possible. We ran each layer through some aggressive image optimisation settings. We used SVG for text which kept those layers both small and crisp at all sizes.

Our prop layers were all objects isolated on a transparent background. Transparent backgrounds mean the need for transparent pngs, which are considerably larger in filesize than flat colour images. We looked at using a jpg where the objects were on a white background, then using a `mix-blend-mode` in CSS (more info on that technique here) to blend the layer over it’s background, similar to how you would use blend mode layers in Photoshop / Sketch. We soon found that blend modes in CSS are resource intensive on the browser, so soon noticed yet more jank. Support for them across browsers is also patchy (as you can see on the ever-helpful caniuse.com here). As such we had to revert to well optimised pngs.

Multifaceted search

The most technically demanding part of the site was building the ‘performance picker’ (which we’ve written about in more detail here), and this also provided one of the most complex design challenges. How do you step a user through a scenario in which they could be confronted with lots and lots of options in a way that doesn’t feel overwhelming but still provides the level of specificity the user is looking for.

Taking inspiration from sites such as Google’s homepage, Virgin America, along with recent research showing that forms with fewer, and more specific sections see greater completion rates, we decided to break the user journey down into discrete steps so that the user was only being asked to do one thing (or very few, related things) at a time.

This also meant that we could look to optimise performance and provide relevant and specific feedback to the user at each point in the journey. (More on this in this Smashing Magazine article and this post on the GDS blog ).

Conclusions

So, what have we learned?

Meaningful delivery of a new brand online requires channel-specific thinking

The web presents specific and unique demands and your brand needs to be considered in that context. Trying to replicate a poster as a website won’t work

Doing clever things in an appropriate way is hard

As developers it is easy to get carried away with the ‘thrill of the new’, but it’s key to only deploy new techniques where appropriate and in a considered way.

Performance is key

A site can look beautiful, but if it’s taking 20 seconds to load a page then it is totally useless. You need to be able to deliver engaging, beautiful experiences quickly. More than that, they need to feel quick,

Collaboration is king

Working on projects with multiple stakeholders and numerous other suppliers means you have to be collaborative. Any other approach will quickly end in tears. Luckily with this project we have worked with other suppliers (Spektrix, koto and One Further among others) who love working in this way and it has meant we’ve all been able to do our best work as a result.

Open-minded clients are a godsend

Pretty much every brief we receive has aspirations to be innovative and work towards best practice, very few projects ultimately end up achieving this. Whether that’s due to external pressure, internal processes or a lack of resources. Working with The Bridge has been great from day 1, they question everything (in an intelligent and open-minded way) and are always willing to be guided towards the best way of doing something. We’re really looking forward to continuing to work with them.

James Braithwaite