Sample Chapter: From prototype to real app

Once you're done with your prototype, you have one of three options to turn it
into a working app:

Do it yourself
Hire and pay someone to do it
Find a technical cofounder and split the revenue (or the equity)
Raise money and hire a team do to it

If you have time, and if you can pick up programming skills easily, dedicate a
couple of months to learning programming, and then code your app yourself.
If you have $5K-$25K to spend on development, this might speed your time to
launch by hiring local or offshore developers to do it.
If you know a good programmer who believes in your idea, convince him/her to
join you as a cofounder.
Finally, if your prototype is really good, and if youre well connected with
investors, demo your prototype and business plan to them and raise money to
hire a team to deliver the app.
The best path is probably a combination of all the above, and it works differently
for everyone.
Whether you choose to do it yourself, or to hire someone else to do it for you, it's
extremely valuable to have a basic understanding of the technologies and
platforms that will be used to create your app.

Getting your prototype ready for production

If you create a wireframe or low fidelity prototype to validate your idea, you need
to redesign the screens from scratch in a design tool like Photoshop or Sketch.
But if you create a high fidelity prototype (using Keynotopia templates), there are
several ways to re-use the prototype screens in the final app, instead of throwing
them away and redesigning from scratch.
One option is to export all screens as PNG images, import them into your design
tool to slice, and then export for web or for XCode.
Another option that I frequently use is to start coding the prototype natively in
HTML/CSS/JavaScript, and copy the graphical elements that I need from
Keynote into Sketch. I then clean them up and export them to use with the code.
Keynotopia website was designed entirely in Keynote. After finishing the
prototype, I coded the website in HTML/CSS, then extracted from the Keynote
design the logos and images into Sketch, and then added them into the HTML
code. It took a couple of hours to design the entire website, and a few more
hours to code it.

Learning to code it yourself

Learning the coding skills needed to make an app is a broad topic that is beyond
the scope of this book. Here are some pointers to get you started:

Codecademy practice coding online, for free

TreeHouse learn design and coding ($25/month)

Lynda learn design and coding ($25/month)

DevBootCamp learn programming in 9 weeks (~$12,000/9 weeks)

Outsourcing it
Another option is to find a local or remote developer (or team) to take your
prototype and turn it into an app. Local developers tend to be 5-10 times more
expensive than offshore talent, but they are easier to communicate with, and
generally provide better and faster results.
You need to decide between local and offshore talent depending on your budget
and deadlines. Your best bet is to find an offshore development company that
has a local sales and management office that you can interact with. When you
dont have technical skills, interacting directly with developers can be difficult.
Hiring locally
If you're hiring locally, I advise hiring a visual designer who knows how to code
front-end (HTML/CSS/JavaScript) and a back-end (or full-stack) developer who
can integrate the designer's work into the product.
The best places to hire locally are through referrals, and from Craigslist and
LinkedIn. A local designer/developer duo will probably cost you $10k-$25k a
month, depending on your geographic location.
If you're hiring a local agency to do it all for you, expect to pay 30-50% more. A
local agency can charge anywhere from $25K to $150K to design and develop
your app.
Hiring offshore
If your budget is limited, then hire offshore talent.
There are lots of websites where you can hire inexpensive and good talent to
help you finish your app. The most popular ones are eLance, oDesk and
CraigsList.
In my experience, the best countries to hire developers from are Ukraine,
Romania, Russia, Poland, Germany, Serbia, India and the Philippines. They
have great technical skills, strong work ethics and good communication skills.

oDesk and eLance are the safest bets, because they moderate and manage your
relationship with your offshore team, you can pay through a credit card, and you
are protected against scams. You can also see someones work history and
ratings/feedback before you hire them, which makes it easier to find reliable
people.
Full time vs. project-based
When you hire someone, you need to ask yourself whether you want a
missionary or a mercenary.
Hiring project/hourly-based freelancers to do the first version of your app is a lowcost low-risk option, because you're not committing to long-term salaries or
benefits. However, your team is likely working on other apps at the same time,
and may not be available every time you need them for a new feature or to
handle a last-minute change. This is especially important during launch, when
things usually break down and you need someone to fix them right away.
On the other hand, hiring a full-time developer provides you with the peace of
mind that someone is fully dedicated to making your app work. This option adds
significant overhead to your budget, and a potential longer-term commitment for
a product that hasnt made money yet.
So which option is better?
Hire people on a contract-to-hire basis. Tell your developers that you're
interested in working with them to launch the first version, and to have them join
the product team after launch. Tell them that if you like their work, you'll offer
them a good full-time salary. Ask them during the interview if they are open to
working full-time with you, and about their ideal salary.
Communicating app requirements to your team
Whether you're hiring local or offshore developers, one of the most important
tasks is to create clear and specific requirements that leave nothing to
imagination or misinterpretation.
Ten years ago, I worked as a product manager with a team of 30+ developers,
and I had to create loads of requirements and specifications. I spent weeks
writing long documents for each feature, taking screenshots, adding annotations,
documenting use cases, and going through dozens spec review meetings.
Fortunately, that's not how you'll be working with your team, because you'll have
a prototype that communicates your vision better than any document you can
write.
Once you have your final prototype ready for production, fire up your screenrecording software (I recommend using ScreenFlow on the Mac, or Camtasia on
the PC), and record a full walkthrough of your prototype with voice-over. Explain
every part of the interface, how the user will interact with it, how it handles input

