Make the Commercial First

If an app launches in the app store, and no one hears it, did it really launch?

Today, digital products like apps and sites require marketing. Luckily, this has become easier to do, even a limited budget.

This is also a great opportunity to do market research. Many products fail because they don’t solve a need their customers have or because the customer doesn’t know they themselves have a need for the product. Too often the team gets all the way through building the product to find out they can’t explain the product. Both start-ups and established companies could benefit from a new approach.

Every product has at least one scary question to answer: Is it viable? Does the profit exceed the cost to get customers? It’s not a good sign if you plan to charge $1 per app but your cost of acquisition is $1.50. But how do you find out without building and launching?

Here’s a counter-intuitive idea: Make the commercial first.

Way before starting to code, discover the true value of the idea using tools you probably already have. This article covers techniques to rapidly visualize your idea and get early feedback.

“Design the box first” is a classic design exercise to use constraints to discover the unique value proposition. This spoof packaging video shows exactly how not to do it.

Because digital projects don’t generally have packaging, videos are a good linear storytelling format. You may be tempted to make a ten-minute video that explains every feature, but embrace the constraints. Make the 30-second commercial first. Radical simplicity will help you discover what your true message is.

Marketing is often thought of as something you do after a product is made, but it has a special role at the formative stage of a new project. Teams can often go heads down on building the thing because explaining it is too hard, only to find that they can’t explain it after it is built.

A marketing page is one version of the minimum viable product. This is not a distraction; it forces a team to explain the value proposition and iterate on it. Engaging with potential customers, right from the beginning, and learning what they want is an essential skill.

Why this matters to designers

Designers have a unique skill set. Rather than simply add a UI to an existing product idea, the tools and techniques designers use can be adapted to think through the product itself. Taking on the role of customer researcher also empowers a designer to shape the product strategy when it is the most undefined. This may very well become a standard part of the design process.

Also, it’s fun as heck!

We’re already in a new era of video

Making commercials or demo videos used to be a complex and costly process, costing tens of thousands of dollars, but modern computers and video recording on phones have changed all this. Your computer, or even your phone, has all you need to get started.

There are some awesome demo videos out there with very high production values. That is not our goal, or at least not at first. Ours has to look just professional enough to be believable.

This is easier than you might think.

There are obviously entire industries dedicated to making movies, TV shows, and videos. Those people are the professionals, and do things the right way. But there is another path: Fast, cheap, and personally involved. Like most designers, I don’t have any special background in film and video, but I’ve been fortunate to learn from from talented designers like Hillman Curtis, who explored the boundaries of new media.

Instead of a professional video, the design team can use their own tools and techniques to create with a simple video and evolve it over months. Even if you eventually end up filming a professional spot, you will be much further ahead, having learned what connects with customers along the way.

Examples Kickstarter is a wonderful place to see good (and bad) examples of people making their pitch. Two favorites are Exploding Kittens and Coolest Cooler. Both products were extremely successful, but note that neither video is especially slick. That is not necessarily a bad thing; it conveys an honest description of the state of the project. Here’s an example of a no budget video that got customer feedback for a proposed running app. This was especially important because the key feature to be evaluated was not visual—it had an all-audio interface.

The process

Our goal here is, at first, not sell the product to customers but to learn what works. Instead of speed to market, the goal is speed to learning. In every step, you will launch something you are not satisfied with.

This is a feature, not a bug.

1. Get your elevator pitch down.
2. Expand the pitch into a presentation.
3. Add video, images, music.
4. Edit the video.
5. Post the video on a simple site with analytics.
6. Buy traffic, analyze, revise, and repeat.

1. Create the elevator pitch

It’s tempting to grab a camera or even start storyboarding scenes, but the best place to start is in an elevator. Specifically, polishing your elevator pitch. Despite this being a visual medium, verbal communication is still the best for concepts.

Give yourself 30 seconds to explain the basic idea using only words. Try a few variations of theme and content. Next, record them and play for friends uninvolved in your project. What questions do they have about your pitch? Answer those and get to work on the script.

Imagine you wanted to create a conference about AI-driven design but first wanted to find out if there was an audience for it. Here’s how you might write the elevator pitch:

Artificial intelligence is transforming the world. The desAIgn conference will collect people who want to use AI to redefine design.

2. Expand the pitch into a presentation

When I’ve talked to people about this process, they tend to get hung up on writing a great script. We’re not looking for a deep exploration of emotional development. We’re working on the kind of action movie where the director starts shooting the explosions first and fills in the plot later.

Instead, I suggest you start by making a PowerPoint presentation. You should be used to explaining the product by now, start by writing those points down. If this is new, here are key questions your script should answer:

