02. The Mill by Studio Output
You may not have heard of The Mill, but you’ll certainly have seen a lot of its work. A production house headquartered in London, with offices in the US and India. The Mill works on visual effects, moving image, design and digital projects for the advertising, games, music and film industries.
The very first British studio to win a VFX Oscar (for its work on Gladiator in 2001), it’s gone on to be awarded over 1000 times, including multiple Cannes Lions, an array of D&AD Pencils, APAs, British Arrows, AICP's, CLIOS and VES Statues, to name a few. It has a particular special place in the heart of British sci-fi fans, for its work creating special effects for the modern series of Doctor Who (2005-2013), as well as Torchwood, The Sarah Jane Adventures, Merlin and Demons; while its high-end commercials make it a favourite of global brands such as McDonalds, BMW, Sony PlayStation, Ford and Amazon.
With such a pedigree, The Mill’s new website had to be something pretty special. Johanna Drewe, Sam Hodges and Jens Meijer of London design agency Studio Output explains how they came up with a bold idea they dubbed “the infinite canvas”, to achieve exactly that.
Was The Mill a new client for you?
JD: Although we hadn’t worked with The Mill before, their VP of global marketing, Mark Hardy, has been a client of ours many times. We’ve delivered digital and brand projects together for Sony PlayStation, Sony Music, Syco Entertainment and Viber, so Mark knew our experience was what the project needed.
What was the brief?
SH: The Mill challenged us to make a brave creative statement – to ‘show, not tell’ their ethos through a memorable experience. They chose our boldest response: the infinite canvas. It’s an immersive tapestry of moving content, which users explore in a tactile way that puts them in control, because the movement is defined by their input. They can decide how fast to scan content, what to focus on and when to dive in. Rather than a gimmick, the canvas is the main navigation on the home, ‘Watch’ and ‘Experience’ pages.
How did you develop the idea of the infinite canvas?
JM: Sam created a linear video mock-up of how the canvas would work, which helped us understand his thinking. We could dive straight into prototyping, bringing the demo to life interactively and balancing creative impact with performance requirements. We investigated different ‘packing’ strategies to auto-generate the pseudo-random layouts based on varying inputs. But a full dynamically driven solution wasn’t essential, and it was better to have some manual control over the layouts.
JD: Each time we solved a challenge, there was another to overcome. We started designing in a static world with full control over layering and how you imagine it moving. Then we went up a level to prove it’s actually a nice immersive experience, by demonstrating it in After Effects to the stakeholders. The next challenge was to create that experience in a user-controlled environment, and get it working across devices.
SH: It’s rare for a client to push to be that brave. We had full confidence we could do it, but there’s always risk involved when you’re doing something new. You have to find different ways of doing things.
What tools and technologies did you use?
JM: We created a workflow that allowed us to export layout data from a composition in After Effects using the BodyMovin plugin. The designers could iterate on the layout options in a completely visual way, testing different designs interactively until they were happy. Each iteration was performance tested, to check the balance between moving image and still assets.
The site needed to drive new enquiries and leads to The Mill, right? How did you promote this?
SH: Yes, that was the whole point from day one. The Mill’s desire for a new kind of enquiry led to them to unify their offer as a business, and the site redesign essentially carries this out. A ‘contact’ call to action exists at the bottom of every page, and it’s not just generic text – wherever possible it’s tailored to what you’re viewing. This was about delivering the marketing message at the right time, in the right way. Our SEO partner optimised the site for search, so it’s already working hard to generate new leads.
How did you develop the microcopy?
JD: The manifesto and case study copy came from Mark and his team, and we knew this persuasive language would be important to how people experience The Mill. This copy isn’t just the voice of the site, it’s also a way to navigate. The client was keen to strip out visual clutter without harming usability, so we devised the idea that you could navigate the site through text, with clickable words replacing obvious buttons.
How did you choose between static and moving content?
SH: We decided to have some static and some moving content, partly from a load perspective but also not to overwhelm people. That was something that came through in prototyping.
JM: The ambition was to create a rich and dynamic experience, with multiple video assets and interactively driven movement, but it needed to run well on a variety of devices. Another technical challenge was how to cater for interaction on mobile. As the canvas module would exist at the top of pages, we needed to make sure the user could still scroll down to see content further down the page. If a horizontal gesture was detected we prevented the default behaviour, leaving vertical gestures for the browser to interpret as normal.
What did you learn from this project?
SH: For this type of build, we’ve realised the importance of getting motion and prototyping in early. Static visuals only did so much and the client teams had to see high-fidelity prototypes to feel completely comfortable. You need to hold people’s hands when you’re doing something different, to help them understand the risk and reward.
What's the secret to building a VFX studio website?
JD: If, as in this case, your product truth is ‘visionary creative solutions’, the site itself has to be exactly that. But it must be effective. It’s one thing to create an immersive experience that represents the business, but it also needs to direct people in the right way and generate enquiries. It can’t just be a toy.
SH: The framework here was brave and original. You build reassurance and trust through craft, which is often cut from a client’s scope because they don’t want to pay for it, but this project shows it’s really important to add that bit of magic. The value of creativity shouldn’t be seen as a luxury, it’s how you solve business challenges. The medium is the message!
Next page: Discover more of the best website designs of 2020...