and errors, what the different use cases are, and how the backend should
provide data. Divide your walkthrough into several video segments for each
feature.
Before development starts, share those videos with your team, ask them to
watch them and prepare a list of questions with you, and schedule a meeting
where you go over the videos and prototype to answer all the questions they
might have.
I often find that good developers take the time to examine my prototype, they
think about how they would implement it, and they challenge me with lots of
questions. On the other hand, I find that developers who just accept the
prototype without asking questions or poking holes in my design aren't usually
the best ones to hire.

10 tips for successful app outsourcing

1. Post a clear description of your project, specify the qualifications and
experience your ideal candidate should have, tell them how they will be
compensated, and define the milestones and deadlines they need to
commit to.
2. Ask for references (previous clients) and contact a couple of them before
making the hiring decision.
3. If you're using eLance or oDesk, review the portfolio and feedback of
everyone that you're interviewing.
4. Start with a small and inexpensive task that you can assign to 2-3 different
people simultaneously, to find out which team delivers the best quality on
time. This small task can be an implementation of a single app
screen/feature, a simple landing page, or a random test project that you
come up with. Running a test task first, before jumping into the full project,
helps you reduce you long-term risk dramatically.
5. Don't hire the first person that responds to your job post. Interview multiple
people, narrow your candidates down to 2-3, and give the top candidates
the same test task to finish. If you're not technical, ask one of your geek
friends to help interview your candidates.
6. Communicate your requirements very clearly. The more clear and specific
your requirements are, the better deliverables youll get. One of the worst
things that could happen to your project is when developers make their
own decisions about a feature you haven't explained well in your
prototype.
7. Create milestones to have weekly or biweekly deliverables that you can
test and provide feedback about to your developers. A common mistake of
novice outsourcers is leaving the developers to work for a month or two
without seeing any deliverables, and getting shocked at the end with
something completely different than what they had asked for.
8. Have a quick chat with your team at least three times a week to check
progress and answer questions.
9. Ask them to send you a status email at the end of every work day
10. Treat your team well, give bonuses, and make sure they are excited to
work on your product, especially if you plan to hire them full time later on.

Contents
Preface: From dreamer to doer...................................................................................... 6
This process works! ......................................................................................................... 8
My story .............................................................................................................................. 9
What is a prototype? ......................................................................................................... 13
What keeps most people from executing on their ideas? .................................................. 14
1 Fear........................................................................................................................ 14
2 Lack of skills ......................................................................................................... 14
3 Lack of certainty ................................................................................................... 15
4 Running out of ideas ........................................................................................... 15
How to become an idea magician ............................................................................... 16
The prototyping process................................................................................................ 17
Overview of the product design process ................................................................ 18
Writing stories ............................................................................................................. 19
Extracting tasks .......................................................................................................... 20
Listing app screens .................................................................................................... 21
Creating the flow diagram ......................................................................................... 22
Sketching the user interface .......................................................................................... 23
Creative inspirations, mood boards, and design walls .................................................. 28
Wireframes vs. prototypes ............................................................................................ 29
Prototyping with Keynote and PowerPoint ................................................................. 30
Designing the interface screens .............................................................................. 31
Using Keynotopia UI templates................................................................................ 39
Prototype at double speed with master slides ....................................................... 40
How many features should you prototype?............................................................ 42
Iterating on your app design and simplifying it ...................................................... 43
Adding Interactivity ..................................................................................................... 44
Non-linear presentations ....................................................................................... 44
Animating the interface.............................................................................................. 48
Exporting and sharing your prototypes ................................................................... 50
PDF export .............................................................................................................. 50
HTML5 export ......................................................................................................... 51
Image export ........................................................................................................... 51
Sharing original Keynote/PowerPoint files ......................................................... 51

Limitations and workarounds........................................................................................ 52

Using live data ............................................................................................................ 52
Handling user input .................................................................................................... 52
Creating tall UI screens ............................................................................................. 53
Swipe, pinch and other gestures ............................................................................. 53
Refining your prototypes with users feedback .......................................................... 54
Iterating and improving your prototype ....................................................................... 55
From prototype to real app ........................................................................................... 56
Getting your prototype ready for production .......................................................... 56
Learning to code it yourself ...................................................................................... 57
Outsourcing it .............................................................................................................. 57
Hiring locally ............................................................................................................ 57
Hiring offshore ........................................................................................................ 57
Full time vs. project-based .................................................................................... 58
Communicating app requirements to your team ............................................... 58
10 tips for successful app outsourcing................................................................ 60
Conclusion ....................................................................................................................... 61
About me ......................................................................................................................... 62
Appendix A: Where to get good product ideas from ................................................. 63
Scratch your own itch! ............................................................................................... 63
Fix a product you already use .................................................................................. 63
Adapt an existing product to a new market ............................................................ 63
Ask people about their problems ............................................................................. 63
Keep an eye on technology trends .......................................................................... 64
Appendix B: how to set up a landing page for your product before you create it 65

Get the full eBook at

http://keynotopia.com/fakeitmakeit
Available May 12, 2015