Long term client projects, no matter how enjoyable, can burn out even the most hardy creatives.
According to iStock, this is what office burnout looks like:
Urgh. Rubbish.
In order to recharge after a busy period last year, a few designers and developers here at Fiasco were handed a week to take time out from client briefs and do something totally different – a mini creative sabbatical if you will. There would be no brief as such, just the aim to spend the week flexing our creative muscles by designing something for ourselves.
Finding a subject
We started by kicking around a few ideas – from digital drum machines to interactive dance parties, however we felt drawn to creating something with a little more weight and meaning.
We narrowed our focus and decided to explore the art of interactive digital storytelling. And, with a very limited amount of time to play with, the question became this – could we use basic web-based technologies and low poly 3D animation to bring a short story to life?
At this point we turned to the work of Pete Rollins – writer, philosopher, storyteller and Fiasco Design muse. His parable ‘New Life’ tells the story of a Mother’s journey through grief, having lost her child only a few months after birth. It’s a tragic but touching story of loss and coming to terms with a sad, but universal part of life.
All hands on deck
This was our first foray into a 3D animation project of this scale. To begin with we asked our Head of Creative, Tom – a keen public speaker, to define the pace of the storytelling and work on the flow of the narrative; whilst drawing upon the artistic skills of our Account Executive, Marj to illustrate the storyboards. Our Designer Ben tinkered with music production to add depth and a sense of drama to the experience. Creative Technologist Nick tied everything together, developing a neat digital platform, as well animating the New Life titles created by our Designer Jules. If a member of the studio wasn’t directly hands on with the project, they were certainly involved with reviews and helping guide the direction. It was a solid team effort.
Storyboards from our Account Exec Marj ✏️
Look and feel
With the storyboards complete, we moved into design and looked for inspiration from the low poly design of computer game Inside. In particular we enjoyed the use of light, shadows and a stripped back colour palette, to create an eerie environment and sombre tone.
With limited time our main character was to be a very simple, with a fairly abstract form. Also, a pared back design would detract less from the written word, as well as helping to speed up the render process.
Some early initial sketches of our heroine
The crude character rig – the equivalent of the mechanical skeleton inside of Wallace and Gromit plasticine figures – was created quickly in order for us to easily model the various poses and movements we needed to to achieve throughout the story.
Staying true to the storyboards
Working closely with the storyboards helped to drastically speed up our design process. You can see below how a few of stills from the final animation compared to the original sketches supplied by Marj.
Scene 1
Scene 6
Connecting with the user
We felt that by requiring user interaction to progress through the narrative, it would help immerse the viewer into the story, and hopefully form a deeper connection to the message.
Along with visual cues, we also played with adjusting the sound heard after each button is clicked, creating more hopeful sounding notes for certain parts of the story and more sombre sounds for others.
Keeping the code simple
With such a quick turn around we knew we needed to try and keep things super simple.
The main interactive layer was made with a number of buttons that could be clicked. The rest of the site uses a few non-interactive layers to add the text, additional animations from bodymovin and canvas elements to add texture and depth.
The main development challenge was how to handle the looping sounds, mouse interactions and large video files whilst keeping the pace feeling smooth. A lot of timing functions and a little math went into manually coding the text layers and delaying videos to ensure they played in time with each other.
The code may not be that beautiful to look at, but we think the end result certainly is.
Team work makes the dream work.
The soundtrack
The basic musical score and ambient interaction sounds were created in Ableton. These are laid over the constant drone track that helps paint an unsettled atmosphere.
Ambient Sounds 👆
The final scene required a slightly more emotional piece of music, so we created a short piano piece to accompany the final animation.
Piano Piece for Final Scene 👆
Summary
Spread out over a week, we treated the project with the same level of professionalism as we do our commercial work – with daily design sprints, stand-ups, crits and reviews, and the creation of quick prototypes.
We thoroughly enjoyed every minute, relishing the opportunity to work fast and stay focussed, whilst flexing new creative muscles. For us, this is what side projects like these are all about – exploring creative pursuits and interests, evolving our skill sets and promoting the talents and energy of the studio.
To experience the New Life story click here. Alternatively, if you want to read any more about the project, visit our case study here.
