From Concept To Product: An Entrepreneur’s Guide To Rapid App Development

Published in

Moonfarmer

8 min readMar 17, 2020

So you’re setting out on an exciting new mission: you’re going to build an app. You’ve got an innovative concept, your investors are on board, but you don’t necessarily have the technical know-how to bring your vision to life.

This guide will fill you in on the steps that happen between concept and launch. These basic rules apply to both mobile apps and web apps alike.

Application Platform vs Application Client

Before we dive in, let’s define a couple of key terms and concepts. In order to proceed, it is important to understand the difference between an application platform and an application client.

An application platform is a framework of services that application programs rely on for standard operations. This sits on the web or the cloud and is where your user data (login, password, etc.) is stored.
This is different from the application client, which can otherwise be thought of as the user interface. It is a stand-alone application that runs on the client machine. The application client is used to perform tasks, such as system or application administration. This can be a mobile client (iOS, Android), or mobile web (Progressive Web App). PWAs feel like a mobile app but are served from the web. Application clients can also be a number of other types of client, for example: Apple’s CarPlay.

When you set out to build an app, you shouldn’t just look for a specific type of developer, you should focus on finding someone who can implement both the platform side and the client side of the application.

Five Core Principles

Now that we have a firm grasp on these key concepts, we can take a look at what it takes to bring your idea to life. Whether your project is big or small, there are five core principles to the rapid app development process:

Concept
Goals
Design
Prototype
Test

1. Concept

First, you need to define your concept. What’s the big idea? Who is it for? Articulating these concepts together will help you build out the product specifications: how does it work, who uses it, and to what outcome.

Next, you need to do some market research. Is there anything else like it on the market? If the market is flooded with products like yours, it may be difficult to get your version to stand out. On the other hand, it’s not a great idea to introduce something into a totally new space because you’ll have no idea if it will work! If there are already a few people out there, you can know that the market exists. Then you can set out to it better.

Last, you need to define your business model. This is not just how you make money, but determining how your product changes the world. Does it fundamentally make a difference? How does your idea apply technology to address a problem?

2. Goals

What do you want to achieve?

Objective goals — How are people going to use your app? How long will people spend using your app? What kind of engagement are you striving for? These are quantitative goals.
Subjective goals — Give your prototype to a wide variety of people and get feedback. Use focus groups, user studies, and even your own experience using the product. This feedback should shape your subjective goals.

How does the prototype fit into your strategy?

Think about what you’re going to build. Do you need a working product once you ship?
How much time work and money are you willing to put out. In other words, what is your long-term investment? Does the prototype serve these goals?

How will you measure these goals?

It’s not enough to set goals. You need to be able to measure them so that you know what is working. Learning what drives user behavior can help you build a product that people keep coming back to.
There are some amazing free tools such as Google Analytics, Firebase, and In-Store Analytics.
There are also some great advanced (paid) tools on the market. For example, Hotjar and Mouseflow allow you to track user behavior on websites. Heap Analytics is a powerful, comprehensive tool that catches everything.

3. Design

The most important thing you can do when preparing your app for development is to figure out how to write down exactly what you’re trying to accomplish and for whom. In order to do this you’ll need to transform your goals into specifications.

Specifications

It’s generally not a good idea to look at wireframes or designs as the main avenue for explaining an app to someone. They obfuscate a lot of information and intentions. Written details are better for understanding functionality.
Moonfarmer uses an english-based language called Gherkin. This is a powerful approach because it allows everyone (the developers (technical people), you (presumably non-technical), and other stakeholders) to have a clear understanding of how your product is going to work.

Design Systems

It’s important to remember apps and sites are active systems, not posters. Designing a page is not as useful as designing all the components. You need a set of fundamental design tools that have functional outcomes. By designing all these things you’re able to recreate and renew design functionality based on design system. You’re designing for a living product so you should focus on designing by component!
For rapid prototyping in particular, you need to design piece by piece.

Design Thinking

Moonfarmer practices design thinking. Similar to agile, this process is constantly iterating through designs.

