Five examples of no-code prototypes

Written by Andrew Askins on April 09, 2018

While finishing her Advertising Master’s program, Cori Banyon met a professor who would change her life.

He encouraged her to come up with an idea for class, based on one of her favorite hobbies. Cori happens to be a huge country music fan, and after thinking about how many VIP meet and greet experiences she’d had that turned out to be a disappointment, she realized there had to be a way to make that experience better.

The current experience wasn’t great for artists (being in a room surrounded by crazy fans can be awkward, and sometimes dangerous) or fans (waiting in line for hours after a show only to get a two second interaction and forced photo).

She decided she could use technology to develop a way for musicians to video chat with their fans — sort of a virtual meet & greet. The next step, or so she thought, was to draw up some wireframes and try to find a developer to help her build the idea.

This is a route many founders take. They come up with an idea and immediately want to build it. And if you don’t know how to code, this means finding a developer and convincing them to work on your idea.

The problem is, developers are expensive. So non-technical founders logically will try to convince a developer to become their technical co-founder, often trading pay now for equity in the company.

But good developers are in super high demand. They are constantly being bombarded with (often horrible) ideas and promises of future earnings and rocketship growth. It leads many developers to feeling jaded and cynical. And it means unless you truly take the time to build a relationship with a technical partner, you’re going to be hard pressed to convince someone to work on your idea.

The whole world seemed to be against her. But then she found something that changed her entire perspective: a way to hack together an MVP (minimum viable product)...without writing a single line of code!

It turns out there are plenty of ways to build an MVP without touching any code at all. Below, we’ve collected five examples for you to draw inspiration from:

1. Building a space for virtual meet & greets

After a few false leads on developers and what felt like a lot of wasted time, Cori decided to create an MVP using the skills she already had.

She found an existing livestream platform, and put together a few tools and manual processes to create the first virtual meet and greet, using a SquareSpace landing page, embedding an interactive webinar platform on the site, manually setting up a day/time for artists, and then creating graphics for the artists to share on social media.

&Me created a prototype without writing any code

&Me created a prototype of their video platform without writing any code

Her first session was created to test whether or not artists were even interested in video chatting with their fans, and if it would be an authentic experience for those fans. Both the artist & the fans loved the first session, so she improved the next event with what she learned and kept running events, learning from each one as she did so.

Once she felt like she had found problem/solution fit, she began exploring what it would take to build her own MVP, and is now in bootstrap mode, hiring a freelance developer to build AndMe.Tv version two, while still working with artists and other influencers to host video chats with their fans.

Want to hear more? You can listen to Cori talk about her story in this episode of the Mavericks Project.

Tools used: 

Good option if: There’s a little-known software tool that you can manually use to solve your customers’ problems.

2. Building an MVP in Excel

One of our clients at Krit, Steve Shulman, has been running a consulting company for well over a decade now. Steve works with top-tier research universities (think Dartmouth, Yale, and Brown University, among others) to help them understand and create intelligent projections around how they can get more grants.

These universities all have a ton of data on which proposals they’ve written, who wrote them, how much they’re for, which ones closed/failed, and so on. But they aren’t doing anything with this data.

Steve helps them make sense of the data, so they can make intelligent decisions about when to build a new building, give someone a raise, help create revenue projections, etc. After some time, he realized he could create a tool to help both him and his clients, and B3i Analytics was born.

It started as two massive Excel workbooks with input fields for all kinds of data. One of the workbooks actually takes in data about the current economic and political climates and runs different scenarios on how those factors may affect your bottom line. The other workbook is slightly less complex and is focused solely on university data.

Eventually, he had enough sample data to build out a comprehensive spreadsheet that he started showing to his clients and getting feedback on whether they’d be interested in using a similar product. Once they started asking to use this new tool, he reached out to Krit to talk about turning it into a SaaS product.

The spreadsheet Steve Shulman used to prototype the B3i Analytics platform.

The spreadsheet Steve Shulman used to prototype the B3i Analytics platform.

The spreadsheet is super complicated, but since he’d taken the time to put his concept into spreadsheet form, we had quite the head start. If he didn’t have something to show us, it would have taken us weeks or months just to figure out what he wanted. But since he had it already laid out, it made the transition into development much much easier.

He also had customers already committing to buy, and giving him feedback on which calculations were valuable to them.

After our roadmapping session, we created an InVision prototype, which he then did another round of user interviews with. After that round of customer feedback, he was ready to invest in building it out, and it launches May 2018.

Tools used: 

  • Excel (you could swap out for Google Sheets or Airtable, depending on complexity)
  • InVision

Good option if: Your product involves data visualizations or complex calculations.

