HOWTO: 9 steps to build an iPhone demo video with impact

Key Takeaways

Demo videos are amazingly useful to show people what your product does.  Most people don’t want to read, and are pressed for time.  Demo videos need to be short (< 2 minutes), fast-moving (to keep attention), and clearly describe the core motivations and functionality that makes your product useful and unique.  Building a good demo is a process that can go quickly if you know the right steps.  One person can do this — I did the work myself in less than 30 hours.

This is a brief summary of how I made our demo for WasteNot, our world-changing environmental app for the iPhone/iPod touch/iPad.  We’ve gotten tons of views and great feedback.

Goal

Build a quick, informative demo that:

  • Teaches what the product does and briefly how to use it.
  • Gives the inspiration and motivation for why people should care and go use the product.
  • Explain the problem you are trying to solve and how you uniquely solve it with your product.

Here’s the video we created:

Step 1:  Do Research & Figure Out the Length

Key Materials/Technologies that we used: YouTube.com

Go watch a bunch of demonstration videos on YouTube.  Take notes on what you liked, what worked, and what didn’t work.

Choose a length: 2 minutes (120 seconds) was the most we could expect people to sit and watch our iPhone app demo video.  Your product or service might require less/more time.

Step 2:  Brainstorm and Storyboard

Key Materials/Technologies that we used: Pen and re-used scrap paper.

About 2-months before your product launches, start thinking about what the key problems are that your ideas are solving, and why you have a unique solution that people should care about enough to spend their time watching your demo.

We chose to split our demo into two parts:

  1. Motivation: why we built our app, and why viewer should care.
  2. Demonstration: how we uniquely solved the problem, and how to use the app (key functionality).

Over the course of a couple weeks, sketch out the story you want to tell with pen and paper (on the backside of junk faxes/old printouts — WasteNot!), and put together a story to tell.  Figure out the basic timing of how your ideas and visuals will flow from one to the next.

Step 3:  Get Feedback

Key Materials/Technologies that we used: in-person chat, phone calls, Skype.

Show your sketches to other members of your team, your friends, or family. Ask for honest feedback on how to make it better.  Integrate their feedback, and then show them your updates to see if you sufficiently addressed their suggestions.

Step 4:  Make Some Initial Keyframes

Key Materials/Technologies that we used: PowerPoint, Gimp

Create some key graphics that you can put into sequence to see how it will look and to start planning the flow.

I wanted to do the first part in a presentation-style demo that people would be familiar with, and then transition seamlessly into the real-time app demo.  I wanted to use OpenOffice, but kept having problems with it crashing.

I ended up using PowerPoint to create the graphics.  (It also crashed, but less frequently.)  I built slides for each keyframe.  I then split apart each section of each slide and put them onto separate slides so I could save them as individual images.  This way I could animate any graphic independent of the rest.

NOTE: this includes the title and any text — they each got their own slide.  This is because you can always animate two different images the same way, but it’s much harder to animate two different parts of a single image differently.

I made the background of the slides a single color, and then saved them as lossless .TIF images.  I opened the images in Gimp, selected the background color using the magic wand-looking selection tool, and deleted it, making the background transparent.  This let me layer my images in any order I wanted.

Step 5: Initial Video (no voice)

Key Materials/Technologies: Final Cut Express

I had a licensed copy of Final Cut Express (FCE), so I taught myself how to use it.  I’ve used Sony’s “Vegas” software and liked that too.  Any movie making software with motion controls should work.

I put all the images from Step 3 into FCE, and layered them appropriately.  I briefly played with the timing of transitioning the images to make sure it felt like it was moving fast enough, but not too fast.

Don’t waste too much time on this step.  You’ll be changing all the timings and animations after you record your voice-over.

Step 6: Voice-over

Key Materials/Technologies: Audacity

I wrote a script for what I wanted to say, and then had my team help me edit until it was right.

I then read it aloud and recorded it using Audacity on my MacBook Pro laptop using its built-in microphone.

I made about 40 recordings.  I selected the 10 I liked best.  I then narrowed it to 3.  I listened to each 3 times, and then chose my favorite.

I reasoned that a single recorded session would sound better (and take less time) than trying to piece together several different recorded sessions.

Step 7: Screen Capture of the App using the iPhone Simulator