• Who is this solution for?
• What do they think their problem is?
• What’s not working with current solutions?
• What is your new solution?
• Why is your new solution better?
• Conclude with offer / call to action.

Limits are helpful here. You need to get all this across in 30 seconds. You’ll likely be tempted to draw this out to five minutes. That’s the “explainer” video, where you show all the features in action, with all the cool details you can’t wait to impress people with.

Make that one later.

Your focus for the beginning is your unique selling proposition. (For more, the book Value Proposition Design can be a great help.)

The desAIgn conference is for future-obsessed designers who have heard a lot about AI but have little practical experience. They are excited to try out the new hot topic but lack technical experience. This is the first AI conference focused on designers.

Tone and content

Consider your tone. What is the feeling you want to convey? Professionalism? Fun? It can be helpful to build upon people’s deep memory of standard film tropes. Slight changes to music and wording can have major impacts, as the spoof trailer that turns the classic horror movie ‘The Shining’ into a into a heartwarming story.

Just be careful that the style doesn’t get in the way of the message. There is the temptation to make wacky video in the hopes that it will go viral.

Make that one later.

Our conference wants to convey the tone of excitement about the future. Because AI is invisible, product shots won’t work, but you can show its effect on people and places.^[a]

Titles and branding

This is the easiest to create for a designer. Custom images with the logo enable you to reinforce the feel of the product. On-screen titles are great for emphasizing the key points of the message. Don’t be afraid to repeat the voice over but keep the text short. Use the standard title templates in the video editing program to start. This allows for quick changes.

Are we the last generation of human designers?

Artificial intelligence is transforming the world. Learn how it will transform design at desAIgn conference. ^[b]

Let’s combine voice and tiles into a rough powerpoint deck script:

1. Slide
   1. DesAIgn logo on black
2. Slide
   1. Background: Thematic video
   2. Title: “Are we the last generation of human designers?”
   3. Voiceover: “Artificial Intelligence is transforming the world. Learn how it will transform design at desAIgn conference.”
3. Slide
   1. Background: Video of conference audience
   2. Title:
      1. Training your AI UI bot
      2. Go from A/B testing to A/Z testing
      3. Advanced data analytics
   3. Voiceover: “Learn the essential topics for the modern designer.”
4. Slide
   1. Background: Video of conference speaker
   2. Title:
      1. Cognitive color selection
      2. Bot friendly icon styles
      3. HR for AI teams
   3. Voiceover: “Your pass includes workshops on…”
5. Slide
   1. Background: Video of conference panel
   2. Title:
      1. Siri, Apple Inc
      2. Alexa, Amazon LLC
      3. Watson, IBM Inc
      4. With a keynote from HAL 9000, HAL Laboratories
   3. Voiceover: “Including speakers such as…”
6. Slide
   1. DesAIgn logo
   2. Title: Click here to learn more

3. Add video, images, and music

To keep the video simple and you sane, you’re going to take an unusual approach to fleshing out the commercial—an agile, iterative approach.

Starting with our PowerPoint presentation version of the commercial, you should have it sketched out using just a combination of voiceover and on-screen titles.

Remember that you can record narration into a self running presentation. This helps you iterate quickly and stick to your timeline. Next, add in still photos. Later, replace the stills with stock video clips. Then, shoot just the custom videos you need. Finally, replace the rough bits with professional quality work. See the references section for tips and sources.

You may be uncomfortable with using rough shots to work out the ideas, but some big name movies—Rogue One, for example—have started the same way.

There are surprisingly few types of elements that make a video a video. They are listed here in order of importance.

Product detail shots

This is the most basic element. If you have a physical product, show it. If it is a digital product, show screens. A common question is: How do you show something that doesn’t exist yet? If a product is starting with a MVP, should you show that, or the full version? This is where a designer’s special skills come in. Design the first version you would have someone actually buy; call it minimum marketable product. Later you can (and should) test versions with more features against the first version.

People using the product

Even better than showing the product, show people using it. The more context you can build into the scene the better. If the product is for home, don’t shoot in a conference room. Be creative and have fun!

On-screen narrators / User testimonials

If you do have users, recorded testimony is very compelling. If you don’t, try recording people who have the problem your product addresses.

Communicate the context

This is where you get to have a little fun. Keeping in mind that most new customers have little context of what you are selling, set the context for your solution. If you were making a running app, show people running. You can add warmth to the commercial with thematic videos such as landscapes. Take care to limit the amount of movement on screen, which will distract the viewer from your voiceover.

Sound effects

Used subtly, sounds can help accentuate key points.

4. Edit it all together

The editing program will be your hub, integrating text, images, audio, and video.