3. The hottest email list in Silicon Valley

Product Hunt, the Reddit-esque site where people can submit and then upvote apps & products, is now part of the daily routine for thousands of founders and Venture Capitalists. But it got started with a humble email list that Ryan Hoover set up in 20 minutes. Ryan used an app that would let you create a group, have people in the group submit posts, and then email everyone a summary at the end of the day.

After getting great feedback on that version, he went on to build a version 1 using Telescope (an open-source tool used to build sites similar to HackerNews and Reddit), and the rest is history. (You can read more about the journey of building it here.)

This technique has been used by other people, too — Scott’s Cheap Flights started as a simple MailChimp email list collecting the deals he noticed while looking for cheap flights for himself. He was already looking for the flights, why not share his findings? After some surprise outside press, he went from 400 subscribers to several thousand overnight, which got him thinking about how to turn it into a product. And the paid subscription was born.

Tools used: 

Good option if: Your product involves sharing or curating content/information/tools.

4. Use Zapier to hook apps together

Using Zapier, you can build your own backend relatively quickly and easily. For example, Richard Eastes, the founder of GreenSocks, set up the following workflow using Zapier within 24 hours of having the idea:

The workflow used by Richard Eastes to prototype GreenSocks

The workflow used by Richard Eastes to prototype GreenSocks

He first set up a site using WordPress and Gravity Forms. When a potential customer submitted their information through Gravity Forms, it would be copied into a Google Sheets spreadsheet.

Richard (and later, his team) would review the entries, then update them when someone had been assigned to the customer. That update would trigger a custom email to the customer, and a text message to the person who had been assigned to that customer. Last but not least, the customer’s information gets saved into Salesforce for future marketing efforts.

Zapier can be used with other apps in this way to build everything from an art recommendation app to a book-gifting initiative — all without touching a single line of code.

Tools used: 

Good option if: You don’t have coding knowledge, but are fairly tech-savvy and know your way around a lot of these apps (Wordpress or other site-builders, Google Sheets, Typeform, etc.).

5. Closing a friends and family round with an Invision prototype

Another Krit client, Lauren Sturdivant, came to us in 2017 with an idea for an app that she wanted to develop. As a personal injury attorney, Lauren worked with one of the top firms in Charleston, and was juggling as many as 170-200 clients at a time. 

The biggest timesuck was constantly answering client calls to give status updates on their cases. Eventually, she thought, “What if they had a way to see exactly where there case is, without having to call me?”

That was the initial idea behind Case Status, a mobile app that her clients could open at any point and see how their case was progressing, at a glance. Think Domino’s Pizza Tracker, but for your legal case.

After getting some initial client feedback, she did a roadmapping session, and then we designed a prototype for the client-facing side of the app. The attorney version of the app is more of an admin portal, and the client-facing side was what people were really interested in seeing. We got started using InVision and designed mockups:

Clickable Prototype

The clickable prototype Lauren Sturdivant used to raise funding to build the first version of Case Status. Using InVision, it feels like a real application, even though there's no code behind it.

In case you aren’t familiar with InVision, it lets you stitch together static mockups and display them on a computer or phone. It feels very much like a real app, which can be incredibly useful for getting user feedback. In Lauren’s case, she was working with us to design the mockup, but if you don’t have an agency at your disposal, it’s easy to find designers with InVision experience on sites like Crew.

Using that initial InVision MVP, she was able to raise a friends and family round. You can read more about her journey raising a friends and family round here, and read our Case Status case study here.

Tools used: 

  • InVision (if you want something even easier, or want to create wireframes you can take to a designer, you can use Balsamiq)

Good for you if: You have the budget to work with a designer, or the technical know-how to create a prototype yourself. Also, good if you want to create a tier-one MVP to get a small round of funding or user feedback to refine your product idea with.

Takeaways

If you’ve got an idea for a new product your goal should be to build a Minimum Viable Product and start collecting feedback (ideally in the form of revenue) as early as possible.

If you’re a non-technical founder without a developer best friend to help, you have no excuse. There are more ways than ever to build your MVP without writing a single line of code. Here are 5 examples you could use to build your MVP today:

  1. Set up a Squarespace site and find an existing software tool that you can use manually on behalf of your clients

  2. Visualize data and run calculations with an excel spreadsheet

  3. Build an audience and start sharing your curated content with an email list

  4. Connect existing apps in a new and innovative way with Zapier

  5. Design a prototype that looks and feels like a real app with InVision

Andrew is our fearless leader. If you want to chat about startups, football or cooking shows you can hit him up on Twitter. If you enjoyed this post it would be a huge help if you shared it or signed up for our newsletter.