Tools to build a prototype web app in one month without writing code
By: Vlad Shulman
Tags: Startup, Product Management, Design

Tools to build a prototype web app in one month without writing code

Prototyping stack (for non-developers)

For non-technical people who have an idea for a digital product, I’ve noticed two reasons that keep them from pursuing: 1) anxiety towards sacrificing some aspect of their life to make the time, and 2) convincing themselves that they need a technical cofounder and/or funding to build something tangible. This essay aims to dismiss reason #2, by clarifying some free (or price-of-several-coffees) tools I’ve used to build a functional web application version-1; my prototyping stack. One key advantage of building a prototype is that it drastically improves how seriously you’re taken by peers in co-working spaces, potential cofounders, prospective mentors/angel investors, and target users. m = more information available,

v = vlad’s (my own) personal experiences

Organize

Although I was skeptical how a “visual idea board” would be different than just writing ideas into a notebook, I was surprised to find that it had a side-effect of helping jumpstart momentum for doing work [v.1].

The first idea board was used purely for brainstorming along several categories which I guessed at being necessary for the idea to become tangible — the foundational product idea was found in the resulting conversations [v.2].

This is also a great time to apply the Jobs To Be Done framework as a way to understand how someone’s life can be improved; as a a consequence, this frame of thinking helps surface ideas for product features that would impact those improvements [m.1]. The point here isn’t to get stuck in brainstorming-paralysis, but rather to settle on a hypothesis for one “job to be done”, and then continue through the rest of this prototyping stack.

First idea board (using the free tool Trello) was decommissioned after figuring out what to build

Design

The amount of incredible (and freely accessible) designs out there make the motto, “you don’t have to re-invent the wheel” valid. Since you’re still in the brainstorming phase — and probably don’t have a background in human factors — it’s a good idea to borrow inspiration from best-practice user interfaces [v.3].

At this point, I was primarily spending time bookmarking designs which looked like they could be used to be used to fulfill my “jobs to be done” hypothesis.

Dribbble showcases professional-level design choices for any kind of user interface

Mock-Up (& Iterate)

Have you ever played around with Microsoft Paint? Well, there are tools which are just as simple to use, except they let you create a “fake app” that you can click around to navigate to various screens.

At this point, I would take the inspirations from the “Design” phase, and build them in this mock-up tool [v.4].

These tools also export nicely into a mobile app, so this is a great time to hand your phone to prospective users and silently observe how they use your interface to gather feedback for design changes. The more times you can do this — build mockup, demo to target user, observe their hesitations with usability, re-build mockup — the more professional your user experience will feel.

The non-free (low cost) tool Proto lets you create multiple screens to experiment with user-interfaces

Functional App

What if you could use your Microsoft Paint skills to clone an app like Uber or AirBnB over a weekend [m.2]? That’s the main appeal to a new class of app building tools, which feel like the next evolution of tools used in the “mock-up” phase.

Although there is a steep learning curve [v.5], showing up to a cofounder speed-dating event / prospective investor coffee chat becomes a 10x better experience when you have the first version of a functional app.

The free tool Bubble.is is probably my favorite tool discovered in 2019, for building fully-functional web (and mobile) apps where writing code is not a necessity for producing the first-version prototype

Data (honorable mention)

Despite poor design choices, user experience, app load times, bugs, etc, one way to immediately stand out with a prototype is through the data that you are now able to collect — not just typical user info, but rather behavioral data [v.6] which helps describe a trend starting to happen in your market; this a conversation every angel investor wants to have (and wants to be the first to have).