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 you’re 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 Keynotopia templates), 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 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 – Codecademy – practice coding online, for free
•
TreeHouse – TreeHouse – learn design and coding ($25/month)
•
Lynda – Lynda – learn design and coding ($25/month)
•
DevBootCamp – 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 don’t 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 Craigslist and and LinkedIn.. A local designer/developer duo will probably cost you $10k-$25k a LinkedIn 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 eLance,, oDesk oDesk and and CraigsList.. 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 someone’s 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 hasn’t 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 ScreenFlow on on the Mac, or Camtasia Camtasia on 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 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 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 you’ll 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 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.
Preface: From dreamer to doer ............................................... ....................................... 6 This process works! ......................................................................................................... 8 My story .................................................. ........................................................ ............................................................................ .................... 9 What is a prototype? ......................................................................................................... 13 What keeps most peop people le from executing on o n 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 Interactivi Interactivity ty ....................................................... ..................................................................................................... .............................................. 44 Non-linear presentations .................................................. ..................................... 44 Animating the interface 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 Appendix A: Where Where to get good good product product ideas from ................................................. 63 Scratch your own itch! ............................................................................................... 63 Fix a product you already use ...................................................... .................................................................................. ............................ 63 Adapt an existing product to to a new market ................................................... ......... 63 Ask people people about their problems problems ................................................. ............................ 63 Keep an eye on technology trends ........................................................ .......................................................................... .................. 64 Appendix Appendix B: how to set up a landing landing page for for your product product before before you create create it 65
"#$ $%# &'(( #)**+ ,$ %$$-.//+#01*$*-2,34*5/&,+#2$5,+#2$ !"#$%#&%' )#* +,- ,.+/
