Building a Web App Concept on a Tight Budget

October 31, 2020Development

On the 20th October, 2020 we started developing Vidmat with the goal of creating a video testimonials platform as an MVP (minimal viable product).

I wanted to document the process to help break down the steps for others, so here we go…

Where did the idea come from?

While working with Facebook advertising clients via LeadSync, I noticed that businesses were trying to find a simple way to ask customers to submit video testimonials.

Some businesses would setup a Zoom call with their customers so as to ask them questions and record the answers, while others would try to encourage people to record a selfie video and submit it via social media.

There’s nothing inherently wrong with these solutions, they’re just a bit clunky and assume a certain level of tech-savvieness 🤓.

We wanted to make it as easy as possible for businesses to ask their customers for face-to-camera video feedback.

Ideas like these are a dime a dozen. People have them all the time. It’s bringing these ideas to fruition… that’s where most of the magic happens.

How did you get started?

Building a web application from scratch can be a daunting prospect for a non-developer. I’ll let you in on a secret: I’m not a programmer. However, I have had quite a few years experience running web projects (I mentioned LeadSync above), but don’t let that stop you. If you can draw, you can sketch your app idea.

Vidmat Wireframes

The first step I take when build a web application is to create wireframes. Wireframes are a representation of the user interface, kind of like drawing stick figures to tell a story: they create an illustration of the design elements and functionality required for a basic product.

Before you start designing your wireframe interface however, look to other applications for inspiration. There’s nothing harder that staring at a blank canvas. Find other applications that might be same-same but different and create a virtual scrapbook of screenshots to help get you started. I usually use Evernote to record these, but you could create a Pinterest board or just save screenshots to a folder.

Tools for Designing Wireframes

The best wireframing tool is the one that makes it easiest for you to layout the basics of your app. I use a tool called Sketch, but you could use good ol pen and paper if you prefer.

I’ve also used Balsamiq (they have some excellent tutorials on creating wireframes), and if you have a newer iPad with Apple Pencil, then Adobe Comp, Nebo and Concepts are just a few of the iOS drawing apps that are pretty cool.

Warning: At this stage you’re at risk of spending an inordinate amount of time trying to pick the perfect tool to design your wireframes… (as I have). This is a form or procrastination. Just start sketching your ideas somewhere… anywhere! That’s what napkins were made for 😉

Do I need a front end web designer?

To create a minimal viable product on a tight budget, you don’t really need a front end or UI/UX designer. Don’t get me wrong, good designers are worth their weight in gold, but they also charge accordingly. To create a functional application that doesn’t look pretty, a designer isn’t essential.

Write a Brief for a Developer

Aside from the wireframes that you’ve drawn, you also need to be able to describe what your app does. Keep in mind that the person who reads this brief, may not use English as their first language, so keep it simple. This isn’t a presentation to your boss, don’t try to impress anyone with a fancy Powerpoint presentation, just describe your app in plane English.

Hiring a Developer or Finding a Tech Co-Founder

If you’re not a developer, now’s the time to find a good one. I was lucky enough to have worked with one on a previous project, so I pitched this concept to him and asked if he wanted to partner on it. He accepted 💍 😊.

However, in the past I’ve used Upwork to find and hire good developers. You want to find a “full-stack” web developer who has experience building (web) apps. Don’t worry too much about the development environment, post your brief on Upwork and you will get 6 different recommendations. Ruby, PHP or Python will most likely come up.

Interview your candidates. Yep, setup a call and interview people like they’re applying for a job with you… because, they are, and you’re going to pay them, and you want to be able to communicate effectively with them.

Personally, I prefer to stay away from working with agencies. This has it’s pro’s and con’s but at the end of the day, I’m working directly with the person who’s writing code.

How much will it cost to develop?

It depends. It depends on the complexity of your application as well as what existing tools you can use to shortcut the process. For example, with Vidmat, we found a video processing app that will significantly cut down on the initial development time and cost. It may not be the best long term solution (there’s a monthly subscription cost involved), but it will help bring this idea to fruition quickly and cheaply.

Hosting

Where is your app going to live? If you’re non-technical, let your developer make a recommendation. Many will suggest Amazon Web Services, we’ve gone with Digital Ocean.

Logo Design

While your developer is getting started, have a logo designed. If you’re the creative type, you may come up with something of your own. If not, find a designer on 99designs or Fiverr.

Iterate

Your developer should now be hard at work turning your basic concept into a functional web app. There will be A LOT to work on. There’s always scenarios you haven’t thought of and decisions to make such as what billing platform you’re going to use, but hopefully this post is enough to get you started and enthused.

Till next time.