You might also like reading...

• Lean Interactive Requirements – The End of Specification Documents
• So You Wanna Be an Entrepreneur?
• The eagle who lived as a chicken

Related posts:

How to prototype iPad apps in 30 minutes or less using Apple Keynote

You might also like reading...

• Corporate Designer vs. Startup Designer
• Customer Development Hacked: How to find and interview 10,000 customers in one day
• How it all began (A personal story)

Dina’s foot hit the curb, and her body jolted forward.  The cane fell off her hand, and she felt her palms and knees hitting the hot sidewalk. The fall reminded her of her days at elementary school, but her body was now much older to take it gracefully. It was painful. And despite the fact that it was early afternoon, it was pitch black. Her mind hated the paradox, but she knew that if she needed to survive, she’d better adjust to her new situation. Everything sounded much louder: car honking on the street she just ran across, voices of pedestrians, and footsteps on the sidewalk she just fell on. How would she ever get used to this?

She felt a couple of strong hands helping her get up, and another handing her the cane that fell off. A female voice asked her if she needed help getting to where she wanted. She thanked her. She knew that if she started asking for help this early in the journey, she would never be able to go anywhere on her own.

She dusted off her pants with her scraped palms, and resumed her walk in the darkness. She counted the steps to her next turn,  feeling her way around the bumps and holes on the sidewalk with her white cane. That day, there were no street names, no visual landmarks, and no red lights. It took her more than two hours to walk home from school. A journey that took less than 20 minutes only few days earlier, when her world still had light.

For the following weeks, Dina experienced almost everything a blind person would go through to adjust to her new world. One where ears replaced her eyes during long lonely trips on uneven sidewalks, busy streets, and crowded public transportation. Being blind is one thing, but being blind in Egypt was a completely different story. She knew that she had to go through all of it, to understand what it feels like to be one. She knew that if she couldn’t live it, she wouldn’t be able to help them. That’s why she decided for her graduation project as a vision therapist, to tape two cotton patches on her eyes, wear a pair of dark glasses, and live for three weeks as a blind person.

Last time I visited Egypt, Dina told me her story, and I could immediately see how her world was transformed. She no longer describing her patients’ experiences, she was describing her own because she’d lived as one of them.  I remember to this day her exact words "Everything I studied was just a theory. When I asked them about their challenges and problems, I tried hard to relate to their answers but honestly couldn’t. Now I hear them talk and I nod – even though they can’t see me. I nod because I know what it is to be there. Sometimes, I ask them advice about how they coped with a particluar situation, and often they ask "Have you ever been blind before? You describe my world better than I would describe it myself."

Since her graduation with honors from the school of education, Dina continued to do this ritual every year. Her patients are constantly amazed by her ability to describe their challenges as if she were one of them, not just someone who’d studied them in order to help them. She continuously crosses the bridge between her world and theirs, and returns with a wealth of insight for her work and Ph.D. research.

Hearing her story was humbling, because Dina never read about customer development, and never had any entrepreneurial inclinations. Yet she was doing something that most business don’t take the time to do.

Sometimes all we need is a little bit of compassion, sympathy, and the willingness to leave our world and step into someone else’s shoes.

You might also like reading...

• Client testimonials’ word cloud
• Which moment does your product own?
• How to create interactive iPad app prototypes in 30 minutes

Today, Keynotopia is two months old. What started as a single blog post last June became a product that got over 1,500 customers in the first 60 days. Before jumping into the story and lessons learned, here are some quick stats:

• Total time spent creating the minimally viable product: less than 3 hours
• Total startup cost: $47.50 ($5 hosting, $7.50 domain, and $35 wordpress theme)
• First paying customer within 10 minutes of launch
• Copies downloaded in the first 60 days: 1,491
• Page views on the original blog post: 40,894
• Unique visitors to Keynotopia: 19,235
• Link backs/mentions: 769
• Total product returns: 2
• Total variations/tests on the landing page: 29
• Made it to Google’s first results page in less than 2 weeks for the following search terms: iPad prototyping, iPhone prototyping, Android prototyping, Keynote prototyping, Keynote wireframes, …
• I’ve never sold any products in my life (except my old laptops on eBay and CraigsList).

