November 13, 2019

How to Build Your Idea Into an MVP and Fake it Into Reality

The Three Types of Minimal Viable Products

by @maguay

Writer. Amateur photographer. Information architect. Frm. founding editor @racket and @capiche, senior writer @zapier, Mac and Web editor @AppStorm. Personal blog: @techinch.
maguay's avatar

A cardboard sign and chartered plane doesn’t make an airlines, nor a video and signup form an app. But neither does a full-fledged airlines—complete with check-in counters, planes, pilots, and safety videos—guarantee success, nor the most polished app in the App Store.

“Ideas are worth nothing unless executed,” says CD Baby founder Derek Sivers. “They are just a multiplier. Execution is worth millions.”

All execution isn’t equal, though, and you don’t want to throw good money and time after bad. Thus the fabled MVP, a minimum viable product that’s just enough to see if an idea works. Instead of starting an airlines, you charter a plane and sell seats at cost from a cardboard sign (as Richard Benson did, inspiring him to join a fledgling airline effort and turn it into Virgin Atlantic a few years later). Instead of an app, you build a video and landing page that describes your idea, and see if people sign up (as Dropbox founder Drew Houston did after his inspiration of replacing USB drives with an app). Or instead of searching for a new tool that fits your team’s needs, you hack one together from existing apps—and build software without coding.

MVPs that turn into companies get all the attention, but they’re not the only way ideas can turn into minimal products. If anything, they’re the exception that proves the value of testing ideas and turning them into minimal products—and sometimes, minimal products on their own are enough.

Low code, high output.

HyperCard
HyperCard: The app that could be anything you dreamed.

Three years after Steve Jobs unveiled the original Macintosh, a new bundled app captured the imagination: HyperCard. It made software development something anyone could do, as a as “a personal toolkit for managing information.” Original personal computers required typing code or commands for everything; you started with a text prompt, and early software was often hand-entered as code.

The Macintosh promised a new future where computers were easier to use, and HyperCard ensured that in this brave new future, coding would be more accessible, too. HyperCard offered “programming for the rest of us,” as Apple programmer and developer's association chief David Lingwood described. “The beauty of HyperCard is that it lets people program without having to learn how to write code.”

HyperCard started with a card, a blank space to build an app from text, fields, and buttons. New cards held additional screens for your basic app, linked together with then-new hyperlinks for the hyper part of its name (what we’d simply call links in a website today). Tying those cards together were a flat database to save text entered into cards, and simple code for logic if needed (say, to build a simple calculator app).

With a bit of experimentation, HyperCard was the incubator for countless apps that typified early computing: A choose-your-own-adventure game, a science and history app that in some ways foreshadowed the 1990’s Encarta and the 2000’s Wikipedia, and a digital version of the Whole Earth Catalogue as part digital magazine, part Amazon. HyperCard was so popular at the CERN laboratory that it helped inspire Tim Berners-Lee’s World Wide Web. Even the original version of adventure game Myst was built in HyperCard.

Myst was proof that simple tools are enough to build software, that MVPs can turn into real commercial successes. But HyperCard’s best legacy were the countless tiny apps built with it, apps that continued to be useful on their own for years after their inception. And when it was sunset, HyperCard pwered, among other things, auto company Renault’s inventory system and the lighting system in Malaysia’s Petronas Towers.

Microsoft Access filled similar low code development needs the following decade, as a way to build form-and-database powered apps that countless businesses relied on—including the point of sales system at a local store I frequented as a kid. Excel and other spreadsheets let everyone do basic coding, powering enough mission-critical processes that entrepreneur Patrick McKenzie declared “Every spreadsheet shared in a business is an angel announcing another SaaS app still needs to be built.” Where there are ideas and flexible software, someone will find a way to build something new, it seems.

The MVP recipes.

1. Explain it.

Dropox MVP
The original Dropbox landing page.

Yet every idea doesn’t require an app to prove its worth. When Drew Houston came up with the idea to build a folder that would automatically sync any files saved in it, to replace USB drives, the first thing he shipped wasn't a working beta of Dropbox. Instead, he built a basic landing page that said “We're an easier and better way of securely backing up, synchronizing, and sharing your important files,” and invited visitors to sign up for an invite. That was soon joined by a video that brought the concept to life—and got 75,000 people to sign up for the Dropbox beta.

