Sketch —> Whimsical —> Canva —> Justinmind
Sketch your product flow out on paper using Crazy 8’s (aka fold your paper into 8 and draw it out). A bit like this: Figure 1: My epic voice converter for email
Map that flow onto a flow-chart in Whimsical that looks like this:Figure 2: Breaking down every element of the product
Why all the steps? When do we get to build?! Do you see how the various boxes in the flowchart are differently colored? By breaking your product down into its core elements, it makes it easier to assign the various no-code tools to each step, preventing the build from becoming overwhelming. Your goal is to figure out how to make every element of the build work first, then worry about how they all connect. For example, let’s take the “user gets an email” step. The action is, “Once a user gets an email, send the content to a table. Then match those with the no-code tools.” This feels like Zapier and Airtable.Ok, I said four steps, realistically, you can skip the Canva step. I use Canva because it's a really quick way to make a pretty mock up of your crazy 8’s. Furthermore, did you know you can make landing pages there? Check out this one I built here! This page in Canva took me a couple of hours to make. It's all drag-and-drop and super intuitive. Enter the prototype. Justinmind is a drag and drop prototyping tool. I use it to build fully functioning dummy versions of the product. They are great because a) They give you a chance to show users what you are building, get feedback and iterate quickly without the sunk cost of a build, and b) it’s easy to make them do everything that you want exactly like in your build. For example, I wanted to make a tool that was connected to Lever, but I wasn’t yet convinced that I was building the right thing. In Justinmind, I just designed a page that looked exactly like Lever:
The prototype is interactive, meaning people can actually click on the fields, and see exactly what the product looks like! The other advantage of Justinmind is that it’s drag and drop, meaning you can make a prototype in less than one day! You can check out the full prototype here; watching this, do you think you could tell I hadn’t actually built the product? BTW, if you are raising money, the prototype can be enough to get investors and get people signed up! You don’t even need the product! 3. Ok, I don’t feel completely comfortable with prototypes, I want an MVP, How do I choose what tools to use?The good news is that no-code tools are going through a boom. It's almost like there is a no-code tool for everything. Beware though, there is still a learning curve for all no-code solutions, and given a new one pops around the corner every month it can still be overwhelming to decide which one to use. Here is my rule of thumb:- I want a simple website/e-commerce store : Squarespace, Carrd, Shopify
- I know how to use Adobe photoshop and want to store data: Webflow (alone) of Webflow + sortable
- I want to build a full app: Bubble
