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.
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:
- Motivation: why we built our app, and why viewer should care.
- 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.