In the decades after HyperCard launched and faded from view, a simpler version of an MVP took shape. You might not need to build a product. Sometimes you simply need to sell the idea.

A simple landing page website and video are minimal, far from a viable product. Instead, they're a way to prove interest in an idea, to show that you're on the right path and people do want what you're building. If you have a hunch that people would like a new product, that your team should put some effort into something new, start by explaining it. Tell people about your idea, and see what they think. If people are excited, you’ll have an audience ready to buy once you’ve actually built something; if not, it’s back to the drawing board with little lost.

A cardboard sign worked for Virgin’s Branson; a paper sketch might work for physical products. For digital ideas, a landing page website is often the best place to start, as Dropbox did. Build a one-page website that describes your idea, with a signup form where visitors can enter their email so you can let them know when your idea ships. Those don’t take a HyperCard successor; any web builder is enough to share your idea.

These apps can help:

  • Carrd: Got 5 minutes? Pick a Carrd theme, add details about your idea, and turn on the signup form. That’s all it takes to make a landing page. Free with a .carrd.com domain; $9/year otherwise.
  • Google Sites: Have details about your app idea in a Google Slides presentation or a Google Docs doc? You can build those into your landing page with Google Sites. It’s easy to use, and while not as customizable or stylish as Carrd, it’s part of the same suite of Google apps you already use. Free with a Google account.
  • WordPress: Want to share more details about your idea overt time? A WordPress blog gives you both a landing page and a blog in one (something a Medium blog doesn’t, as it’s only a blog). Build your landing page as the first page on your site, add a form to gather subscribers (Google Forms is a great free option), then add regular updates in the blog—and send them to your subscribers. Free with a .wordpress.com domain or on your server; from $5/month otherwise.
  • GitHub Pages: Want to share your idea in the same place you’ll build it? Turn on the Pages option in your GitHub repository, then write Markdown-formatted copy to showcase your idea. Free with a GitHub account.

2. Fake it.

dotmail mvp
The .mail app concept made an idea feel so real, hundreds of people begged for it to be turned into an app.

Designer Tobias Van Schneider, like so many of us, found his email inbox uninspiring at best, maddening at worst. So he pulled out design tools to do something about it—albeit, only in concept. He mocked up his ideal email app, wrote up the ideas that made it work, and put them together in a website that made his .Mail app concept feel real.

The trick worked, enough that hundreds of people messaged overnight to ask when it would launch. All that for a theoretical concept with fake screenshots of an app.

.Mail didn’t ship, and Van Schneider shelved the concept after a few aborted partnership and bootstrapped attempts. But as an MVP of an idea, the fake screenshots caught people’s imagination and helped build his following. The detailed designs did far more than a landing page alone could. They made the idea feel real.

You, too, could capture people’s imagination and make your idea feel real with a fake product that doesn’t do anything other than look real. Instead of building the thing, see if people actually want what you’re building before you build it. It might be a clay model of a product, a rough sketch of a portrait or building design, or a 3D print of the widget you want to make. Or fake it with pictures, as .Mail did, and link them together into an an demo that feels real, that responds to button taps and menu selections like an app. It might be a demo to your boss or business partners for an internal tool or project idea even. It doesn’t have to be a brand new product to sell.

Build something minimal, a bit more than an outline of an idea—just not an actual viable product (that’s the next section). Here are some ways to build that for apps:

  • PowerPoint or Keynote: The same tools you learned to pitch ideas in university and office meetings can also make your app concept feel real. Start with a fake device shape or app window border, then design your app idea inside the frame. Duplicate the slide, and tweak what would be different on the next screen (say to show a menu, if one clicked a button on the first screen). Repeat that until you’ve fleshed out your concept. Then demo your app, and each progressive slide will feel like you’re going through the real app. PowerPoint and Keynote both offer free online versions; Keynote comes free with Mac and iOS devices, while PowerPoint comes with Office 365 from $6.99/month.
  • InVision: Already sketched your ideas in Photoshop or another design app? Export the graphics, then put them together in an InVision prototype. You can add hotspots to images on buttons, links, and other interactive areas, and tell InVision which screen to jump to when that’s clicked. Free for 1 prototype; from $15/month after.
  • Figma: Or, start from scratch in Figma, a design tool that also includes prototyping tools. Design your app with buttons, menus, and more, then use its prototype options to show transitions between screens for an even more realistic demo. Figma works with teams, too, to build ideas with others—and if the idea takes off, you can use your Figma design as the base for your real design. Free for 3 projects and 2 collaborators; from $15/month after.
  • Framer: Need a bit more realism? Framer includes pre-made design components to mockup prototypes that look like real iOS apps, Slack bots, Snapchat lenses, and more—with animations and effects to feel like the real thing. From $15/month.

