This post is part of a series about how you can use “off-the-shelf” tools to make online products in a way that prioritizes user needs over the application of technology — and saves you money. Many awesome companies like Compass, Kollecto, and Code for America have described their experiences of “building without code.” I hope to contribute an engineer’s perspective to the conversation.
Tools for people who make things on the internet
This is a reference list of tools that can help you make great internet products quickly. It is for regular people as well as designers and developers, and it covers a broad range of uses because people making things on the web have a broad range of responsibilities. You may be a designer making a website or a businessperson mocking up strategies to improve retention on your site. The tools in this list should help you reach your goals without feeling like an impostor, even if you don’t know how to code.
My motivation for this is to encourage prioritizing user needs over the application of technology. When it comes to understanding and solving users’ problems, I hope to foster wider use of these prototyping tools rather than teaching people to code. They allow people with less time, money, and technical knowhow to build products and get them in front of users. They facilitate iterating quickly on products, and speed us along the path to solving real problems.
Note: This list is itself a prototype. It is not the ideal format for evaluating all of these different tools. I’ll be updating this list as I learn more and get feedback.
Note 2: This does not cover things like business intelligence, sales, or project-management tools — for those needs I recommend the Compass Non-technical toolkit.
The list is broken up into three sections.
- Tools for anyone
These are all useful for anyone who wants to make things on the internet, even if they don’t know how to code or design. - Tools for designers
These are web-specific tools for prototyping design and interaction. - Tools for engineers
These are tools to help code-savvy developers build user-facing products more quickly.
Before you start: The tiny content framework
Nicole Fenton created a fantastic list of questions you should ask yourself and your team before you start work on a project. They provide a great way to help align your team’s focus on what you are making and who you are making it for. I use this framework for almost every project I work on. I usually copy it into a Google Doc, answer all of the questions, and then use it to draft a statement about the project. I then include or link to the statement in any materials for the project such as outreach plans or a technical spec.
Before you launch: Launch checklist
This is a helpful list of common problems you should consider before launching a website. It covers everything from usability and accessibility to search and form inputs.
Prototyping tools for anyone
Tools for handling data
- Google Sheets
Sheets, a spreadsheet in the cloud, is probably the number one prototyping tool out there. It is accessible to your whole team out of the box and its data can integrate with virtually any other service. One of Sheets’s simplest uses is to create a spreadsheet of email addresses, and to add columns for things like text, links, or products that will get sent to those address. MailChimp, described in detail below, can pull from your spreadsheet to send users individually customized HTML emails. Edit your spreadsheet every week, and you’ll have a weekly personalized email service with no engineering work at all. - Zapier
Zapier allows you to integrate many different apps in paired sets using “Triggers” and “Actions.” For example, your Trigger might be “someone buys something from my Shopify store,” and your Action might be “add them to my MailChimp mailing list.” The use cases here are truly endless. - CrowdSource
If you can’t figure out how to get data from one place to another for any reason, you can always pay someone else to do it. CrowdSource makes it very easy and affordable to do so. It is also good tool for translation and some copywriting.
Tools for sending things to people
- Mailchimp
The source of the “email-first startup.” MailChimp allows you to send nice customized emails to people and can pull data from a wide array of other services. It provides a great way to prototype any online business that can be modeled by sending potential customers personalized emails and seeing what they click on. - Twilio
Twilio is an SMS service that you can use to send personalized texts. Using the aforementioned Zapier, for instance, you could have Twilio text a user whenever they order something from your store.
Tools for creating a website
- Squarespace
This service lets you get a reasonable website up quickly. And if you don’t quite have your content sorted out, it easily facilitates posting a holding page with helpful information about your site and a click-through to sign up for a mailing list. It’s also good for prototyping a site that you plan to build yourself, since you can see how your text and images work on a real website. - Typeform
Typeform provides the best way to create pretty forms and surveys. Say you want to send your users a quick survey, or ask them a few questions after they sign up for your mailing list―Typeform makes it easy. I often use this service to prototype onboarding flows. With it I can quickly see onboarding questions on an actual web page and check if the flow makes sense. - Shopify
Shopify is like Squarespace but is specifically designed for online stores. You can use it to sell tangible goods, but also things like memberships or subscriptions. - Bubble
This service facilitates programming for non-programmers. In addition to allowing you to style a website, it lets you program logic into your application and store data. The functionality is extensive enough to build things like a full Twitter clone. It handles everything from user accounts to content editing and overall site styling. There are even Bubble consultants who can help you prototype using the service.
Prototyping tools for designers
Beyond Photoshop, Illustrator, and Sketch, some new tools have emerged to help designers prototype products that people will interact with on screens.
Interaction and animation prototyping
- Principle
Principle makes it easy to create animated and interactive interface designs. It’s especially useful for designing interactions across many pages or screens. - Origami
Created by Facebook, Origami helps you mock up how small design elements will animate or respond to interaction.
Prototyping with a little bit of code
- Invision
This is a tough tool to categorize, but that doesn’t make it any less compelling. It provides design collaboration, prototyping, and user testing, all rolled into one product. It does require a bit of logic — but not really any coding — to turn your flat designs into clickable prototypes. You can then send users through those interactive designs and get feedback from them, all within InVision. - Framer
Framer imports your Sketch mockups into a lightweight coding environment. From there, you can add animations, interactivity, and dynamic data (via APIs) to turn your mockup into a functional prototype. While this service does require basic coding skills, it’s home to a pretty vibrant community and things like video tutorials and example projects to help you get started. - Macaw
A bit like a modern version of Dreamweaver, Macaw allows you to build a website by drawing it. It’s less focused on animations and interactivity than Framer, but it does export HTML and CSS, allowing you to build and deploy real websites. As a result, a basic understanding of those languages will help you get the most from the tool. Sadly, Macaw was recently purchased by InVision and its future is uncertain.
Prototyping tools for developers
Most of these tools focus on getting a back end up and running quickly. They take two general approaches: some help you create your models quickly, while others help you speed up building integrations. They are not mutually exclusive. For example, you could use Firebase (in the first group) to authenticate users, Contentful (also in the first group) to manage text in the onboarding flow, and Dexter (in the latter group) to handle emailing users after accounts are created.
Services that help you create your database models and handle user authentication
- Firebase
Firebase is an API as a service. It supports user authentication and allows you to easily build cross-platform, serverless apps and websites. I would have recommended Parse alongside Firebase, but that service was recently slated for shutdown by Facebook - Contentful
This, in turn, is API + CMS as a service. At its core, Contentful allows engineers to set up database models and gives them an API. But it also provides a nice CMS for non-engineers to input data based on those models, with custom validation and error messages. This data can include text and images, or more complex elements like one-to-many/many-to-many relations. - Webhook
Finally, Webhook is API + CMS + Static-site deployment as a service. It provides an additional layer on top of Contentful. It has a nice CMS and handles deployment of static sites based on the data it stores.
Services that help you do integrations quickly (“API Glue”)
- Code (by Zapier)
Code is pretty incredible if you already use Zapier. It allows you to run JavaScript or Python as a step in your Zapier integrations. Code uses AWS Lambda on the back end, so it has all of the features of that platform. This service may work nicely for a team, giving engineers more features while still providing utility for non-engineers. (Here’s a great example use case.) - Dexter
A bit like a modern Yahoo Pipes or a developer-focused Zapier, Dexter lets you create modules to abstract APIs, and then chain these modules together into service-based apps (like SMS or email services) that may have no UI at all. - Stamplay
Stamplay lets you quickly create new, complex websites using other APIs like Stripe and Facebook Login as building blocks. - Treeline
Treeline is a web UI that facilitates construction of back ends. It lets you create endpoints and write code fast. - Hoist
This is a great integration service for anyone with a basic understanding of how to code. It’s as simple as IFTTT, but is designed for user-facing apps rather than personal workflows.
The above tools can take anywhere from a few hours to a few days to master―not much time! But the difficult part is stringing them together into a product and then confirming that actual users want it. To simplify that process, some companies start as “email-first” outfits, or by blogging, or by reaching their audiences with Instagram and Twitter accounts. I’ve written up a separate post to gather stories of companies ‘building without code’.
