New Life: A Week Long Creative Experiment in Storytelling

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


Warning: Undefined variable $postID in /www/fiascodesign_482/public/wp-content/themes/fd/parts/old-post-content.php on line 58
Gradvice: The Do's and Don'ts When Contacting Design Agencies

3 Mins

Gradvice: The Do’s and Don’ts When Contacting Design AgenciesFollowing on from our first Gradvice piece – Advice from the FD team on how to land your first job – for our second instalment we have collated a useful list of items that we would encourage, and discourage, when contacting design agencies. First up… The Do’s ☺ Find the name of someone appropriate within […]

7 Mins

Gradvice: Advice from the FD team on how to land your first jobIn the first of a three part series, we’ve banged our heads together to come up with – what we hope will be – useful advice for new grads – Gradvice™️ if you will. To kick things off, we’ve collected some sage words of advice from the FD team on landing your first job in […]

Communication Arts webpicks: The Future of Sustainability

2 Mins

Communication Arts webpicks: The Future of SustainabilityThe immersive digital version of non-profit Forum for the Future’s annual publication conveys the sustainability challenges our planet faces. Responses by Hayley Yates, account manager, Tom Morris, partner/head of creative and Nick Lewis, creative technologist, Fiasco Design Background: We designed this site to provide users with an impactful and shareable digital version of international sustainability non-profit Forum for […]

Communication Arts webpicks: Hereford College of Arts

2 Mins

Communication Arts webpicks: Hereford College of ArtsTextured visuals and large-scale photography fold together in Hereford College of Arts’ new site. Responses by Ben Steers, cofounder/creative director, Nick Lewis, creative technologist/web developer and Marjorie Newnham, account executive, Fiasco Design. Background: The purpose of the site is to inspire prospective students (and their parents) by showcasing the stories and the work produced by the Hereford […]

Our CD Ben Steers speaks to Creative Boom about the Fiasco journey and our recent rebrand 4

8 Mins

Our CD Ben Steers speaks to Creative Boom about the Fiasco journey and our recent rebrandGoing freelance is always challenging. It was something many of us did after the global recession 10 years ago. Some out of necessity, as jobs were few and far between. Others because there was so much opportunity to do so. Many of us went on to build successful agencies. One such individual is Ben Steers, […]