3. Make it.

Airtable MVP
A custom CMS, built in Airtable by the Britannica team

Here there be dragons, and the gold those dragons protect. For building your idea into an actually working thing seems scary, a seemingly larger undertaking than selling and showing your idea. But if you do it, you just might have the app you always wanted without all that much investment. And it’s not much harder to do than the first two options, thanks to the rise in “code free” app development tools.

First, what type of app do you want to build? A wide variety of business tools—including apps for contacts, bookings, inventory management, accounting, notes, project management, and more—essentially include three things: A form to add data to the app, a database to store the data, and ways to view, sort, and search through the data.

If your app idea fits that general framework, good news: You can build a real, working version of your app with today’s takes on HyperCard and Access, apps like Airtable, Microsoft PowerApps, and more.

Every idea can’t be built without code. If you have an idea for the next hit game or a better video editing app, you might be better building a landing page or fake version of your app to test the idea. But a surprising number of ideas fit into what no-code apps let you build:

  • A new take on Instagram or YouTube: Editing photos or videos might be too hard, but adding media, tagging them, and viewing them in a list? Fits perfect.
  • A better CRM that tracks what your business needs: Ditto. In fact, you could likely start with an existing CRM like Salesforce and tweak your way to perfection, no new app needed.
  • A travel guide: Hardest thing is the content—then you store it in the database and find unique ways to display it, something these tools do perfectly.
  • Uber for X: You need a way to book a service, then a way for service people to see what customers want—perfect fit for a form plus database plus automations.
  • Choose-Your-Own-Adventure games: You need a way to show text and images, buttons for users to select their option, and logic for what to show next. That, too, is easy enough to build.
  • If something happens, do something else for me: Automation tools open up a world of possibility for the more task and location driven app ideas. It might take linking a few tools together, but you can do it.

Odds are, with a bit of creativity you can build at least a minimal version of most app ideas—especially business and data focused apps.

Start by thinking through your app idea. Sketch out how a basic version would work. What data would you need to store, how would it be entered, and what would be the best way to display and organize the data? Do you need to do anything with the data once you have it?

Then think through what tools would be needed. You could start with a form app to collect data, and a spreadsheet or database to store the data. Built-in integrations or a tool like Zapier or IFTTT could connect the two. Or, you could use a tool like Airtable or Zoho Creator that includes forms and a database in one.

Then, what do you want to do with the data? With Google Sheets, say, you could embed a filtered spreadsheet into a website for an easy way to share the data. Or in Airtable, you could build kanban boards, calendars, and organized lists of the data. If you want to do more than just show it off, integration tools could come to the rescue again. Connect your spreadsheet or database to Twilio, say, to send SMS messages, or to Gmail and MailChimp to send emails. Treat apps like LEGO and pull them together, and you can bring your idea to life in an app built from apps.

