Created as a collaboration between Design I/O and the strategic design agency eyeball, John Lennon: The Bermuda Tapes in an interactive Album App that tells the story of John Lennon’s life changing journey sailing through a mid-Atlantic storm to Bermuda in June 1980, the creative discovery during his time on the island and the artistic collaboration from abroad with wife Yoko Ono at home in New York leading to the release of Double Fantasy: A Heart Play.
Design I/O was approached by the Directors Michael Epstein and Mark Thompson to figure out how they could tell the story of John Lennon’s journey to Bermuda by using interactive and generative techniques to bring the story to life. The story itself is broken up into 6 chapters, covering everything from the sailing voyage, to arriving in Bermuda, to a visit to a Disco where John has a realisation that kicks off the creative collaboration between him and Yoko. In addition, Design I/O were given access to the demo tapes John recorded in Bermuda as well as interviews with John, Yoko and the crew and some never heard before unreleased cassettes.
One of the things that immediately struck us listening to the raw tapes, was what an emotional and heartbreaking experience it was for both John and Yoko. You really get to hear the music and feelings of two people who felt like they were drifting apart, as they change that momentum around and fall in love, all over again. The tapes are essentially a conversation between John and Yoko but done through songwriting. It was really wonderful to hear.
With this in mind the team wanted to design the experience and the interaction to match the tone and feeling of each section of the story. This meant not using the same single technique for all six chapters, but instead finding the interaction that felt the most appropriate and to allow the more emotional, poetic moments to have a more poetic interaction.
Early “Tape” Experiments
At the start of the project they spent several months making quick little demo apps which they would send to the Directors, get feedback on and then try other approaches until they hit on something that felt right for the content of the story. Some of their early experiments were shown to Yoko and she would provide her thoughts and feedback too. Design I/O describe how great the process was working with Yoko, she would almost always be pushing the team to be more experimental, not less, which was a wonderful challenge to have.
One of the parts that was directly influenced by her, was in the Garden section of the app. Design I/O had been talking about making dynamic flowers that would be unique to the user and the idea came up to take inspiration from her Wish Tree project. So they starting working on flowers which would be created by the user recording them saying a wish.
Flower Experiments / running in a oF desktop app
Early in the discussion the idea of the iPad being a window into the story came up. They had discussed the idea that you could be on the beach in Bermuda and then look down at your feet and by using the gyroscope you would see yourself standing on the beach. However when they did some early tests they realised they could go much further than this. They realised they could place someone in a illustrated 3D environment and have them walk around and also look around 360 degrees, up and down. The early tests were so much fun to play with, as you had to physically turn around to see what was in the scene behind you. They realised that they could use this interaction to really bring people into the story, have them stand in the Botanical Gardens in Bermuda and explore the environment while they were listening to John and Yoko talk about the “Double Fantasy” flower which inspired their album title.
One of the big challenges the team faced early on was how to combine illustration with 3D and dynamic/generative content in a way that fit well together. They were working with eyeball nyc’s Maren Morstad to get a visual style that could work well in a variety of settings.
I remember her sending over some sketches in this style that was a mixture of watercolor / large color blocks and pen and ink outlines. My first reaction was ‘this is impossible’. There were lines coming off the edges of characters, it seemed completely impossible to do dynamically. It took a few days, but then we started thinking about it more. We realized it may be possible to dynamically create sketched lines from a 3D model, by pulling out only the edges from the model that have a certain angle difference between their shared faces. So we did a whole bunch of tests based on this idea and built a tool for turning 3D models into only the ‘interesting lines’.– — Theo Watson / Design I/O
Model edge finding tool / see video below for detail description of how the process works
The App is built almost entirely in openFrameworks, with a very small amount of Objective C code to handle AirPlay and fullscreen image gestures. In total the development of the App has taken just over 9 months. During that time they developed something in the order of 100+ apps that they used to test ideas or to work on individual sections of the story.
One of the things that was really helpful and one of the strengths of openFrameworks was that at all times we had both a OS X and an iOS version of every app. We found that the iOS simulator was not a good indication of the iPad or iPhone performance (often running at 1/10th of the framerate ), so we used the OS X app as our simulator. As we were writing almost everything using openFramworks calls, the code differences between the OS X app and the iOS app were miniscule. It also saved us probably days, maybe months in the development process.
They also built tools that were used to create certain sections of the story. Nick Hardeman built an OS X Parallax Editor that allowed Mark Thompson and the team at eyeball to build long parallaxes for the Disco, For Jack and Why Hunger sections of the app. They also used it for the Listen section of the app, where cassette tape images can be loaded and associated with the demo songs.
Parallax Editor designed in openFrameworks
The final challenge before release was getting the app running on all the different devices. Theo points out how amazing fast the top of the line iPad and iPhone are, but as each model is usually twice as fast as the previous model they had to do tons of optimisations to have the app run on the older iPod Touch and iPhone 4. They ended up having to read a lot of articles from game developers about dynamic texture resizing and ended up creating a threaded asset loader, which is used in almost all parts of the app.
The album app is directed by Emmy and Peabody Award-winning filmmaker Michael Epstein (“LENNONNYC”) and veteran digital artist Mark Thompson. Produced by Andrew Banks. The app’s creative design and production is a collaboration between the interactive media studio Design I/O and the strategic design agency eyeball. The app is solely owned by WhyHunger.
The app is available now on the App Store with all net proceeds to benefit WhyHunger’s work to realize a world free of hunger and poverty.
Project Page | AppStore | Design I/O | Eyeball NYC
