Parts of the Process — How Toaster developed a Progressive Web App for the Natural History Museum, inspiring kids to get outside

Posted 02 August 2018 Interview by Laura Snoad

It might seem a contradictory concept at first – an app that encourages kids to get outside and learn about nature, but Toaster’s Progressive Web App for Natural History Museum, Dippy’s Naturenauts, does just that. Harnessing the functionality of a smartphone, the app sparks youngsters’ excitement for trees, plants and animals found in their backyard, plus an immersive story featuring the museum’s iconic ‘Dippy’ (a 32m-long plaster-cast diplodocus). It was a cross-discipline project where Toaster’s three strands – strategy, creative, and technology – came into play, together with emerging technologies. Here executive creative director Jake Cooper and partnerships director Ben Cheston reveal why they chose to build a Progressive Web App rather than a native equivalent, how the illustration work was created entirely in-house, plus the complex steps of an official tender process.

Client

Natural History Museum

Team

Executive creative director: Jake Cooper
Creative lead with UX and UI design: Jon Burrow
Partnerships director: Ben Cheston
Strategy: Zanya Fahy
Illustration and character design: Lisa Juquet
Copywriting: Chris Boys
Design Support: Phil Wayer
Technology Lead: Stuart Collett
Lead developer: Marco Ciampini
Front end developers: Ian Huntington, Liam Brummit
Back end developer: Dominic Santos
Technical Quality Assurance and Testing: Priya Thomson
Technical Oversight: Davy McGeorge
Head of Production: Alex Birch
Senior Producer: Sean Simone

Brief

Create a digital experience that encourages children to interact with the natural world.

Toaster’s website

Project background

The Natural History Museum’s first email was to our ‘[email protected]’ address, rather than through an existing relationship. We received an official RFP [request for proposal] process (also called a tender) through a portal that the Natural History Museum uses to manage all its tenders. A typical tender process involves a client inviting several studios to provide a documented response to a brief and then usually inviting them to pitch or present.

A showreel of Toaster’s previous work

Interacting with Nature via Tech

At the time that the team got in touch, it was a big moment for the Natural History Museum, as their iconic 32m-long cast of a diplodocus, called ‘Dippy’, was about to go on tour around the country, starting in April. As part of this, the client wanted to launch a wider campaign to connect children with nature. 

The idea was based on research into how kids have become alienated from the natural world. Because of technology and changing life behaviour, some kids just don’t get outside and lack awareness – from not understanding where dairy and meat comes from, to not being able to recognise very common British species. The conceptual genesis was a quote from David Attenborough, who said, “People won’t preserve what they don’t care about, and people won’t care about what they haven’t experienced.” The brief in essence was to create a digital experience that would help children create a direct emotional experience with their immediate natural world.

Dippy in the Natural History Museum

Natural History Museum’s video introducing Dippy on tour across the UK

Digesting the Brief

We will start a job by reviewing the project, in this case with the senior members that the brief relates to. This was reviewed across the business, so this stage included our technical director, creative director, strategy director and head of production. We’ll asses the RFP response plan and then we will deploy a process accordingly. Tenders are often written in a certain way so our usual first step, after that team review, is to ask our strategy director to create a brief that the creative and technical team can work from.

The way we typically work at Toaster is to bring the clients into the mix before everything is defined. However, because of the tender process that was in place, we had to make some bold assumptions. We still had the client for workshopping, for things like refining the avatars, the illustration, tone of voice and activities, but only post-pitch. 

“The conceptual genesis was a quote from David Attenborough, who said, ‘People won’t preserve what they don’t care about, and people won’t care about what they haven’t experienced.’”

Our early strategic work was based on the assumption that one of the reasons that children don’t engage with nature is because they’re so engaged with their tablets, phones or screens. We challenged ourselves to create a digital product that capitalised on children’s connection with their screens, while using this to drive a very direct physical experience of the world.

The activities in the app aren’t just looking at pictures or hearing recordings, they use digital as a springboard to go out and touch a tree or photograph a bird or get your hands dirty. We wanted it to be very accessible in terms of time – you needn’t have to go on day trip to the country, it could be half an hour in your back garden. 

The team at work

In-Depth Research

Our head of strategy considered the anthropological research as well as looking into what kind of smartphones, tablets and operating systems kids use. In terms of the activities and the meat of the final product, that occurred through creative dialogue between the tech team and the creative team.