Here are some tools to help start:

  • Typeform for interactive forms: Want to ask people questions and tweak your response based on what they say? Perhaps you need to offer unique insurance quotes, or want to make an interactive story. Typeform is perfect as it only shows one question at a time—and it lets you include images or video with your questions so they don’t feel like a normal form. Free for basic forms; from $35/month for unlimited forms with logic.
  • Airtable for database powered apps: Want to build everything in one place, in an app that’s as easy to use as a spreadsheet? Airtable’s the place to go. It’s a database app that can filter your data in a grid, list, kanban board, or calendar, with a built-in form to add new data. You can link records, integrate with other apps, and use blocks to add maps, charts, timers, translation, and much more to your app. Free to start; from $12/month after. Or, try Zoho Creator or Microsoft PowerApps for a similar tool, or customization tools in apps like Salesforce and WordPress to build out your ideas.
  • Glide to turn a spreadsheet into an app: Have a list of data—restaurant reviews, inventory, expenses, and more—that you’d like to turn into an app? Glide’s just what you need. Connect it to your Google Sheets spreadsheet, and it will turn the data into a real mobile app. Free to start, from $29/month after.
  • Zapier, IFTTT, or Microsoft Flow for automation and logic: Want to pull multiple apps together, perhaps to get notified of new data, send SMS messages and emails, or reformat text before using it? An automation tool is what you need. Connect the apps you use to Zapier, IFTTT, or Flow, then have the service watch for new data in one app—and tell it what to then do with that data in other apps. It’s coding, without writing any code. Each are free to start; Zapier paid plans from $24.99/month for more advanced automations.
  • Webflow to design websites: Want to build a customized website to showcase your idea, create an interactive site, and build an eCommerce business? Webflow lets you do that and more in a Photoshop-style editor in your browser, without coding. Free to build and experiment; from $15/month once you launch your site.
  • Bubble to design full apps: Or, go even further towards developing an app with Bubble. Lay out app screens, drag in widgets for every feature you need, and link them together with visual logic. You can build out far more advanced app ideas—though it may take a bit more work to ship. Free to start; from $29/month after.

Put your ideas to the test.

The next time a great app idea strikes you, you don’t have to let it linger. Today you can build a full-featured app that brings your idea to life without investing millions. You might not even need to invest anything more than your time.

If it works out, you might have something that fits your needs—or the momentum to turn your idea into a shipping product. If it doesn’t work out, you’ll have put far less effort into the idea than you would if you risked everything on a whim.

HyperCard isn’t with us, but the freedom to create anything you want is still alive and well today—even without coding.

Click here to Tweet this article, then share your favorite MVP tools on Capiche: What are your favorite tools to build an MVP?


Image Credit: Prototype header photo by Alvaro Reyes via Unsplash, HyperCard screenshot via HyperCard User Guide, courtesy of Vintage Apple.

FORMAT WITH MARKDOWN; DRAG AND DROP IMAGES
whyjenwhy1's avatar
@whyjenwhy1 (replying to maguay )
3 years ago

So I can actually test out my idea while still building my MVP? Wild... I might just try it!

3 points
NBNite's avatar
@NBNite (replying to maguay )
3 years ago

Another great read @maguay!
Hitting on some of the better-known (and awesome) saas platforms while also introducing some lesser-known tools for folks to check out.

2 points
maguay's avatar
@maguay (replying to @NBNite )
3 years ago

Thanks @NBNite! What are your favorite tools to build an MVP?

1 point
NBNite's avatar
@NBNite (replying to @maguay )
3 years ago

@maguay
You touched on Google Sites above, but I believe the G-Suite overall is such a strong starting point (and priced so inexpensively for what you get). Communication, collaboration, design, development, hosting - you name it and the suite can get you started.

Separately, while not a tool exactly, I've found tremendous success sourcing talent on AngelList. Recruiters and over-agressive salespeople have made it harder than ever to capture attention on LinkedIn but have not seem to have made their way over to AngelList yet. You may find that the crowd is generally younger and leans towards the tech/VC space, but surrounding yourself with a good team should be at the top of the list (if not the top priority) for anyone building a company from the ground up.

2 points
maguay's avatar
@maguay (replying to @NBNite )
3 years ago

@NBNite G Suite really is amazing—and you can build quite a few mini apps around just Google Forms and Google Sheets.

Great point on a team being most important. Thanks for the AngelList tip!

1 point
derp_unicorns's avatar
@derp_unicorns (replying to maguay )
2 years ago

Great article. you can also try https://pory.io for building MVPs. It turns your Airtable data into functional web apps using templates and integrates with other apps so you can add things like live chat and analytics. 😊

1 point
What's the best way to get feedback about a design or product?

Do you have a favorite survey or poll tool to get feedback, or a unique process to get actionable insights from your users about your design, product features, pricing, and more? There was an inte...

What's the best tool for building a customized API documentation?

Let's say you have an API you want to document and you want to: - Let your users test their calls to the API thanks to a "playground" like the one on the Figma API - Be able to customize it to matc...

The community for power users.