Key Materials/Technologies: iPhone Simulator, PhoneFinger, ScreenFlow

I played back the chosen recording from step 5 and figured out the timings for when the app needed transitions in the simulator.

I found the amazing donation-ware application PhoneFinger that turned my mouse pointer into a finger, size and style of my choosing.  (Thanks Dan, PhoneFinger rocks!!!)

I then used ScreenFlow to record the screen capture of me using the simulator in time with the audio recording.  I made sure I had a solid color screen background.  ScreenFlow let me crop the video down to just the simulator, and then saved it as a lossless .mov for me.

Step 8: Timing and Exporting the Final Video

Key Materials/Technologies: Final Cut Express (FCE), iPhone (for watching playback)

I imported the audio from step 5 and the movie from step 6 into FCE.

I spent a lot of time making sure the animations and transitions happened the way I wanted, at the times I wanted.

I exported the video.  Current best format specifications (resolution, codec, etc) were found on the YouTube site.

I made two versions:  a 640×480 movie for uploading to YouTube, and a iPhone (.m4v) version to distribute via our website.

I watched both on my laptop, and on my iPhone, and made sure both movies looked good on both platforms.

Step 9: Publishing

Key Materials/Technologies: YouTube.com, HTML

I uploaded the video to YouTube, and then used their privacy-enhanced embedding code to include the video on our main WasteNot page.

Hope this helps you build your demo video better and faster.

This entry was written by Lie Njie , posted on Tuesday March 30 2010at 11:03 pm , filed under Howto Actionable Guides, WasteNot and tagged , , , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