At this time the tech team looked at what smartphone functionality kids are used to using, in terms of microphone, camera, etc. And then the creative team mapped the third part of the triangle – if the client wants the user to experience flowers, and the tech team says we could use drawing or photography, then what is a cool creative idea that will allow you to experience flowers using this technology? We went through a bunch of ideation sessions.

One of the unique things about Toaster is the fact that the tech team is totally embedded in the agency. It’s not a department of geeks in the basement – they’re totally baked into our process. At the beginning there was input from the strategy team, then that dropped off fairly early. The core team was one to two creative technologists, one creative lead, one illustrator and one copywriter. 

“It’s interesting how much an illustrator can be at the centre of a highly technical project and co-drive the functionality.”

The Toaster team at work

The concept for Dippy’s Naturenauts is that after creating an avatar and nickname, Dippy and wildlife whizz, Fern the fox, guide kids (Naturenauts) on mini adventures to discover the colours, flowers, trees, and birds around them in nature. As each adventure is completed and special badges are unlocked, the Naturenauts’ individual discoveries are captured in their very own, uniquely personalised and illustrated story (featuring their avatar and nickname), which they can keep as a memento of their adventures with Dippy and read later with their parents. 

The application is designed modularly as a foundation for future experiences and games to be added along with new badges, stories and even characters to help further foster exploration within the natural world. As a result, and largely due to the nature of the technology used, the application is fully scalable and flexible, with endless opportunities to add new games with differing objectives in an ongoing, personalised journey.

The app displaying some of the Naturenauts

The app in use

Pitch perfect

Usually pitches either involve the client wanting to see a series of ideas and then wanting to buy one or, they're looking for a series of capabilities to then execute. For this project we did a lot of the work up front to show what we would do, in order for us to showcase something that was using bleeding-edge technology.

We were given six weeks, which was fair. We spent about two weeks on the pitch and then six on detailed development. There were two rounds of pitching, one was delivering the formal response, which was a document only. Then we were shortlisted to a secondary pitch process with a selection of board members. There was a cap on the number of people we could take to the presentation – we had the chief technological officer, creative director, head of production (because of the time-frame was very tight and the level of work was quite technical) and our partnerships director as the interface with the client. 

“The activities in the app aren't just looking at pictures or hearing recordings, they use digital as a springboard to go out and touch a tree or photograph a bird or get your hands dirty.”

There was a remarkable similarity between what we pitched and what we built. Most of the conceptual work was done in the pitch phase, which I think was what won us the work. A lot of the other companies that pitched proposed doing a native app, whereas our tech department specialises in Progressive Web Apps. These are app-likes experience accessed through a website – users don’t need to download an app. The benefits are that there are far fewer barriers to entry for users, they’re a lot cheaper to make and you don’t need to develop several versions, for Android and IOS etc. So there was a creative reason and a tech reason for the win.

The first phase after the pitch was to bring the teams together: Our creatives with the client’s research teams, their tone-of-voice teams, their Dippy team and the product managers, to make sure as much information as possible was shared. 

Work in progress

Integrating Illustration

In parallel to the stream of work, was the creation of the illustration. The whole project has this very unique illustration style, created by one of our midweight creative designers, Lisa Juquet. Lisa’s involvement started in the pitch process – there were some slight variations but no radically different options. We knew the age range, which was 7 to 11 years, and that the style needed to be child-centric, so we looked at a lot of cartoons, comics, graphic novels, that appealed to this age range. 

The main user interface is an illustrated map. Once you've gone through the introduction process, you reach a basecamp (the main navigation) and then the activities are points on this trail map. The avatar creation was interesting. We went through a long dialogue with the client about how we expressed ethnicity and gender, diversity within the avatar creation process. They didn't want the user to have to select a gender, so gender is indicated by clothing and hairstyles so it's quite a modern expression of gender. You can be a girl with short hair and "boy" clothes, for example. 

It was an enormous amount of illustration within the time. The visual style was set ahead of the pitch but in the production process, we were drawing constantly. We would build the product with placeholders and then as we worked we'd fill them in with the real illustrations. It's interesting for anyone who specialises or is studying illustration to understand how much an illustrator can be embedded and at the centre of a highly technical project and co-drives the functionality.

Early sketches, and the finished visuals

Character design in progress

Developing a Narrative

At the centre of the story you have this skeleton of a dinosaur, Dippy, which has come back to life. It’s from 250 million years ago so it doesn't understand the modern ecology of the British Isles. You’ve also got the kid who want to discover the ecology too, and then we created this third character – a fox called Fern – who is taking both the dinosaur and the kid on a journey of discovery. 