The story:

I pressed the update button and took a deep breath. The website was finally online, and a surge of questions rushed to my head: What if it’s not good enough? What if people call me an opportunist for redirecting the blog post to a product page? What if no one wants to buy it?

I reminded myself that it took me less than 3 hours to put that website together, and it wouldn’t be so bad if no one buys the product. I glanced at the time on my laptop: it was 1:38 am, and my stomach was growling loudly. I put the laptop on the couch and went to prepare my favorite late-night-raisin-oatmeal.

Few minutes later, I was staring at the boiling water  on the stove, entertaining the thought of taking down the website to do some more work on it, and re-launch it few days later when it’s more ready for the public. I wasn’t used to putting half-baked products out in the wild, and it made me feel uncomfortable. Then I remembered a quote from Reid Hoffman: "if you shipped your product and you’re not ashamed of it, you’ve probably shipped too late". Pouring the oatmeal into the pot, I started thinking how this all started…

It had been less than a month since I wrote about how I’ve been using Apple Keynote to prototype iPad applications. I debated whether or not I should publish the post, thinking there was nothing new or useful about it. Yet, I decided to do it for the fun of it. What I didn’t expect, though, was for the post to be picked up by some of the most respected bloggers, becoming popular among the design and iPhone communities. In less than three weeks, the post generated more than 10,000 visits and 500 downloads of the iPad keynote templates I posted along.

I became curious to find out whether people were reading the post and downloading the templates because it was a useful idea or just a cool one. I wondered if they would pay for these templates, and how much they would be willing to pay. Since I asked people to subscribe to the blog before downloading the templates, I could just email everyone and ask. I could create a survey and ask them to fill it out, promising some freebies in return. But people are generally too busy to fill out surveys.

Then I thought about building a minimally viable product that would help me answer that question, and concluded that I could put something together quickly using WordPress. Three hours later, I had a WordPress website with an e-Junkie shopping cart and few screenshots of the templates.

DING!

My thoughts were suddenly interrupted. It was the Mac Mail client, which I’d set up few minutes earlier with my Paypal email. I walked back to the couch and stared at the laptop screen. I had an unread email. The subject: "Notification of Payment received".

Keynotopia was in business!

Lessons learned:

Sell your byproducts

Become aware of the value of internal tools, processes, or even hacks that you developed while working on your main product. In my case, I’ve been using many of these templates for my client work, and hadn’t thought about selling them until recently.

(The guys at 37Signals have a great post about this)

Kill the "Coming Soon" page

Many startups are technology focused, believing that a blog is a way to tell customers about their product once it’s launched. Before launch, they put out a "coming soon"page with an email sign up box. But that page has no value for potential customers, and little incentive for them to give out their email address.

Instead of a coming soon page, start a conversation: talk about your story, share your process and findings, and provide value even before the product is ready. There is no reason to wait for a product to be ready in order to have customers.

And if you write a blog post that becomes popular, use it as a conversion funnel for your product.

Focus on benefits instead of features

I tested over 10 variations of the tagline on Keynotopia’s landing page. The ones that performed best stated some tangible measurable benefits for the user (interactive prototypes in 30 minutes or less). The ones that had the worst performance stated what the product was (a collection of interface templates for Apple Keynote).

Give away a valuable freebie

I gave away the original toolkit I’ve been using for my work. In return, I asked for people to subscribe to the blog. The perceived value was worth giving out an email address for.

Later on, I created another wireframing set and released it for Free on SmashingMagazine. This helped tremendously with traffic and branding, and many people who downloaded the free templates come back to buy the full bundle.

Create a list, and start talking with customers

