You Can Build Your Prototype Faster than You Think

(Usually Without Code)

The Prototyper’s Development Stack

Coders use different development stacks. For example, when building a website, a developer might use HTML, CSS, and Javascript for the site, maybe Python for the logic, a framework such as Django (no, not that one). And then for a database, maybe MongoDB.

But there is an emerging stack for people who don’t want to or know how to write code — a Prototyper’s development stack. Many tech-enabled services can be prototyped without any coding at all. Here are my favorite set of tools that can help prototype tech products:

Google Forms — these are basically web page inputs. They automatically tie to google sheets, which is really useful.

Google Sheets — easy excel-like files in the cloud. They also integrate with IFTTT and Zapier so they can power output or store inputs.

TypeForm — these serve the same purpose as Google forms, but look much nicer. An added benefit is that they tie in with Zapier (mentioned below)

Yo — the obvious thing here is that these can serve as mobile notifications, especially now that you can create accounts at dashboard.justyo.co and Yo all your followers a link. However, a Yo can also serve as a mobile button. IFTTT (also mentioned below) has a nice integration where you can Yo IFTTT to trigger a process.

Google Voice — when in doubt, you can always just create a Google Voice number and have people text or call it.

IFTTT (If This Then That) — lets you tie together different services, such as “if I use a particular hashtag an instagram pic, automatically send it to dropbox”. This is particularly good for testing ideas for consumer services on yourself (“would I actually use this”) before building the technology.

Zapier — Similar to IFTTT, it lets you tie together services, but it lets you do so for some nice business use cases, such as “if someone fills out a TypeForm, automatically add their email to a specific MailChimp list.” You can also have multiple actions triggered by the same event, which can create some useful interactions.

Kimono — This one is really great. You can take any website and turn it into an API. Normally, this would require some code to use. However, you can also turn the website into an RSS feed. Since IFTTT has an RSS reader as one of its inputs, you can do things like say “Send a weekly digest including changes to the RSS Feed.”

Mailchimp — create email lists and send mass emails, tracking open rates, etc. Particularly great because it integrates with some of the other products on this list.

Txti.es — create a text-based web page in an instant. It accepts html markup but it’s not required, this gets your message up on the web and you can share the page with anyone without having to go through the process of setting up AWS or a Wordpress page just to get a single page up and running.

The Prototyping Stack. A wayfinder route with each service is located here: http://bit.ly/PrototypingStack

An Example: BetaLunch

To demonstrate how easy it is to prototype an idea using these types of tools, I’m going to test out a new service, called BetaLunch. Every day at noon, this service will send you an email telling you what you should have for lunch. This is just a prototype, so for now it will only work in new york.

First, we have to have a way for potential users to sign up for the service. I really like the user interface of TypeForm, so let’s ask people for some basic information, including their name, email address, and where they live: https://matthart.typeform.com/to/RPE7c6

For personal use, I use IFTTT to tie different APIs together, but TypeForm works with Zapier, so I configured Zapier to send all the email addresses we collect in the TypeForm to Mailchimp. Now we have a really easy way to collect email addresses.

The last part of our product will email people once a day with new restaurant ideas. We already have the email list automatically coming into Mailchimp. So all we have to do is create a new email once a day. However, to make it easy on ourselves, let’s set up an alert for the administrator of the service (us). The alert will suggests a few new restaurants every day that we can then put in the email to send to our subscribers.

We can do this easily with two tools: Kimono and IFTTT. Kimono is a really cool tool to turn any website into a data feed. Using Kimono, we can convert the Urban Spoon recent Cheap Eats in New York (here) into an rss feed (here). Now we want that list of restaurants to be automatically emailed to us in the morning so that we can pick a restaurant to include in the daily mailchimp campaign. To do this, open IFTTT and create the recipe if [RSS Feed] then [email digest].

You Are The Framework

In this example, there’s a manual process of looking through the restaurants and then sending a suggestion out to the set of subscribers. This is something that you may ultimately want to do with technology, or that you may want to use as part of the business model — asking restaurants to give you an incentive or discount for suggesting them to all of your subscribers.

This is a bit like the “artificial artificial intelligence” of Amazon’s Mechanical Turk (for further reading, check out the Mechanical Turk automated chess player — spoiler alert, it was from the 18th century so there was no tech involved). When first prototyping concepts, it’s almost always worth avoiding building technology first in favor of making the product *seem* like it’s working. This has two benefits: first, it means you’ll get the key assumptions about consumer demand tested faster, before investing in building technology nobody wants. Second, it will give you the ability to see the subtle product decisions that get made that consumers react to before they’re productized in code.

An example of this in BetaLunch is that we may start to notice that the same restaurants are coming up every day from the data feed. If we had built all of that in code, we would have to rewrite it to figure out how to improve it. By recognizing this problem prior to coding (if it turns out to exist), we’ll be able to adjust the data source for new restaurants to another site, to an editor, or perhaps even leaving recommendations to the crowd to suggest.

Know other technologies that should be included in the prototyping stack? Let me know via twitter @matthartman or add to the wayfinder route here: http://bit.ly/PrototypingStack

Get emailed whenever Matt blogs by signing up at http://hrt.mn or sending a YO to MATTHARTMANBLOGGED. I mentioned these products because I love and use them. Some of them are betaworks investments.