In part one of this two-part series, I explained our video strategy behind supporting the release of a new mobile app, Curate, that my company recently released.
In this second part, I’ll explain the tactics and execution behind the creative assets and discuss some of the tips and tricks we employed to quickly produce a number of varied assets.
The video background of our landing page came out of the latter of the tactical approaches mentioned above. The landing page had one goal: get early adopters to sign up for a wait list that would email them information about the app, and notify them of it’s eventual release.
We knew we wanted the design of our landing page to stand out from the bootstrap style pages that promote many apps. One of our designers presented the idea of building content blocks into the screen of the app as the user scrolled down, building more curated content blocks into the newsletter as the user traveled down the page.
While we agreed with the concept of this approach, we looked at our timeline and considered the difficulty of coding this advanced CSS animation. Instead, I proposed we could create the animation as a video and advance the video frames as the user scrolled through the page, like in this Codepen example: http://codepen.io/ollieRogers/pen/lfeLc/
This experience proved too cumbersome for desktop users, and wasn’t a viable solution (at all) for mobile users. Back to the drawing board.
We stripped the content down to the necessities: a headline, minimal supporting copy and a sign up form to allow early adopters to join a waitlist with information about the app’s release.
Then we concentrated on an engaging visual. Curating content is a lot like hand picking items and forming them into a collage, an idea one of our writers presented early in the process. We decided to move the app experience away from the screen and into the tactile world of collage, finally settling on a stop motion animation in which hand-colored content blocks would form into a newsletter within the app’s UI. The mobile experience would focus on static versions of these items.
We sought buy-in from the wider team by mocking up our page design, and I created a rough stop-motion animation using post-it notes to communicate the idea of the animation.
The team went wild for the idea, and we moved onto the final execution. A small group of designers collaborated and we recreated simplified versions of popular apps that a user might curate content from such as Feedly, Spotify, Youtube, Safari and other reading apps. These were printed onto cardstock as outlines and colored with pencils. Elements from each were cut out, and these elements would travel from the source app into our Curate app when they were selected.
None of us had ever produced a stop motion animation, but after a few takes we simplified the animation down to something that could clearly communicate the actions a user could take in the app. We pieced together our photo sequence in After Effects, tweaked the composition slightly and looped it so it could play endlessly as a background loop for the landing page.
All in all, it’s a pretty unique solution that communicates exactly what you can do in the app while taking nods from the physical idea of curating objects.
Behind the App
When a user signed up to receive updates about the app from the landing page, they were to be served a sequence of emails with more information about the app. One of the early emails details the origins of the app as told by our product and development teams, and a video was requested to let the team members tell the story for themselves.
This video was a pretty straight-forward talking head piece, and I relied heavily on macro shots of the app itself to illustrate the various sections. Other handmade items were sketched to keep the aesthetic from the landing page alive.
The piece was shot mostly on the Nikon kit we’ve built as our office go-to, but we lacked a lens with any macro function. Luckily I had the Canon 24-70 available to me which can be switched into a macro mode. I added some motion to keep the shots interesting, and controlled the motion mechanically using the Rhino motion control system. This allowed for smooth slides even on the tight macro shots.
Another note I learned about shooting small device screens is about typing content onto the screen. Typically when I’m shooting a laptop screen, I’ll use Quicktime to record the actions, do a quick edit to shorten the clip to the necessities, then play that movie back fullscreen when shooting. This prevents the endless series of takes of trying to get the pacing of the typing just right while shooting.
On the phone, I guess you could follow the same process, but I opted to just type everything out to start with, then delete characters one-by-one. When played back in reverse, it appears as though you’re typing as long as the keyboard and fingers aren’t visible in the shot, and it is much easier than the tedious work of time remapping footage of someone trying to type, correct mistakes and retype a sentence in a fashion that is smooth.
iOS App Store Preview
Apple allows for a short preview video to be included with an app listing in it’s app store. These short videos are aimed at showing the app’s features, functionality and design to potential new users and encourage downloading the app.
Unfortunately, these videos are very limited in what they are allowed to show, I’d argue too limiting. While keeping footage constrained to just footage captured directly from the app’s screen recordings is a way to filter out extraneous advertisements, the guidelines for app previews also note that all footage must comply with the app store terms of service, which can limit showing the full experience of using an app within iOS.
So what exactly does that mean for Curate? Our app, Curate, depends on using Safari or another reading app and the native iOS share-sheet in order to collect content into a newsletter. So, the flow goes like this: Read content from Safari, activate share-sheet, select Curate as the app to share content into, close Safari, open Curate, customize content within Curate. As you may note in that flow, the user would interact with the iOS home screen during the normal process of using the app.
So you might think, that would be totally OK to show, right? Wrong. Apple’s terms of service prevent showing the home screen/springboard and will reject an app preview based on a terms of service violation and copyright. So which part violates the ToS: Apple app icons? Third party app icons? The springboard itself? It’s not clear, so removing it altogether was the solution.
Another note here is that when an app preview is rejected during the app store binary review, the entire app is rejected. You could remove the video and resubmit the binary for review, but releasing a new video requires another round of review and an app update. Basically, if you don’t do it right the first time, you could significantly delay your app’s release.
For our app preview, we went back to the two problems our product team had identified early in the process and wrote a script to answer both of those questions: the Why? and How?
Capturing footage of the app is pretty simple, just connect a device to your computer via USB, open Quicktime and select File > New Movie Recording. The device can be selected as the source by clicking on the small arrow near the record button.
Editing the footage, recording the voiceover and adding some basic motion graphics is pretty straightforward, so I’m going to concentrate on what makes these simple preview videos a lot more complex to create.
With iOS, there are several screen sizes to support. For capture, I used an iPhone 6+ which has the maximum screen resolution of all the devices currently available, 1080×1920. This footage could be edited, then down-converted to other sizes that fit the same aspect ratio: the iPhone 6+, 6 and 5 fit a 16:9 aspect. Since we also wanted to support the iPhone 4, I cropped, masked and moved important elements from the 6+ recording to fit into the 4’s 3:2 aspect ratio. That still leaves the iPad unattended, so I re-recorded the footage using an iPad and applied the same exact edits I had made in the iPhone version, but with the iPad’s 3:4 aspect ratio. In all, we shipped 4 preview video files to the app store as part of the package of the app.
As you can probably see, the resulting app preview is actually a really good explainer for what the app does and how it works, and with Apple’s limitation of just 30-seconds, it’s really concise. When it came time to promote the app’s release, lacking a proper explainer video, we opted to include this video in the announcement blog post, which scored 93% engagement from viewers.
Since many of our blog readers consume it’s articles from their laptop or desktop, we opted to include a button at the end of the video so users could send a download link directly to their mobile device via email.
The execution of this was pretty lo-fi, just a mailto: link with an email populated with messaging and the download links for iOS and Android. Using Wistia, you can enter the mailto: as a call to action hyperlink, or as an HTML button. If you were to host your video on Youtube, you could setup a redirect from a URL already associated with your Youtube channel (Youtube only allows you to link to external sites you own) that would redirect a URL to the mailto link, as illustrated in the images below:
By the way, this also works if you’re looking to create a click to tweet from within one of your Youtube videos. In this case, you can use a service such as Click to Tweet to generate the tweetable link, and redirect traffic to that URL.
Part of the strategy of ensuring users would pick up and retain excitement for the app was to make the onboarding experience really helpful. Our product and development team decided early on that a video would be the best way to communicate that onboarding experience and it was the easiest to implement.
There were several important steps that needed to be covered in the on-boarding: explain how to activate the iOS share sheet and explain what a user could create by using the full functionality of the app. I scripted out some actions and broke it down into three steps:
- Collect awesome content: This section would show a user collecting content from an app, activating the share-sheet and selecting Curate. Conceptually it was important to us to show that content can be collected from a variety of apps, not just a browser or webpage, so I followed imagery cues from other aspects of the app to illustrate this idea.
- Personalize it: In this section I relied on footage captured directly from the app to show the gestures needed to activate the app’s editing capabilities.
- Send it to a growing audience: This section focused on showing users the ease in which they could turn their collection of curated links into a pre-formatted email newsletter, ready to send to their subscriber lists.
From a practical standpoint, with the app design locked, it was easier to recreate the app’s design in After Effects using solids and shape layers in order to morph from one screen into another.
We made a few important decisions around implementing the video into the app. First was placement, it would be the first thing a new user would see upon opening the app, capturing their attention from the beginning. Another was to auto-play the video. Our experience of including video in other similar placements has shown that if users are given the opportunity to activate the video with a play button or skip past the video, a significant number of users will just skip it right away. With an auto-playing video, we could ensure more users would see the video, while also giving the option to skip should they want to get started right away.
The onboarding experience also included a live example of activating a share-sheet that would curate one link into your newsletter right away, so showing the exact process for activating a share-sheet wasn’t completely necessary in the context of the video, but rather explaining the ease and reason for doing so was.
The final piece of our launch strategy for Curate was hosting a physical event to promote mass awareness for the app and our company. Our public relations team translated the concept of curating content into sharing your love, in that curating links that your readers might enjoy is a lot like sharing things that you love.
The execution of this idea found our PR team organizing an event where the public could share all the ways they share their love on a giant chalkboard placed in the middle of downtown Philadelphia, and we would film participants and pull interesting responses aside for a quick interview.
Our production team for this piece was pretty small, just two people to shoot all of the b-roll and interviews over the course of a few hours. We divided the work like this: one camera with a wide angle lens would cover wide shots to establish the scene and capture ambient audio, while another camera with a telephoto lens would capture close-ups of the messages as they were written and handle the interviews. To slim down our crew we depended on a wireless lav mic that we could clip to interviewees and crop out of the shot, ensuring that each interview could be shot by just one camera operator.
Once the piece was fully edited, it was placed on Youtube and Facebook channels and promoted to a people throughout the Philadelphia region. The strength of this piece is that it’s a full-good piece of video that emphasizes local pride, and just happens to be branded with information about our app that allows people to continue sharing their love in a different way.
There are plenty of articles that can speak to optimizing videos for Facebook or Youtube, but I’ll leave you with just one tip: Caption your video.
As users scroll through their Facebook news feed, videos auto-play without audio to capture their attention. By captioning the dialogue from within the video, you can provide context that a user wouldn’t otherwise have, and prompt them to activate the audio to get the full experience of your video.
To upload a caption file to Facebook you must create a .SRT file, which contains timecoded captions that cue Facebook to display your captions at certain times. There are plenty of services that can produce these timecoded captions for you, but for short videos I tend to type up all of the dialogue myself, then use Youtube’s auto-syncing tools to sync my words with the audio. Since I was uploading this video to both platforms, it was an easy step. Just add a new subtitle file within Youtube, paste in your transcript and hit the Set Timings button. In just a few minutes you’ll be able to download a timecoded .SRT file that you can also upload to Facebook.
One note, Facebook has a strict naming convention so that it can understand what langugage you are uploading your captions in. For an american english subtitle file, you would follow this naming convention:
This project was a lot of fun as it stretched our design and video teams to think outside of it’s normal design patterns and try something new. Also the sheer number of different projects we worked on in a short period, from animation to talking head to on-the-street interviews was a thrill.