Many companies use lists to inform people about new features. I end up unsubscribing from most newsletters because they feel like ads: they feel like they are sent from a business to a business, not from a human to a human. In their attempt to sound professional, companies ignore the human side of business.

In my case, I wanted to have a conversation with everyone who’d signed up. I wrote a simple, personal text-only newsletter, I told them what I’ve been up to and asked them for feedback and ideas. I wrote it the same way I write an email to a friend, and many subscribers replied back thinking I sent them a personal email.

Create embeddable media

Almost every blogger who mentioned my original blog post embedded the youtube video I posted along. Having a YouTube video or a Slideshare document in a blog post helps spread the word: In addition to being good for SEO, it provides a good snapshot of your post to be embedded by anyone who wants to link back to it.

Never stop testing

For the blog post, I tested about 5 variations for the sign up form. Changing the title from "Enter your email to download the files" to "Subscribe to this blog to access all downloads" increased sign ups more than 500%

For Keynotopia’s landing page, I had over 29 iterations for the language and arrangements, reducing the bounce rate from 59% to 12% in less than 30 days

Don’t be afraid to charge for your product

Having a product is a good excuse to talk to your customers. Charging for your product is a good excuse for customers to talk to you. When people pay for a product, they become invested in it. In my case, many people who bought the templates email me frequently to share requests for missing UI components, or ideas for new templates that I wasn’t even considering.

Additionally, charging your customers helps you find out if there is a real pain point that your product is addressing, and if people are willing to pay to solve that pain point.

Keynotopia may not be a "startup" in the typical sense of the word. To me, it was an experimental project to teach myself many things I’ve always wanted to learn. It shifted my perspective from a service-oriented mindset (getting paid for my time) to a value-oriented mindset (getting paid over and over for a value that I used my time to create). My true epiphany happened when I woke up one morning to find few hundred dollars deposited in my bank account: while I was asleep, the value I’d created was hard at work

If you have a similar experience, leave me a comment below; I’d love to hear about it.

Related Posts:

        How  I launched a profitable product in 3 hours – part 2: The nuts and bolts

You might also like reading...

• Malcolm Gladwell outliers – A very personal review
• Listening
• The Feature is Not The Experience

You might also like reading...

• Malcolm Gladwell outliers – A very personal review
• My four steps to the epiphany: Lessons learned from creating a minimally viable research product
• The circus elephant

You might also like reading...

• 2008 – A year in review
• Don’t be a wimp
• Every man dies, but not every man lives.

I wasn’t surprised that developers didn’t like reading them. Spec review meetings used to feel like one of the scenes from office space – and I didn’t even have my red stapler.

An interesting shift happens when a fellow PM started prototyping instead of writing specs. And because we were basically creating a prototyping tool, he was testing the tool along the way. Dog-food’ing, as we used to call it at Microsoft. I followed his footsteps immediately. And not only I was having a lot of fun creating prototypes instead of writing requirements, developers were having fun using them and providing feedback, and spec review meetings went by like a breeze. Instead of spending time on making sure everyone understand the description of the interaction, everyone was on the same page much faster.

Needless to say, the final product matched the interactive requirements far more than it ever did with written spec documents.

As I recently started using Keynote to create interactive prototypes, I found more startups teams willing to use the prototype as their requirements. I realized that Keynote is ideal for this task.

Here is how I use Keynote to capture and communicate requirements

I won’t go through the detail of creating an interactive prototype in Keynote, as this has been covered in several previous posts. Once you’re done iterating on the prototypes, it’s very easy to annotate them in Keynote using comments and presenter notes.

Comments are sticky-notes that you attach anywhere on the slides to indicate a special case for user interaction or a message for development or testing teams.

And presenter notes are great way to track discussions on a specific screen or interaction.

The best thing about this workflow is that neither presenter notes nor comments show up in slideshow mode. So they won’t be interfering with the actual interaction when the prototype is being tested.

You can also export to PDF with presenter notes included, and still maintain the interaction within the prototype – in this case, the sticky notes will not hide/show nicely in slideshow mode as they do in Keynote. This is a screenshot of the PDF export:

If you’ve been writing long spec documents, give Keynote a spin. This is the lean approach to capturing and communicating requirements. And you don’t need to use different tools to create your prototypes, take screenshots, embed them in documents or wiki, and make sure the screenshots are synchronized with written requirements.

If you’ve been using better tools/techniques for faster requirements, please let me know about them in the comments.

You might also like reading...

• How I launched a profitable product in 3 hours
• Why A Launched Product Beats A Perfect Idea
• Cheap and fast interactive web prototypes with Apple Keynote

• No design tools
• Zero lines of code
• Prototype can be tested on the iPhone
• All created under 30 minutes

The video below shows how to use Apple Keynote and Keynotopia interface libraries to create a prototype for an iPhone apartment hunting application in 13 minutes.

The video goes through the same steps from the iPad post:

1- Create a new presentation based on the iPhone template (480×960 resolution)

2- Create main application screens

3- Add pop-ups,  highlights, etc…

4- Create hyperlinks to make the interface clickable

5- Export as a PDF file and test on the iPhone (I use the free version of GoodReader to render the final prototype)

And here are some of the UI controls used in the video (courtesy of Keynotopia).

Note: The UI controls are available in both Keynote and Powerpoint formats.

Give it a try, I guarantee it will dramatically improve your productivity. And if you have any questions, leave me a comment below.

Related posts:

• Creating an interactive iPad app prototype in 30 minutes
• How to prototype like a pro using tools  you already know

You might also like reading...

• Malcolm Gladwell outliers – A very personal review
• How I had one hour wiped out from my memory forever
• The catch

First, let me thank you for all the feedback that you provided about the iPad keynote prototyping. I hope that the hundreds of developers who downloaded the theme template are finding it useful.

As promised in the last post, here are some additional assets (all created in Keynote) that I’ve been using to rapidly prototype web applications and demo them within my presentations.

Once you download the Keynote template file ( link at the bottom of this post), install the file “Web Theme.kth” into <UserName> -> Library -> Application Support -> iWork -> Keynote -> Themes. Alternatively, you can double click the file to open it in Keynote, and choose file -> Save Theme. This will create a theme in Keynote that you can reuse to create new presentations, as shown below.

You might also like reading...

• D3 – Designing with Clients
• Don’t violate fundamental design laws – even when you are Apple
• Don’t be a wimp

What if you can prototype your next idea quickly and cheaply without learning any new tools or programming languages?

What if you can send your prototype to friends to play with and give you feedback, without having to install anything on their mobile device?

What if you can integrate your prototype into your presentation, and click through it to show your audience how it works, rather than boring them with bullet points?

And what if you can do all this without touching a design tool or writing a single line of code?

The following video shows a sample prototype created using nothing but Apple Keynote and Keynotopia‘s iPad prototyping templates. You can also see how I am testing the prototype on an iPad, tapping my way through different screens and dialogs.

Here are the UI elements I use in that presentation, which were all vector shapes created from scratch in Apple Keynote.

 

Why use Keynote?

The challenge with existing wireframing and prototyping tools is that you need to be a designer to create a good looking app prototypes. Additionally, most of them will help you create static screens, but not something that you can click through and test out.

Keynote includes powerful drawing tools, smart guides, styles, locking, and grouping. Master slides make it possible to reuse interface components across multiple screens, hyperlinks add “clickability” to the prototype, and slide transitions create cool interface animations with a single click. Finally, it works seamlessly with Adobe CS apps, so copying and pasting graphics works seamlessly across.

With the iPad prototyping templates for Keynote and PowerPoint, you can create a prototype simply by copying and pasting interface components on a slide, then creating hyperlinks to transition between slides, hence giving a prototype the needed interactivity and responsiveness to users’ actions.

How do you create a similar prototype in 30 minutes or less?