7 Responses to “HOWTO: 9 steps to build an iPhone demo video with impact”

  • [...] This post was mentioned on Twitter by bklem, Kismet World Wide. Kismet World Wide said: Check out our new blog post! HOWTO: 9 steps to build an iPhone demo video with impact: http://is.gd/b7lWH [...]

  • Sanjay says:

    Very informative. Thanks. Question – I would like to illustrate my iphone app concept with iphone images. I do not have anything running in the simulator yet. Is there a way to get an iphone image as background and then layer some of my own graphics on top of it. Reading above it seems like you used gimp for it. But I am not sure where I can get the iphone background image.

    Appreciate the help.
    -sanjay

    • Beth says:

      If you’re registered as an Apple Developer, you should be able to find .psd image files in the iPhone Dev Center which have a base image of the phone in both landscape and portrait mode. Here you will see how I’ve used the landscape version for our website: http://kismetworldwide.com/wastenot/stats.html

      You should be able to find it if you search for the App Store Identity Program and look for artwork or more specifically iPhone_Landscape_0708.psd and iPhone_Portrait_0708.psd (warning: the number in the filename may have changed)

  • BK says:

    Thanks for sharing this list. It’s helpful to see how other people are achieving this. I went thru this process and finally gave up for the time being. Maybe I’m just a perfectionist or don’t have the right tools or something (actually, it’s probably just a skill I don’t have, if I’m honest about it). I’ve started looking at services like appshows.com. Anyone else in the same boat? Maybe a specialist is the way to go so that I’m /spending/ the money rather than just wasting it + more time. Anyone have thoughts?

    • Lie Njie says:

      Build vs. Buy is always a tradeoff that you should debate in any professional effort.

      It all depends on:

      1. How much cash do you have on hand? Competent, experienced professionals who do this kind of work are generally very expensive.
      2. How polished do you want the demo to be? Experts will generally make better looking products.
      3. What you are trying to achieve with the demo? Who is your audience, and what do they expect?
      4. How often will you want to update the demo once you have a first version? The more frequent the changes, the more expensive the whole project will become.

      Looking at appshows.com, their pricing is currently $2000 – 3000 for a mere 2 minute demo! Our demo took me about 30 hours to build with some background understanding in image editing, audio, and video creation, but I had very little experience with the tools I used (especially Final Cut), so that means for similar effort you would be paying them $100/hour (or more if they’ve streamlined their process to do it quickly, which is likely). If you have lots of cash and little time, it might be worth it. If you are on a tight budget, then you may want to spend the extra time working through the tools.

      Also, if you are going to be changing the demo often — for instance with each new version of your app that you release — then the follow-up costs could be significant, especially if the changes are small and frequent. Once you learn how to do this once, each update will be quick and much less painful. However, if you have the cash to spend and want one demo and won’t ever change it, then outsourcing might make a lot of sense.

      If you post specific questions about what you’re having trouble with, I’ll be happy to answer them!

      If you are looking for cheaper ways to outsource this work, you might want to post on a site like Craigslist.org and ask for price quotes and examples of work. You might a freelance contractor with skills and experience who is willing to do it for $500-1000, especially in this economy.

      If you do decide to outsource, do NOT pay up front, only pay when you are happy with the result and have the video — I’ve heard of several scams where people pay some large percentage up front and then never hear from the company or individual again. (Note that I’ve never heard anything good or bad about appshows.com.)

  • BK says:

    Some good thoughts, Lie. Thank you for the response and your objective approach. I’ve sort of shelved the demo for now, which is a good thing while I focus more on other business/product aspects. But this is making me consider the approach for when I move forward because I view a demo video as an essential marketing and communication tool. As you say, weighing the debate as part of the professional effort.

    Your point about money is well taken. I’m not flush with cash, but I don’t think $2000 is an unreasonable expense. Especially if I can get some lifespan out of the result. I recognize that video production is a skill, or set of skills like anything else and I appreciate that. Especially for things like voice over, music, etc. My voice would not be a good selling point on a video, so that alone… lol!

    But I tend to think of this issue as a business decision – what would help me move forward most efficiently, with both time and capital. The problem I have, and I think a lot of people are similar, is that I can easily get sucked down the rabbit hole of learning new tools and technologies because it’s fun (that’s how I stumbled on your post : ). But unless that’s a strategic decision, it often ends up taking me away from the areas I should be focussing on. I end up asking:

    * Is working on the demo worth sacrificing a week of my time? (and at the end of that week, do I have something worthy of the time spent or just something mediocre?)

    * What else could I be doing with a week of work?

    * Which decision would make me more money (or advance my value/product value in some way)?

    Now, your point about changing the video often for updates is a really good one, because I hadn’t considered that. If I were to create new videos with each update, and I had multiple updates a year, then paying 2k for each instance would likely be unaffordable. Hopefully I wouldn’t have to spend a week on each video I made, because that would be a productivity sink as well. And I guess I’d have to ask if I really need a new demo for each update or if a nicely worded changelog is enough – which I imagine it would be in my case. So, something to think about.

    I had looked at Craigslist for some video editors, but honestly I wasn’t a fan of the local work I saw which mostly centered around things like weddings and parties. When I look at the demos on appshows it seems like they “get it” in terms of how to demonstrate an iphone app. The demos keep my attention and I feel like I understand the app at the end. Your video is pretty good at that also. I don’t know if I can expect that kind of result from a traditional video editor.

    The scam thing is something to be weary of, but that’s with any project I suppose. I’m pretty sure Appshows is legit; Cooks Illustrated is a pretty major brand and so are some of the others on their list. iFitness is repeatedly ranked high in its genre. I’ve seen some forum posts here and there that like the service.

    In the end, it comes down to your question: to DIY or to hire. The discussion has been helpful in allowing me to think that through. So thank you. Hopefully anything else pertinent will also emerge in the thread. Man, do I feel long winded here! lol

    • Lie Njie says:

      Great followup, BK! I definitely have been through the same debate — was the week I spent learning Final Cut and the other technologies “worth it”? I feel it was because now I can talk competently about video creation and I know what it takes, I have the proof to back it up, and I can easily churn out future videos now that I have the skills. But Kismet World Wide is also a consulting business, and having a breath of demonstrable experience to bring to the table is one reason why our clients are so happy with us.

      Re Marketing: Our video has definitely been significant in helping people understand what WasteNot is and does, especially for people without an iOS device. I would strongly recommend that building an iOS app also build a website and prominently feature a demo video on the first page.

      As for the followup work — I doubt my next video will take even 1/2 of the time that the first did because I’ve got the framework from the WasteNot video and honed the skills to build it. Removing the learning curve will make it either much quicker to do, or will result in a much more professionally polished video after the same 30 hours of effort. And if I decide to outsource it, I’ll be much less likely to get scammed because I know know exactly what it takes to build a good video.

      Best of luck in your endeavors, and thanks for catalyzing this excellent follow-on conversation!

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>