We recently wrapped development on a major update to our habit tracking app, My Reasons. Along with the usual updates to screenshots, the App Store description, and website that accompany new feature releases, we decided the App Store preview video needed updating as well. Being the software mogul that I am, I picked up my desk phone, called over to marketing, and told them they had a budget of $25,000 and two weeks to get it done.
Upon hanging up, a loud thud accompanied by a sharp pain emanating from my posterior alerted me to the fact that my office chair had shot out from under me after having fallen asleep in it… again. Two things became suddenly clear: I really needed to get a chair without wheels; and I must have been dreaming because we don’t have a marketing department. We barely have enough of a budget to make a cup of coffee, much less a video. If we wanted a new app preview video for My Reasons 2.0, it would have to be made in-house.
Like many indie developers, Diane and I spend a lot of our time on things far removed from designing and developing software. Much of it is outside our comfort zone and we often find ourselves turning to blogs and podcasts for advice. With that in mind, I hope this post has a nugget or two you can use in making your own app preview video.
Problems with the First Version
The original My Reasons app preview video was our first. Although we had made some tutorial videos for Home Inventory and an alcohol-fueled promotional video featuring sock puppets for our now-defunct Looky app, this was our first attempt at a video that could be played from within the App Store and thus had to follow Apple’s guidelines.
The idea was to tell the story of the progress within the app. First, you see someone creating a new habit, followed by the in-app animation of the reasons associated with that habit. Next, there was a shot of the habit being checked off. The video ends with a scene of the calendar view coming up from the bottom, showing the progress with that habit over the past month. You can see the original My Reasons app preview video here:
I don’t think the concept was bad, but the execution was way off. While it was obvious to me what happening in the video, it likely wasn’t very clear to someone who’d never used the app before. This is a common problem when creating any kind of promotional material in-house. You’re an expert with the product because you created it. It’s difficult to put yourself in the mindset of someone who’s never seen it before and explain it in a clear and concise manner.
Planning the Version 2.0 Preview
For the new trailer I wanted to stick with the same basic concept, but try to give a better idea of the purpose of the app. Unfortunately, I had no idea how to do that. I knew from past experience that if I went with the traditional process of storyboarding I would be stuck struggling for days until I came up with something that I liked (or just went with because I had long since become bored of the whole thing).
I tend to work best by coming up with a very basic concept and then improvising and refining. It’s a process I use with everything from software design to writing music to blog posts. Just throw everything out there that might belong and then rearrange, cut, and tweak until it feels right. If I can’t refine it into something I’m happy with, I’ll throw it out and start all over again.
Since I don’t have a lot of experience with creating videos, I thought I’d give this approach a try and see where it led.
Capturing the Footage
Improvising, by definition, implies you don’t necessarily know where you’re going. When I’m playing guitar I improvise most of my solos, fills, and even subtle variations in the rhythm parts. To get all artsy-fartsy about it, I go where the moment takes me. Sometimes it can be absolutely transcendent. Other times it comes out as a meandering train wreck of rhythmically incoherent, seemingly random notes – in musician’s parlance, this is known as jazz 😛.
In order to have enough footage to “go where the moment takes me” I needed to capture a lot of footage. This meant recording every aspect of using the app as if I were an actual user instead of just entering a bunch of test data. First, I had to stage some data.
Since My Reasons makes heavy use of photos, my first thought was to go out to one of the stock photo sites and grab a bunch nice, pretty images. Though we’ve used stock images in the past, there are some licensing concerns you have to be aware of. Many stock photo companies require an additional license if an image is going to be broadcast, used in a large print run, or used in a video. Those extended licenses can be expensive and keeping up with what types of license(s) you have for each stock image can be a hassle.
My Reasons is a very personal app (I wrote it because these existing habit tracking apps didn’t cover the motivational side of things the way I needed), so I decided to use photos of our family that Diane and I took. That meant scouring our photo library for photos that were appropriate for the task at hand, well lit, in focus, and didn’t contain anything that might cause a licensing issue (no trademarked logos on clothing, no photos from our trip to Disney World, etc).
With the data staged, it was on to capturing the footage. I used Quicktime to do this by plugging in the iPhone/iPad/iWhatever to the USB port on my Mac and setting the audio and video capture sources to record from the device (you must be running iOS 8 or later and OS X 10.10 or later to do this). As I mentioned before, this meant methodically going through every aspect of the app. There was just one little hitch: The core of the app centers on animating photos and text representing the reasons behind the habits you want to make or break to help keep you motivated when you don’t feel like going to the gym, eating a healthy meal, or whatever else it is you’re trying to do. These animations are random and occur in real-time. This meant letting the capture operation roll on for a while so there would hopefully be some sequences of the animation that would suit the video.
Oh, and since Apple wants preview videos formatted for 4 inch screens (iPhone 5/5s & iPod Touch), 4.7 inch screens (iPhone 6), 5.5 inch screens (iPhone 6 Plus), and the iPad, I need to do all of this four times, each for the appropriate device.
Choosing the Music
For music I decided to stay with the stock theme I used in the first video. It’s part of the royalty-free library that comes with Logic (there’s that licensing issue again). I suppose I should have written something original, but I tend to write either metal or blues stuff. Mosh pits and juke joints don’t exactly scream self improvement, so canned audio it is!
If you haven’t yet purchased Logic, Garage Band, or something similar, I highly recommend doing so. You’ll probably need to record and edit audio at some point and the royalty-free music and sound effects come in handy not only for sounds in your videos, but for creating audio effects for your apps as well.
If you’re going to use music in your video, it needs to fit with what the viewer sees on screen. If you’re showing footage of a frenetic video game, you might want to choose something fast-paced that conveys a sense of chaos.
For My Reasons, I knew I wanted music that went along with the overall purpose of the app, which is helping you make your life better. The theme starts out low-key, almost inquisitive sounding – you can almost here the interest rising as it builds. Then it sharply transitions to a fuller, uplifting sound before ending with an abrupt punctuation. It sets the right mood and the abruptness of the transitions are perfect for cutting to different shots within the app.
I found choosing the music at the beginning of the project to be a big help in coming up with the visual portion of video. The tempo, tone, and transitions served as a guide to the types of shots I needed, where they fit, and how long they needed to be. For example, with this piece the first transition (about 12 seconds in) was just screaming to be the part where the photo and text reason animation appears. And since I wanted to keep with the original “progress within the app” concept, the transition at the end of the calendar was perfect showing your progress coming into view – pretty much the same as in the original video.
Defining the Purpose
With the music chosen and a vague idea for two sequences, I fired up Final Cut Pro and set to work on trying to make a version of the original video that more clearly defined the purpose of the app. For no particular reason, I decided to work on the version of the video formatted for the iPhone 6 first. One thing you will want to make absolutely sure of when starting a video project is that the output resolution and frame rate are set appropriately for the project from the start. It will save you a lot of grief later on. If you let Final Cut Pro automatically determine these settings based on the first clip, be aware that Quicktime captures iOS footage at 60 frame per second and Apple’s guidelines require app preview videos to be 30 fps. If you submit a 60 fps video to iTunes Connect, it will be rejected.
From time to time I’ll show previews and trailer videos for different apps to friends and family and ask them what they think. One thing I’ve learned from this is it is easy to lose track of what is going on within an app if the video contains a lot of fast data entry or quick transitions between different screens. Think about watching over someone’s shoulder while they are doing something on a computer. It’s hard to follow what an experienced user is doing as they blaze along through software you’re unfamiliar with.
The same principle applies to app previews. You have to assume the person watching has little, if any, knowledge of your app and seeing a bunch of screens fly by over the course of a few seconds isn’t likely to be very informative. With a maximum length of 30 seconds, there isn’t time to explain everything in detail at a speed people could easily grok. Besides, that would be boring. Instead you have to settle for giving them a general idea of what the app is all about.
The original My Reasons video didn’t do this very well. It was comprised entirely of in-app sequences that did little to give the viewer any idea of what the app could do for them. I didn’t think cutting together a different set of in-app sequences would improve things, so maybe it was time to add a little titling (on-screen words).
My first thought was to use a series of short titles that described the functional purpose of a part of the app in a handful of words, each followed by an in-app sequence that demonstrated the point. For example, the calendar screen could be preceded by a title shot that said, “Track your progress”. I’ve seen other videos use this technique very effectively, but I couldn’t make it work. Not only did I have a hell of a time coming up with short titles (as you can tell from the length of this post, I suck at brevity), but it quickly became obvious that there would be too many different segments to fit within the video’s 30 second time limit while still being on-screen long enough to read and make sense of.
This is the part of the process where I throw everything away and start over. Beginning the project again with just the music track, I thought I would try only two longer title sequences that together describe the purpose of the app: to help you focus on the reasons why you want to build better habits so you can stay inspired to better yourself. I wrote down a few ideas until I came up with something I liked.
Assembling the Rest of the Footage
With the title sequences settled, it was time to assemble the footage around them. The video opens with the first title, “There are reasons behind the habits you want to make or break.” The original video opened with the name of a habit being entered, which was totally unnecessary. Of course you entered habits, just like you do with every habit tracking app! It’s the reasons aspect that makes this app different, so instead of showing a habit being entered, I kept with the theme of the titling and showed a reason being entered, “to feel better” (only the typing of the last few letters, no need to make someone sit and watch as each character is typed out).
After that, I left in the natural transition of the app to the habit screen to show all of the information associated with a habit. The animation of the reason that was just entered being added to the habit’s list of reasons and the photos help setup what happens next with the first transition.
In this case, it cross-fades to a photo of my son, looking up at the kite he’s flying at the beach with a sense of wonder on his face. It fits the change in the music’s mood perfectly and shows off the reason animation. It’s also visually tied to the previous scene.
And now we arrive at the second title: “Stay focused on them and become a better you.” This is followed by a transition back to the photo/text reason animation and the controls appearing. You see the habit being checked for the day and then, when the final abrupt transition in the music occurs, the calendar showing your progress slides up from the bottom. Again, the visuals tie in with the title that was just shown.
Is this video any clearer than the previous version? I think so.
Doing it Again for Each Device
With the first video done for the iPhone 6, I needed to re-create it for the other three formats. Since I had captured a lot of footage from the get-go, I didn’t have to go back and re-capture anything. Putting the remaining videos together turned out to be pretty simple and only took about 10 minutes apiece.
Before I started working on the other formats, I wrote down the lengths of each clip in the iPhone 6 version. From there it was a matter of choosing the right segments, dragging them into place, tweaking the lengths to be exact, and adding the transitions. With this video, I only used cross-fades. I learned years ago in a film class that most professionally made movies, TV shows, and commercials almost exclusively rely on hard cuts and fades for transitions. While fancy transitions may seem neat, they can be distracting and overshadow the actual content.
Fin
And so here we are. The video is done. Here’s the final version. Spielberg certainly has nothing to fear from me, but hopefully it gets the job done:
Update: My Reasons 2.0 made the Best New Apps section on the front page of the App Store just after it was released. I have no clue if the updated app preview video was a factor. It certainly didn’t hurt, though.