Capturing the Classic ‘Aardman Wonk’ Through UX
Legendary Bristol-based animation company Aardman has a lot to put in its shop window. From blockbuster successes like ‘Chicken Run’ to the BBC’s recent charming stop-motion ‘Things We Love’ spots, there’s something for anyone to fall in love with in its output.
Which made the chance to work with the company – to relaunch its brand website and a number of its fan sites – hard to resist for Bristol marketing and technology agency true digital.
Having won a competitive pitch for the project the team at true has been working with Aardman for around two years to capture the essence of the company and its beloved brands, from ‘Wallace and Gromit’ to ‘Shaun the Sheep’ to ‘Morph’.
The finished websites showcase the stories behind each of Aardman’s beloved animations, its characters and the general ‘wonk’ of the company – for both a B2B and B2C audience.
LBB catches up with true creative director Nick Horne to hear about the process and the decisions along the way.
LBB> How did Aardman and true start working together to begin with? What was the brief and what were Aardman's priorities?
Nick> The brief for this project came in as a competitive pitch. Aardman was mid-re-brand with its internal team and wanted a partner who was able to bring that brand to life online. They felt very strongly that the internet was becoming more and more homogenised through templated design, and a focus on frictionless journeys over brand experience, and for them it was essential that they had a partner who could help make the Aardman.com experience feel distinct in the space.
They needed what was essentially a B2B website to sell what they do to partners but with a huge range and depth of expertise across TV, movies, advertising, console games, theme park attractions and more we had to find ways to simplify journeys through the website. And at the same time, use the site as a shop window to help people feel what Aardman do as much as see what they do.
LBB> What were your initial thoughts on which things would need work to get just right?
Nick> We knew immediately that craft would be key. The website would need to be as rich, playful, textural, fun and intelligent as the work Aardman are now famous for.
On top of that Aardman had in recent years gone fully employee-owned. This was a move that was reflective of the impact of the human touch on Aardman’s rise, in the literal sense of the fingerprints in clay models but also in terms of the classic notion that any service business is fundamentally built on the deep expertise of its employees. As such, a key part of the brief was also to create a website that helped paint the picture of the people behind the works as well as what landed on the screen.
This gave us a clear structure at the core of our brief: the product differentiation would be provided by video content displaying case studies but also importantly through rich experience design, with playful interactions and visual treatment, to allow people to feel Aardman’s craft, and understand their world-building and characterisation skills.
At the same time, the content design had to carry the weight of the company differentiation; how Aardman is to work for and to work with, bringing to life the human side of the business, as well as importantly giving you a clear idea of who and how to contact them to kick-off a new piece of work.
LBB> How did you figure out what users would want from these websites? And how did your design respond to those needs?
Nick> Right at the outset of the project, we interviewed several users representing key personas/customers of Aardman’s different business sections to gain a better understanding of what they were looking for and how they used websites in the purchase journey. Given the fact this was a primarily B2B website, we focussed on employees of the various types of businesses likely to work with Aardman as a partner, from TV and online programming channels to ad agencies and marketers.
We gained a number of key insights, particularly into niche business areas, but the overriding themes pointed to the fact they were all time poor and needed clear signposting and key signifiers that they had delivered similar projects previously as well as helping them navigate the key question of whom to contact.
This all meant that whilst the experience could and should feel quite exploratory, the structure, navigation, and IA [information architecture] of the site should be kept very simple and direct.
LBB> In terms of aesthetics, where were you guided by the Aardman creative output and where did you have freedom?
Nick> In the end, the line was really blurred due to the collaboration between our team and theirs. The internal team led by Gavin Strange had developed extensive guidelines and a toolkit when we got involved at the pitch stage, however, the way in which we implemented them for digital added another level to what could be done with their brand.
And importantly Gav was really open to conversation and play, there were elements such as the use of colour where the digital platform demanded alternate uses for things such as rollover states, or where we wanted to introduce different type scales and use of outline fonts to offer greater depth and variety across the pages. We were lucky to have a client who was open and willing to explore how we could push this. We spent a fair few hours working between our studio and theirs to find the perfect balance and overcome some thorny design issues.
However, the place in which I’m particularly proud of our design contribution is in the motion and interaction design on the site.
The new brand celebrated what they call the ‘Aardman wonk’; their British quirkiness and irreverence. We manifested this through a series of touches in the interaction design. Primarily through the ‘wonk drop’ which characterises the beginning and end of each content block on the site, where-by the line drops like a fallen picture frame, to deliver a slightly off-centre comedic feel as you scroll. You’ll then discover this in the way content cards tip slightly on rollover, or the elastic way in which the pagination dots morph as you drag through the carousels. You’ll discover more and more of these simple touches of movement right across the site as you interact. It stitches the Aardman level of characterisation and craft right through the digital experience and is indicative of the level of consideration they put into every detail of their work.
As mentioned before, for me, this was essential in telling a story you can’t tell through words alone, at least not in a way that feels believable and authentic. But each and every user leaves having got that feel in bucket loads just from the experience itself.
LBB> How did you source, choose and curate the right content for the sites, and present them in the right way?
Nick> In terms of the content design, a lot of this was considered in the original UX thinking. We designed specific blocks to deliver certain types of content, and specific assets were often considered in this process, so the bones of the content had guidance from the beginning.
However, the website was designed to have as much flexibility as possible to allow for the growth and continued change in the shape of the Aardman business. To achieve this, we took a fully component-based CMS build, which allows the content editors at Aardman to not only change the content in the blocks but to also re-configure the hierarchy of the pages. An approach that is very complex to achieve when coupled with the interaction design elements we talked about previously. To have all this flexibility yet not break some of those interactions was a massive technical challenge.
However, it’s this approach that allows the site to stay alive and grow with the business, and also importantly allows them to re-use many of the same blocks and technical build to then create uniquely branded fan sites for each of their key IPs such as shaunthesheep.com or lloydoftheflies.tv. All are unique, but all are built on the same CMS.
Not only did this allow for this flexibility from day one, but it means that content-wise we can adapt and optimise the site continuously. Since the original launch we have carried out regular analytics reviews to look into where improvements and tweaks can be made to further enhance the value Aardman gets out of the site from a lead generation perspective and also to improve the experience of users.
LBB> There's loads of detail. You could spend hours on the websites. What is your favourite part?
Nick> For me it’s got to be the floating CTA blob: the one you see as the play button over video blocks, or as the drag me CTA on carousels. I love its wibbly wobbly clay-like motion, it feels so tactile, so uniquely Aardman. But also, I love the fact that as you move it around with your cursor your movements affect its motion, speeding up and shifting the direction of its wibbles and wobbles. It’s like a little Easter egg of playfulness in something that could so easily have been a very standard semi-opaque white triangle. Why have standards when you can throw in that level of joy?
LBB> How have people responded?
Nick> The site has been very well received, importantly internally at Aardman as an employee-owned company the feedback has been overwhelmingly positive, with staff feeling it offers a much more rounded representation of the company. It’s also picked up a number of industry awards and accolades, a measure normally taken with a pinch of salt; however, in this case, the judges are also likely to be potential customers and users.