Download the iPad Prototyping template from Keynotopia , and install the file “iPad Prototype.kth” into <UserName> -> Library -> Application Support -> iWork -> Keynote -> Themes. Alternatively, you can double click the file to open it in Keynote, and choose file -> Save Theme. This will create a theme in Keynote that you can reuse to create new presentations, as shown below.

 

When you create a new presentation based on the iPad Prototype theme, you will see a single black slide. To access the assets, you need to go to the toolbar and click View -> Show master slides.

This will reveal the master slides panel above the slides panel, allowing you to click on a specific master slide and copy/paste assets into your slides.

Step 1: Sketching the user flow

To create your prototype, start by defining the different app screens that you will need and how the user will transition between them. I typically do this as a state diagram as shown below (Created on the iPad using Adobe Ideas).

 

It’s important that you get this diagram right because it will save you time doing modifications to your prototype later on.

Step 2: Putting together application screens

Next, you create a new slide for each screen, and copy/past components from the masters into each slide (Select a master slide > Select an object > Select target slide > paste object). Since all objects were created in Apple Keynote, they are fully editable (resize, change labels, change colors, add/remote elements, etc…). Each object is a group of building blocks that are grouped together. You can either double click on an object to select each sub-object, or ungroup using the Ungroup button on the toolbar, edit sub-objects, then group again. Grouping makes it easier to select and move objects.

 

Hint: After you’ve created each screen, you may find it at times easier to move the static components of that screen into its own master slide. That will save you time in making modifications in each slide if you decide to change something later.

After creating each screen, you duplicate (CMD+D) slides and add additional elements to them (pop-ups, fill text, …).

Step 3: Adding interactivity

Finally, it’s time to create transitions between screens. You do this by going through your state diagram, and for each slide, select the element that would transition it to another slide. For instance, clicking a picture shows the profile pop-up, so you’d select the profile picture (you can select all pictures in the slide), and in the Inspector -> Hyperlink select the target slide. Do this for every transition that you have in your state diagram. Keynote will add a blue indicator on each hyperlinked element in your slides.

 

Hint: Keynote is smart enough to know when you rearrange your slide, and will keep track of the right slide you link to even if you change its sequence order. Test your presentation frequently to double check that you’re hyperlinking the correct slides.

That’s it! You now have an interactive prorotype within your presentation.

Test it on an iPad !

If you’d like to test this prototype with users and see how they’d use it, you need to export it as QuickTime as shown below (This will prevent screens from automatically advancing if the user clicks a spot that’s not hyperlinked. You then open the prototype in QuickTime Player 7, and interact with it.

 

If you’d like to test the prototype on the iPad, you need to export the prototype as PDF, email it to yourself or put it in DropBox, then open it on the iPad. In the video above, I use GoodReader to show the PDF file.

Hint: Unfortunately, the Keynote iPad app does not support hyperlinked navigation, so if you open this keynote file on the iPad it will only advance sequentially. Bonus Hint: Keynote has an automatic tweening/animation feature called Magic Move. If you want to have fun by adding animated transitions, fading pop-ups in and out, you can do so by copying and pasting the shape across two slides, select both slides then selecting the effect as shown below. I found this feature to be unpredictable at times.

Final Words

Remember that a prototype doesn’t need to be perfect. It just needs to convey your idea better than your words do. Don’t over-engineer it, and don’t prematurely optimize it. Just put together something that users can see and play with. You will get many more insights than spending hours in focus groups, market research and surveys.

 

Next time you’re giving a pitch, remember to show more and talk less. If a picture is worth a thousand words, a prototype is worth a thousand pictures.

Creating prototypes is like doing magic: once you understand that all magic happens in the spectator’s mind, you can focus on bringing what matters to the audience. Everything else is a distraction.

If you think this tutorial is useful, or if you have any feedback or questions, leave me a comment below. I will do my best to reply to every single one of them.

Get The Templates Now

You might also like reading...

• How To Choose Your Startup Idea
• Hackers vs. Coders
• The Elephant in the Dark: A Story