We knew that we wanted to make something that would produce a narrative, so then after the activity was finished, the parents or kids themselves could cement the emotional logic to the whole thing, by remembering what they saw earlier on. After you’ve finished, the app produces a unique mini comic with your avatar and the results of the activities. So if you photograph a flower, the flower is then embedded into your unique comic story.

App design in progress

Uniting Tech and Design

One thing that could have been a pitfall here, is that if you design for very high-spec phones, most people will have a model from a generation or two earlier. We really wanted something that was accessible, so we deliberately built something that could be used on any phone from the last six years.

It was about leveraging what the technology could do, but mapping that over the target audience and how they currently use phones. So you’ve got the conversational UI, like WhatsApp or similar, then the interactive games that leverage the camera on the phone and pseudo-AI work. For example, you can do a virtual bark rubbing, where you take a picture of a tree and then you can do a bark rub (like you used to as a kid). Every time you do these activities you’re earning badges, so you get a virtual reward. There’s also replay of your journey and badges won, so throughout the activities, it tells you a story. 

We did user-testing with kids around three-quarters of the way through. The Natural History Museum provided the children and we provided the structure to the day – with some of our creative and production team spending the day at the museum. It provided some substantial modifications in terms of what children find challenging. Some things we thought were obvious, in terms of visual signposting, really weren’t.

Work in progress

The Toaster team at work

Delivery and Challenges

We delivered a fully functioning app, which was hosted on the Natural History Museum’s servers, so the final step was to upload it. At the moment, Dippy’s Naturenauts involves four interactive experiences but each of those can be made deeper with more colours, more badges, more birds etc. Because it’s a Progressive Web App (PWA), there’s also the framework to easily add new games without having to re-release the app and get people to re-download. 

PWA is still relatively new, so you have to react to people releasing browser updates, so something can change mid-project. In fact, Safari’s spec changed mid-delivery. So one of the things that we built into Dippy’s Naturenauts was to a back-up experience if a browser couldn’t handle a certain feature or use the camera. That’s a recommendation we’d have: keep a eye on the roadmap of browsers.

We did a lot for the allocated budget, so that was probably the most challenging aspect. We made the decision to push for it as hard as we did because it was such a great project. The brief provided the motivation in itself. It was a chance to exhibit what we could do at Toaster, and the positive impact you can have with tech on an environmental and social level and stretch our illustrative wings. 

The visual for the finished app

Measuring Success

Numbers make a successful project, but so does delivering on the core objective. That’s then supported by qualitative feedback from the audience we’re targeting, and the client themselves. We had an internal wash-up, and we will have one with the client about how things things we could improve and suggestions for next steps. We had a lot of good informal feedback from the client and they’ve also happily presented it at events as a case study in how they’ve worked. It stacked up very well against other initiatives they’ve done differently.

People coming to the door often mention Dippy to us, and these are the kind of projects we want to be doing. It’s the stuff that excites the team and the types of people who want to work with us. The project has validated our strategy as a business – how we hire people and how we define our value proposition as a creative agency working with emerging technology, and that can deliver at scale. This was a great example of a product taken to market with a great experience, making a positive impact as well as business impact.

The introduction to the app on the Natural History Museum’s website

Posted 02 August 2018 Interview by Laura Snoad
Collection: Parts of the Process
Disciplines: Animation, Digital
Mentions: Toaster, Natural History Museum, Jake Cooper, Ben Cheston
Learn More Sign In

Lecture in Progress relies on the support of patrons and professional members to provide the ongoing insight and advice to the next generation. To help support sign up now or find out more. 

scroll to top arrow-up
share

Become a Member

Lecture in Progress is now free to access. Become a member and receive a number of additional benefits.

Student Member

Free

Alongside a wealth of behind-the-scenes advice and insight into the creative industries, join now to get exclusive access to offers and promotions. You’ll benefit from:


  • Student offers and promotions
  • Two weekly newsletters
  • Bookmark content
  • Shape the future of Lecture in Progress

Professional Member

£35/per year

By becoming a professional member, you’ll be helping us in our aim to support the next generation of creatives. You’ll also get the chance to shape the future of Lecture in Progress, and benefit from:


  • Professional offers and promotions
  • The biannual Lecture in Progress newspaper, delivered to your door
  • Insight reports into creative education and industry
  • Two weekly newsletters
  • Bookmark content
  • Shape the future of Lecture in Progress

Lecture in Progress is made possible with the support of the following brand patrons