This post by POV Hackathon 5 participant Olivia Koski originally appeared at Creativist.
A few years ago, Christopher Allen, director of a collaborative arts space in Williamsburg called UnionDocs, saw a movie made in 1984 called Los Sures. Directed by Diego Echeverria, it told the stories of several residents of the neighbhorhood during a time when the area looked a lot different.
Taking a 30 year-old movie as its foundation, Allen launched the “Living Los Sures” project, an exploration of the southside of Williamsburg today. UnionDocs has been home to dozens of storytellers who have contributed to the story of the changing southside. How do you tell the story of a neighborhood, then and now, when it contains infinite numbers of stories?
They wanted to make an app.
In one weekend.
That’s where Creatavist came in. Even though I’d never built an app before, I knew it was possible with Creatavist. But I needed some help. So I recruited one of our developers, Oliver Budiardjo, to participate. There was just one problem. He was an Android developer, and we wanted to make an iOS app.
We had good reason for wanting to make an iOS app. Jefferson Rabb, CTO and creative director for Atavist, had just implemented a new test feature in Creatavist – the ability to track a user’s location within the iOS app.
It’s a feature that our Android developer Oliver could build for Android – but not in a weekend, when we also had other features we wanted to build for the prototype app. So we decided to take the new “whereami” feature Jeff made for iOS and build a new template around it.
At the beginning of the weekend, our app looked like this:
It showed your latitude and longitude as you walked. This was cool, but not anything Google Maps couldn’t do. The difference was this location information was now connected to the Creatavist storytelling platform.
Getting an iOS app up and running for testing for the very first time can feel a little intimidating. Fortunately, we’ve thoroughly documented the process in our support portal.
The steps to getting set up with Apple are here. An important thing to note is that you have to sign-up for an iOS Developer account, which costs $99/year. Each device that you want to test your app on must be “provisioned,” which means given permission to run your test app. After you’ve taken the necessary steps through the developer portal, you should have two files:
- Ad Hoc Provisioning Profile
- Distribution Certificate
Once you have them, you’re ready to dive into the “Apps” area of Creatavist.
Step 1. Name Your App
You can name it whatever you want, and change it later. We called our app “Living Los Sures.” Give it the App ID you chose in the Apple Developer portal.
Step 2. Upload Your Ad Hoc Provisioning Profile and Distribution Certificate
Scroll down to the “Certificates and Provisioning Profiles” area. Upload the files you made in the Apple developer portal. Remember to hit “Save.” For now, we only need the Ad Hoc provisioning profile and Distribution certificate. When you submit your app to the App store, you will need the App Store provisioning profile. If you want to send push notifications (APNS), you will also need a production certificate for those.
Step 3. Schedule A Build
When you click “Schedule iOS” build, a computer at Atavist Headquarters automatically compiles all of the files needed to run your app. Once the build is complete, you will get an email with a link to the prototype app. When you click on this link from your iOS device, it will launch the installation of your app. You can login to creatavist.com from your iOS device using Safari, and Click “Install” from your Apps menu at any time to re-insall your app. If you are having trouble, it’s probably because your device is not properly provisioned.
That’s it! Because you haven’t added any content or customized your storefront yet, your app will probably look something like this:
Now that we had an iOS test app that could talk to the device’s location services, we were ready to meet the rest of the team. The Hackathon was held at the Center for Social Innovation in Manhattan. The team members were: Christopher Allen, Alison Kobayashi, Oliver Budiardjo, Olivia Koski, Patricia Zablah, Ilana Strauss.
After a brief pep talk from Adnaan Wasey, director of POV digital, and an esteemed group of mentors, we got to work. Christopher articulated the “dream app” he and Alison had envisioned over the previous week. They wanted an app that detects your location as you walk down the street. Accessing your camera, you would see a live view of the the sidewalk or the buildings around you, with other content streaming by as you walk. Quotes from people from the neighborhood, or pictures from the past appear as you navigate the neighborhood. They had the idea of being able to overlay archival images with a live view of the street, allowing the viewer to take a picture and then share it with others who have the app. Patricia expressed concern about safety, and whether we want to encourage people to be looking down at their phones. We spent a lot of time going back-and-forth about whether the app should only work in South Williamsburg, or if the location services could be meaningful in other places. We settled on the idea of a finite journey of a few blocks, 10 minutes, that you could experience anywhere in the world. Your location would still matter, but it would be your relative location rather than your absolute location. That morning we discussed many features that simply didn’t exist yet:
- Access to the iOS camera
- Access to the GPS data of the user
- Ability to overlay live camera view with archival photo
- User’s location correlated to a database of geo-tagged photographs
- Ability to scroll text as location changes
- Ability to overlay live camera view with scrolling text
- Ability to take a picture within the app
- Ability to access email function to email photo
We had our work cut out for us, and time was running out.
Street View had almost the right perspective – except we were designing a tour for someone walking down a sidewalk, not driving down the street. Also, the image is visually cluttered. We wanted something simple, and something representative of the neighborhood. We settled on the sidewalk.
Christopher took lead on the script, which he was building from transcripts of audio recordings of people who lived in South Williamsburg during the filming of “Los Sures.” Alison worked on the visuals for found objects the user might come across while walking down the block.
Making The Chapter Template
Our technical challenge was to navigate through the story as a person walks down the street. We had the user’s location information, but we needed to build a feature that did something meaningful with that information. We needed to build a chapter template in Creatavist.
The Chapter is one of the key building blocks of a Creatavist story. Chapter are simply containers for content. A chapter can contain scrollable text, an image, multiple images, audio clips, music, a map, or a template of your choosing.
A standard Creatavist chapter allows you to add a wide variety of media to your story. View an image of the standard Creatavist chapter »
A Template chapter allows you to fully customize the user experience. View an image of the template chapter»
The template area shows you all of the templates that you have created. The templates that you build are yours. They don’t belong to anyone else, or to Creatavist. No one has access to them but you.
The image shows several test templates Oliver and Patricia created during the POV Hackathon.
Code editors allow you to add code or make changes to your template:
- HTML: This HTML defines the layout of the media elements as they slide.
- CSS: CSS controls the look of the media elements. Custom code can be added to optimize display for various devices.
- Fields: Fields is custom code unique to Creatavist. Fields allow media makers to add media to a template. A complete guide to them can be found here. Fields mediate communication between media maker and technologist. This is the code that generates the spaces for media makers to upload media that will be used in a template.
Using The Chapter Template
Once the software developer(s) has saved a new template, it is immediately available to the media maker to use in their Creatavist project. Simply select the “template” chapter in your story navigator.
You can then select the template from a pull down menu.
The title for the template Oliver and Patricia made is called “Oliver Test.” It has a field to upload a sound file, which serves as an audio trigger to notify the reader that content has changed (so the user doesn’t have to be looking down constantly). The “button” field initiates what we call the “move and scroll” (M&S) or “stroll to scroll” feature. In this case the button is an animated .gif that Alison designed. The image field – im1 – is where you upload an image. There are 14 image fields. As the user walks the images change in sequence.
Custom fields defined by the developers allow the user to add audio, animated .gifs, and images. View the “Move and Scroll” Chapter Template »
Each image has a short snipped of text on it, adapted from interviews with long-time Williamsburg residents. The images change with relative location, unlocking a story you can only access by moving forward (by walking or on wheels). The video below shows the app in action, with the stroll-to-scroll demo beginning about 30 seconds in.
The Store Template
While the dev team worked on building a new chapter template, I designed the storefront using an existing store template. From the “Apps” menu, select “Store.”
There are two types of storefronts: a project collection and a single project. Project collections can contain several or dozens of separate projects, for example a magazine with many issues or a book publisher with many books. A single project app is one project, such as a multimedia novel or game.
We decided to make the “Living Los Sures” app a project collection, so it could handle the dozens of stories UnionDocs collaborative residents have already produced. “Both Here and There,” with the “stroll to scroll” feature is just one project in a collection of many. The app can support any type of multimedia project, such as a short film, audiotour, photo essay, or written narrative with multimedia woven throughout.
I chose a map that Christopher had on hand as the store background image.
The template we used has fields to add icons that the user can tap to enter a particular story. Alison made one for “Both Here and There,” as well as one for a related project called “89 Steps.” I added a third sample story using an image from the Living Los Sures project, and entered coordinates for the positions of each story icon.
The resulting storefront looks like this:
On Sunday evening, May 11th, we were ready to present. Six teams showed off their work.
- Noriginals: The Art of Uncreatavity (Participants’ Choice Winner)
- The Angola Project
- Both Here and There
- Karachi Circular Railroad
- One Way Home
We were lucky to have three incredible judges who gave valuable critical feedback: Brent Hoff of the NY Media Center, Ingrid Kopp of Tribeca, and Edwin Torres from the Rockefeller Foundation.
It was an exhausting and very satisfying weekend. Thanks to POV, the Center for Social Innovation, the sponsors, mentors, judges, and the other participants for an incredible experience!