No code, no problem: Building a product with low code to no code solutionsWhen I built my first web app, I insisted on learning how to code. I thought that learning to code would give me the flexibility to build whatever I want. Whilst this may be true, after three months of blood, sweat and tears, I realized I hadn’t used my time wisely. Instead of spending a weekend building loaders, how many more customers could I have talked to? What if I found out I wasn’t building the right product in the first place and I didn't even need that loader?Building a product doesn’t necessarily mean building a product1. Your first product can be a RAT (Riskiest Assumption Test). Validating that the problem exists.Let's say you are interested in building a new hiring platform that is going to use competitions to find marketers. In your head, you see an app where candidates register, and then can save competitions etc. Building a product with the RAT in mind will allow you to strip this all away to focus uniquely on the assumption that needs to be true for the product to work. In our case, let's say this is the assumption that candidates will sign up to competitions. How could we build that? How about we go on Linkedin, message 100 candidates and ask them? To make it fancier, we could make the first competition an event on eventbrite and see how many sign up. That’s it! Technically, we just built our first product! And how much code did we need? None.2. From RAT to prototype: If the problem exists, what would my solution look like: Wohoo, 10 people signed up to our platform! That's great. Let's start building. For me, the next steps in the process look like this: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
Of course, every project is specific, so if you want to build outside the above scope I would revert to the whimsical product flow and the appropriate tools for each step. In general, I try to stick to max three tools per project. Set timelines. In other words, try and make Step 1 work for one day. If it doesn’t work, ask! Makerpad is a great forum of super helpful no-coders where you can get advice, but also learn from tutorials of every no-code tool under the sun. Otherwise Google!So, to wrap it up:1) A product isn't always the finished product, it can be a prototype, a sketch or an experiment. 2) If you go the no-code route, break your product into steps using a tool like whimsical and 3) use the restrictions of the tools as an advantage to restrict the scope of what you are building. Lastly 4) If you are spending >1hr reading tool documentation, leverage support groups like Makerpad to ask!