To keep the strategy of simplicity, avoid all professional tools. They are too likely to suck you into that delicious learning spiral that takes you away from the project.

Just use the built-in apps on your phone and computer. Film with the video camera in your phone. Edit it together with a basic video editing program, such as iMovie (Mac) or Nero (Windows). This tutorial will focus on iMovie for Mac users. Here’s how to get started.

Interestingly, iMovie exists on the iPhone/iPad as and the Mac. Starting a project on the phone is a way to revise as you go, as well as giving you constraints to help focus. I did the first edit of a recent video while waiting in the dentist’s office.

5. Get feedback on the commercial

To improve, you need feedback from your target audience. If you know or work with your customers, just ask them. If your audience is hiding out in the wide world, more creativity is necessary.

Stay focused on your core value proposition; choose quick and over perfect—literally, 1 (one) page. Do NOT design it; use a template host such as Squarespace. Focus only on the content. Using off-the-shelf tools, you can have a site published, with analytics, capturing customer data, within an hour.

Many designers will cringe at the prospect of giving up control of the thing they do best. But fear not, this is merely temporary. When you have time to build and launch a site, do it! Fast and cheap is a great way to defuse procrastination.

However you make the site, you should not compromise on learning through analytics. At the early stage, you should ideally have multiple variations being tested against each other. You learn much more by comparing two options than having simply rating one design. For example, how much does a “free” offering compare with the paid option?

There are many analytics packages, but Google analytics is a reasonable first option. Google has a help page on setting analytics up on a Google site. You will likely want special analytics on the video events, such as how many people started watching, but there are also more detailed metrics.

But how will the right people find out about your video? You will eventually need to market this product, so why not use the same tools for research? A Facebook or Google ad campaign can drive traffic to your new page.

6. Live in 3D: Data-driven design

After creating your page, adding analytics and a survey, and sending hundreds of potential customers to the landing page, you are ready to start understanding how the audience will respond to the idea, all before starting the project.

An iterative approach that starts with the marketing can radically improve product design. A designer has the unique skills to strategically direct the product at the earliest stage, it is in fact, our super power.

References

People using the product

If you have a digital product, an on-screen video of someone using the app is one of the key screens. This can be done in a number of ways, including overlaying a screen recording over a video in an editing program. As an example, the Ken Burns effect in iMovie can be (mis) used to overlay a scrolling image of your screen over video to simulate usage. Placeit.net is a magical service that you can use to import screens into slick videos.

Recording audio and video

There are obviously whole books/degrees/careers on shooting video. Shooting on your phone is a humbling affair. It’s also the right kind of constraint to keep us focused on what matters: The content. Here are some good tips.

• Use a tripod, even if that means rubber-banding the phone to something.
• Generally speaking, good lighting is usually more important than the camera’s resolution.
• Rooms are generally much noisier than you think. Take a recording of silence to check if you have “A/C hum.”
• If people are speaking on camera, a boom mic is a really good idea. Otherwise, use a lavalier mic, or even your phone earbuds’ mic. Better: Do you really need a person speaking on camera, or will a voice-over do?
• For moving or panning shots, use image stabilization such as the Instagram Hyperlapse app for iPhone or the Microsoft Hyperlapse app for Android. Although meant for timelapse, you can save the files at 1:1 speed and still get image stabilization.

Digital designers usually need to record your screen. Here’s how to do it using Quicktime, even from an iPhone. A real quick and dirty technique is to put your mockup screens in PowerPoint, set automatic slide advance transitions, and export as a movie.

Recording voice-overs is a whole profession in itself, but good guides show how you can record at decent quality if you are careful.

Preparation is more important than gear. In a quiet room, you can get by with a good cell phone ear bud microphone. iMovie has the ability to record voiceovers directly, which is very helpful to quickly iterate on your script.

Again, our strategy here is to get the content down and replace with professional work once you have your script polished. Hiring voice actors is surprisingly inexpensive at places like www.fiverr.com.

Using stock audio and video

Using images, video, and audio by other people is a great way to quickly improve the professionalism of your commercial.

Apple’s iMovie includes royalty-free music and sound effects. The background songs are a bit generic, but great for adding warmth right from the beginning. Note: youTube / Facebook will occasionally restrict uploading of stock audio due to false claims of ownership. Contest it using the Apple Audio License Section 2C.

There is also a wonderful world of Creative Commons music, for example, on SoundCloud. But, as in all things, don’t be a jerk. Use only what people make available for reuse, for example with the Creative Commons License. You can even search for CC videos on sites like Vimeo, Flickr, and YouTube. If you are in a position to do so, please support artists by licensing music and video.