Last year, at WWDC 2014, Apple presented a cool new way how we can show off our brilliant apps to an unsuspecting audience. After working on the official prod.ly app for the better part of 3 months, today I created and published my first app preview video. Here’s how.
When launching a social networking app like prod.ly, I wanted to give users a good impression about what they would use it for. Like any good ad – so I figured – I wanted to tell a story. Really good advertisements, the ones that you remember, fit a narrative into very short time.
The WWDC video mentioned that you should draw a story board, but I had already the outline in my head.
The Story
Our target audience are young dynamic people who are savvy users of social networking to communicate with their friends. The setting of our short story would be the fictitious launch party for an unknown startup or app. Could be us, could be anybody else.
At or before this launch party the main character (played by me, user “drops”) grabs a small bottle of Champagne, scans the barcode and then comments that it is the perfect drink to toast the launch.
In the second scene he casually browses the prod.ly timeline and discovers an interesting drink. He adds this product to his “wanna try” list.
The third and final segment plays many months later, the startup has gotten millions of funding. It’s the day of the IPO. The user scans an elegant caraffe of premium orange juice and – tonge in cheek – muses that now they are able to even afford a luxurious product like that.
The message I wanted to transport is core to prod.ly: to give users a casual platform to communicate about products they like. And the story should chime with the aspirations that all entrepreneurs have.
The Making Of
Before filming the segments I needed to go shop for some props at my local supermarket. ProductLayer being an Austrian company I opted for several Austrian company’s brands.
iOS 8 added the ability to record live video from iPhone via Lightning cable. But until recently I was unable to record a full segment. Right after the navigation controller slide following a recognized barcode Quicktime would simply stop recording.
Fortunately Apple fixed this bug in iOS 8.3. Right after installing the BETA on my carry phone I tried this out and for the first time the recording kept going. Yay, Apple fixing Radars!
What’s awesome about recording directly from the phone is that you also get to see the video preview screen where I scan the product barcodes. That’s something you couldn’t do on a video recorded off iPhone simulator.
Then I created a new Final Cut Pro X project with the appropriate dimensions for an iPhone 6 screen. Cutting work began.
The main problem creating the ad was getting to be exactly 30 seconds. This is the maximum time that preview videos for iTunes are allowed to run. Also, you want to keep the action fast-paced as not to bore the viewer. One feature of the prod.ly app is that the main actor is adding an opinion about two products. For this he needs to enter some text. I sped this up 10-fold. I considered cutting such that the words would appear, but that felt awkward.
The problem with cuts is that you don’t want the app to appear as if it would do something that it doesn’t. Because of this I kept all the navigation controller and modal presentation slides. I only cut out some pauses. Thus the spirit of the app is preserved and nothing looks fake. If anything you could only criticise that the preview might come across a bit hectic.
For the sound track I found a royalty piece of music, which I shortened by cutting out a few bars as to match up exactly with 30 seconds. I added a few seconds title at the beginning of the ad stating “What do you love?”
Two transitions though black happen between the three segments to communicate the distinction between the parts.
Upload
From Final Cut you can export a master file which contains the original pieces. Make sure you choose h.264 as video format though. You can only add artwork and preview videos with new app versions. The preview video accompanies version 1.0.1 of the prod.ly app, which is waiting for review at the time of this writing.
Apparently you only need to supply the video for one iPhone resolution and Apple will still show the preview to users of all screen sizes. You can, if you so choose, upload videos for different resolutions as well. But as far as I can tell there is no localising it.
To be able to show it off to the world I put it on YouTube as well. I was pleased to find that I didn’t need to re-encode the master file MOV for YouTube either. I simply uploaded the master file, it got processed and was immediately viewable. Only drawback: because the video is in portrait format you get black bars left and right.
So here it is, for your viewing pleasure. I hope you can appreciate the subtleties I hid in it, now that I have explained the reasoning driving its creation.
Oh and how about downloading the shown app as well right now? Then you can judge for yourself if this video gives a good impression of it. It’s available for free on the app store.
Conclusion
If you have an idea for a narrative then the actual work of creating a video clip for the preview is a cinch. Filling 30 seconds is no problem, rather the problem is to not fill more than that. Brutal trimming will inadvertently ensue.
I believe that this experiment proves that you can also create interesting preview apps for something as benign as a social media client. Most apps probably have more interesting visuals than that and show of less different views. So with the limited resources that you might find at your disposal you can still create something enticing.
ok, and now really, please, with sugar on top, download the app. 😉
Categories: Recipes
