{"id":4157,"date":"2014-11-26T10:01:33","date_gmt":"2014-11-26T16:01:33","guid":{"rendered":"https:\/\/blog.growthtools.com\/blog\/?p=4157"},"modified":"2017-08-30T17:42:44","modified_gmt":"2017-08-30T17:42:44","slug":"build-web-app-from-scratch","status":"publish","type":"post","link":"https:\/\/blog.growthtools.com\/?p=4157","title":{"rendered":"How a Blogger Can Build a Web App in Four Weeks"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/blog-graphs_key_1A250B46.png\" alt=\"\" width=\"1018\" height=\"584\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/blog-graphs_key_1A250B46.png\" alt=\"\" width=\"1018\" height=\"584\" \/><\/noscript><\/p>\n<p>It&#8217;s been two weeks.<\/p>\n<p>That&#8217;s when you last got an update on the status of <a href=\"https:\/\/blog.growthtools.com\/blog\/list-goal-story\/\" target=\"_blank\" rel=\"noopener\">List Goal<\/a>, the new email list-building\u00a0app that we&#8217;re creating\u00a0together live on this blog.<\/p>\n<p>The\u00a0app is coming along really well. It looks sexier than the last time we talked and it actually works now. (Woot!)<\/p>\n<p>Today you will get&#8230;<\/p>\n<p>1) Full rundown of the entire development process<\/p>\n<p>2) Sneak peak at\u00a0the app (!!)<\/p>\n<p>3) Chance to give your feedback on <strong>one really important feature<\/strong>.<\/p>\n<p>Let&#8217;s get going.<\/p>\n<h2 style=\"text-align: center;\">How\u00a0a writer can build a web app from scratch<\/h2>\n<p>Several of you have asked how you can build an application like List Goal for your business.<\/p>\n<p>Teaching software development isn&#8217;t the focus of this blog. However, using lightweight apps as a lead generation mechanism is an incredibly effective marketing strategy. So we are going to approach the subject\u00a0from that angle.<\/p>\n<p>To build an application like List Goal there is a <em>seven step process<\/em> that you need to follow.<!--more--><\/p>\n<h3>Step 1: Determine the exact\u00a0problem you are solving.<\/h3>\n<p>Building software can easily evolve from a 10-hour weekend project to a 300-hour, multi-thousand-dollar time suck.<\/p>\n<p>Before you hire a programmer, design a user interface or think about touching any code, you first have to answer these two\u00a0questions:<\/p>\n<p><em>Question #1: &#8220;What is the exact problem I am solving?&#8221;<\/em><\/p>\n<p>AND<\/p>\n<p><em>Question #2: &#8220;What is the simplest way to solve that problem?&#8221;<\/em><\/p>\n<p>For example:<\/p>\n<p>The problem I wanted to solve was staying focused on my most important business objective, building my email list.<\/p>\n<p>I determined that the simplest way to solve this problem was to constantly keep my goal in front of me.<\/p>\n<p>We\u00a0open hundreds of new browser tabs per day. By putting a\u00a0reminder of my\u00a0goal in\u00a0the new tab window, it would be incredibly hard to lose focus on that goal.<\/p>\n<figure style=\"width: 520px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.kissmetrics.com\/wp-content\/uploads\/2014\/08\/sumome-dashboard-no-headshot.png\" alt=\"\" width=\"520\" height=\"298\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.kissmetrics.com\/wp-content\/uploads\/2014\/08\/sumome-dashboard-no-headshot.png\" alt=\"\" width=\"520\" height=\"298\" \/><\/noscript><figcaption class=\"wp-caption-text\">The <a href=\"https:\/\/blog.kissmetrics.com\/how-dashboards-can-help\/\" target=\"_blank\" rel=\"noopener\">One Metric Dashboard<\/a>\u00a0idea came from my friend Noah Kagan at <a href=\"https:\/\/sumome.com\" target=\"_blank\" rel=\"noopener\">Sumome<\/a>.<\/figcaption><\/figure>\n<p><em>What is the exact problem List Goal solves? <\/em>Losing focus on building my email list.<\/p>\n<p><em>What is the simplest way to solve that problem? <\/em>Remind\u00a0myself\u00a0of the goal hundreds of times per day.<\/p>\n<p>&nbsp;<\/p>\n<h3><b>Step 2: Figure out what\u00a0you want it to look like.<\/b><\/h3>\n<p>At this stage most people start coding. Bad move.<\/p>\n<p>The next step is to\u00a0figure out what you want your\u00a0app to look like. There are a lot of <a href=\"https:\/\/balsamiq.com\/\" target=\"_blank\" rel=\"noopener\">tools<\/a> to help you do this. However, I prefer old fashoin pen and paper.<\/p>\n<p>The\u00a0main objective\u00a0is to think through and design the entire user experience.<\/p>\n<p>Here is what my initial sketch of List Goal looked like:<\/p>\n<figure style=\"width: 700px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Screenshot_11_24_14__10_54_AM_1A239A48.png\" alt=\"\" width=\"700\" height=\"526\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Screenshot_11_24_14__10_54_AM_1A239A48.png\" alt=\"\" width=\"700\" height=\"526\" \/><\/noscript><figcaption class=\"wp-caption-text\">Main User Interface<\/figcaption><\/figure>\n<p>This\u00a0is the main user interface\u00a0that\u00a0you will see every time a new tab\u00a0is opened in your browser. This screen has two objectives: 1)\u00a0remind you of your goal; and 2)\u00a0show your daily progress towards that goal.<\/p>\n<p>There is one large number in the middle of the screen, your list size goal.<\/p>\n<p>When you first install the app, you choose how big you want your email list to be. Then that number is displayed prominently on this screen.<\/p>\n<p>There is also a progress meter directly below your goal. This shows you your daily progress.<\/p>\n<figure style=\"width: 700px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Screenshot_11_24_14__10_59_AM_1A239BC2.png\" alt=\"\" width=\"700\" height=\"525\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Screenshot_11_24_14__10_59_AM_1A239BC2.png\" alt=\"\" width=\"700\" height=\"525\" \/><\/noscript><figcaption class=\"wp-caption-text\">User Settings Screen<\/figcaption><\/figure>\n<p>The user settings screen is first accessed when the app is installed. It also can be accessed at any time via the settings menu of your browser.<\/p>\n<p>Before the app is activated, the user must first connect it with his or her email service provider. Then the user chooses the list goal and due date of that goal.<\/p>\n<p>Lastly, the user enters his or her email address and activates the app.<\/p>\n<figure style=\"width: 700px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Screenshot_11_24_14__10_53_AM_1A239A19.png\" alt=\"\" width=\"700\" height=\"526\" \/><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Screenshot_11_24_14__10_53_AM_1A239A19.png\" alt=\"\" width=\"700\" height=\"526\" \/><\/noscript><figcaption class=\"wp-caption-text\">Admin Screen<\/figcaption><\/figure>\n<p>This screen allows me to troubleshoot any potential issues by seeing the key metrics of each user account.<\/p>\n<p>There is also a basic messaging system built in that allows me to display notes and links on the main user interface of the app.<\/p>\n<p>&nbsp;<\/p>\n<h3><b>Step 3: Make it look pretty.<\/b><\/h3>\n<p>Now that you have a clear objective for your app and you&#8217;ve thoroughly thought out and sketched the entire user experience, it&#8217;s time to make it look pretty.<\/p>\n<p>To do that, I\u00a0use Keynote as a mock-up tool.<\/p>\n<p>I recorded the entire\u00a0process of designing List Goal for you to see&#8230;<\/p>\n<p><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/pljkx4q947.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\">\n<div class=\"wistia_embed wistia_async_pljkx4q947 videoFoam=true\" style=\"height:100%;width:100%\">&nbsp;<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h3><b>Step 4: Create a walkthrough video.<\/b><\/h3>\n<p>Now that you have a mock-up prototype of your software, create a video\u00a0walkthrough of the entire application.<\/p>\n<p>The purpose\u00a0of this video is to communicate to the developer\u00a0the core functionality.<\/p>\n<p>You can use the free screen recording tool\u00a0<a href=\"https:\/\/jing.com\" target=\"_blank\" rel=\"noopener\">Jing<\/a> or a paid tool like <a href=\"https:\/\/camtasia.com\" target=\"_blank\" rel=\"noopener\">Camtasia<\/a> to record your screen along with narration.<\/p>\n<p>Here is the List Goal walkthrough video:<\/p>\n<p><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/z3w1o09ned.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\">\n<div class=\"wistia_embed wistia_async_z3w1o09ned videoFoam=true\" style=\"height:100%;width:100%\">&nbsp;<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h3><b>Step 5: Write a spec document.<\/b><\/h3>\n<p>Next you need to document\u00a0every feature of the application in a written\u00a0document.<\/p>\n<p>This will be used in conjunction with your walkthrough video to clearly communicate to your developer the core functionality of the app.<\/p>\n<p>This document is also incredibly helpful for you as you test the developers work.<\/p>\n<p>The easiest way to create this spec document is to transcribe your video walkthrough from Step 4 and use bullet points to list out the major elements you covered.<\/p>\n<p>I have found Google Docs to be the best application to use, as it&#8217;s easy to share and allows you to collaborate with your entire team.<\/p>\n<p>Here is the List Goal spec document. (<a href=\"https:\/\/docs.google.com\/a\/manfisher.com\/document\/d\/1_8DO_V5kOkIUl_RMuiWfA5RACd-JTYZUMTCJl9TeJgU\/edit\" target=\"_blank\" rel=\"noopener\">access here<\/a>)<\/p>\n<p><a href=\"https:\/\/docs.google.com\/a\/manfisher.com\/document\/d\/1_8DO_V5kOkIUl_RMuiWfA5RACd-JTYZUMTCJl9TeJgU\/edit\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/blog-graphs_key_1A2623BA.png\" alt=\"\" width=\"839\" height=\"493\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/blog-graphs_key_1A2623BA.png\" alt=\"\" width=\"839\" height=\"493\" \/><\/noscript><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><b>Step 6: Set up project management.<\/b><\/h3>\n<p>Now you need\u00a0to organize your project management system. My preferred\u00a0software is\u00a0<a href=\"https:\/\/trello.com\" target=\"_blank\" rel=\"noopener\">Trello<\/a>.<\/p>\n<p>In order for your project to run smoothly, stay under budget and be delivered on time, you have to be organized.<\/p>\n<p>Before any coding starts\u00a0I break down every core feature into it&#8217;s own individual card inside of Trello. A full description of that feature, screenshots and implementation checklists are included for each.<\/p>\n<p>My Trello board is organized into five lists:<\/p>\n<ol>\n<li><strong>Ideas<\/strong>: Future features\u00a0we may add<\/li>\n<li><strong>Next up<\/strong>: Features that are to be worked on soon<\/li>\n<li><strong>In progress<\/strong>: Features that are being built right now<\/li>\n<li><strong>Testing<\/strong>: Features that the developer has added and that I am testing<\/li>\n<li><strong>Done<\/strong>: Features that have been tested and approved for deployment.<\/li>\n<\/ol>\n<p>Each feature card is moved to the appropriate list\u00a0throughout the development process.<\/p>\n<p>Here is a snapshot of the Trello board for List Goal.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/List_Goal___Trello_1A262703.png\" alt=\"\" width=\"1372\" height=\"231\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/List_Goal___Trello_1A262703.png\" alt=\"\" width=\"1372\" height=\"231\" \/><\/noscript><\/p>\n<p>Here is a sample card from this project.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/Static_List_Size_Goal_on_List_Goal___Trello_1A2625A7.png\" alt=\"\" width=\"717\" height=\"737\" \/><noscript><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/blog.growthtools.com\/Skitch\/Static_List_Size_Goal_on_List_Goal___Trello_1A2625A7.png\" alt=\"\" width=\"717\" height=\"737\" \/><\/noscript><\/p>\n<h3><b>Step 7:\u00a0<\/b><b>\u00a0Watch it come to life.<\/b><\/h3>\n<p>Now you are ready to turn your project over to your developer.<\/p>\n<p>The application that is\u00a0delivered to you will be a direct reflection of your level of preparation and attention to detail. So don&#8217;t get lazy.<\/p>\n<p>It&#8217;s been <a href=\"https:\/\/blog.growthtools.com\/blog\/have-more-fun\/\" target=\"_blank\" rel=\"noopener\">four weeks<\/a> since we started work on List Goal and the developer has JUST given me the first working version.<\/p>\n<p>Want to see it?<\/p>\n<p>Take a look&#8230;<\/p>\n<p><script src=\"https:\/\/fast.wistia.com\/embed\/medias\/nnsf4mvql5.jsonp\" async><\/script><script src=\"https:\/\/fast.wistia.com\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<div class=\"wistia_responsive_padding\" style=\"padding:56.25% 0 0 0;position:relative;\">\n<div class=\"wistia_responsive_wrapper\" style=\"height:100%;left:0;position:absolute;top:0;width:100%;\">\n<div class=\"wistia_embed wistia_async_nnsf4mvql5 videoFoam=true\" style=\"height:100%;width:100%\">&nbsp;<\/div>\n<\/div>\n<\/div>\n<h2 style=\"text-align: center;\">Can I get your opinion?<\/h2>\n<p>In our next Workshop post, I&#8217;ll show you\u00a0the\u00a0hiring system I used to find a quality\u00a0programmer who\u00a0built List Goal\u00a0for less than $500.<\/p>\n<p>But first&#8230;<\/p>\n<p>I need your help.<\/p>\n<p>List Goal is alive, but it&#8217;s far from perfect.<\/p>\n<p>One thing I am struggling with is what numbers to show on the main user interface.<\/p>\n<p>I&#8217;d like for you to tell me what would\u00a0help you the most.<\/p>\n<p><strong>Two options are up for vote:<\/strong><\/p>\n<p><em>Option 1:\u00a0The current version<\/em><\/p>\n<p>This option features your goal number and a progress meter showing your daily progress in percentage points.<\/p>\n<figure style=\"width: 400px\" class=\"wp-caption alignnone\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/listgoal-ui_key_1A262C9C.png\" alt=\"\" width=\"400\" \/><noscript><img decoding=\"async\" src=\"https:\/\/blog.growthtools.com\/Skitch\/listgoal-ui_key_1A262C9C.png\" alt=\"\" width=\"400\" \/><\/noscript><figcaption class=\"wp-caption-text\">Option #1<\/figcaption><\/figure>\n<p><em>Option 2:\u00a0Alternate version<\/em><\/p>\n<p>This option would show your current list size as the large number and would NOT have a progress meter. Instead, it would have the number of new email subscribers you&#8217;ve added today in integer form (as opposed to % points).<\/p>\n<figure style=\"width: 400px\" class=\"wp-caption alignnone\"><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/blog.growthtools.com\/Skitch\/listgoal-ui_key_1A262CFB.png\" alt=\"\" width=\"400\" \/><noscript><img decoding=\"async\" src=\"https:\/\/blog.growthtools.com\/Skitch\/listgoal-ui_key_1A262CFB.png\" alt=\"\" width=\"400\" \/><\/noscript><figcaption class=\"wp-caption-text\">Option #2<\/figcaption><\/figure>\n<p><strong><em>Which would help you stay more motivated?<\/em> Let me know in the comments section below.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s been two weeks. That&#8217;s when you last got an update on the status of List Goal, the new email&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4157","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/posts\/4157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4157"}],"version-history":[{"count":0,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=\/wp\/v2\/posts\/4157\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.growthtools.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}