During the concept phase, you’ll envision who is using your product by building user personas. When you do this you are empathizing with your audience.
This defines the objectives.
From there you can ideate on functionality and design. These ideas will be executed through prototyping and exploration. You should iterate between the ideation and prototype stages many times before landing on your minimum viable product (MVP).
Once you’re done iterating and the designs are created we can start testing them!

Tools

There are a number of tools you can use during this phase.

Design Tools — Adobe Experience Designer, Sketch
Interactive Prototyping Tools — Adobe XD, Sketch Cloud, InVision, Marvel App
Other Tools — Framer, Axure, proto.io, Vector Balsamiq, Principle, and a lot more…

4. Prototype

With your goals and designs in hand, you can finally begin building the prototype. In order to do this, you’ll need to understand what your options are. There are a lot of confusing tools out on the market right now, which can make it difficult to make the right choice for your project.

DEFINITIONS: What Is A Prototype?

A prototype can mean different things under different circumstances, so it is important to think about these differences. Depending on your needs, a prototype can be:

A mockup or interactive prototype. This would simply be a deck or static page with some interactive elements to showcase functionality.
A working prototype. This would be an actual working version of your website or mobile app that is still subject to testing and changes.
Single Page App (SPA) or Progressive Web App (PWA). Occasionally you’ll find something between a mockup and a working prototype. You can think of these as a more advanced version of a mockup.

DEFINITIONS: What Is NOT A Prototype?

Lots of people make mistakes when trying to get their prototypes on the ground because they don’t know what not to look for. These mistakes can cost you literal years of your time, effort, and money. Here are a few key tips on what not to do when looking to build a prototype:

A prototype should never be a developed with “throwaway” engineering or design. If you don’t have the budget for development or your idea isn’t fleshed out, stick to mockups.
A prototype should never be built with an “off the shelf” technology (such as SquareSpace or WordPress). If you substitute your app development for a prototype built with these kinds of technologies, you may end up shipping this as your final product. Then after after a few years of chasing your dream, you’ll find yourself at a dead-end.

If you’re going to build your product, build it for real, or keep it at a concept level. Don’t put a lot of time and energy into something you can’t actually use or you’ll end up spending a lot of time and energy trying to do it all again.

DEFINITIONS: Rapid App Prototyping

Rapid App Prototyping is a bootstrapping approach, putting less emphasis on planning and more emphasis on an adaptive process.

Rapid prototyping is tougher and generally a higher investment.
This approach is also more resistant to change, and will have longer turnaround times.

DEFINITIONS: Prototyping Apps

As previously defined, prototypes can be either an interactive mockup, or a working prototype.

Mocks only simulate the User Experience (visual experience), or what it’s like to feel and touch the app.
Unlike mocks, working prototypes can simulate the outcomes of user interaction.

TOOLS: “Fast” Platform Development Tools

Rapid REST API Development: Ruby on Rails, Loopback, Features, Postman
Fast NoSQL backends: Firebase Cloud Firestore, Firebase Realtime Database
Functions as a Service: AWS Lambda, Google Cloud Functions, Open FaaS

TOOLS: App Development Tools

Progressive Web Apps: React/Next.js, Vue/Nuxt.js
“Real” Development: Native (Swift — iOS, Java — Android, et al), React Native (JavaScript Logic, Native Views Cross Platform), Flutter (Cross Platform, Dart)
Toolkits: Sencha Touch (Fast, Limiting), Expo

5. Test

Testing is an opportunity for you to get feedback on what you’ve built. Some approaches include focus groups, feedback forms, IDI’s (interviews), and evaluating metrics.

At this point it’s a good idea to return to your goals and evaluate whether or not you’ve met them. If not, it’s time to circle back to the design and prototyping phases. Iterate through this cycle until you land on a product that meets your goals.

Then you’re finally ready to launch!

Dan Stone is an entrepreneur, builder of many things, and the Senior Creative Technologist and Managing Partner at Moonfarmer. You can watch him present these ideas in the video archives for the February 2020 Hudson Valley Tech Meetup.