No matter how small or absent is your experience in design, UI/UX, and coding, you still are capable of doing a decent MVP or working prototype of your idea. Yes, even without a technical co-founder, you can give your product a good start!
So as I promised, here is a short overview of tools to start creating a prototype or an MVP of the app with your own hands.
Surely, there are thousands of various means to choose from. I’ll only mention the most popular and handy ones. I aim to inspire you to take the idea out of your head and sketch it roughly, without getting into the details of the user interfaces of each. I’ll also try to keep at minimum or no cost.
Before you start, look for some tips in our short guides to developing an MVP and story-mapping. Let’s refresh a little bit about what we expect from an MVP to be:
- Free or minimum costs
- Workable enough to show the value
- No bells and whistles
Schematically saying, you need to go through these steps:
1. Outline customer journey – create basic frames and user stories with Xmind
Create basic frames and user stories for your MVP with Xmind
They say it is “the most popular mind-mapping tool on the planet.” No wonder, as it is open-sourced, great for mind-mapping and brainstorming, easy to collaborate. It is also very intuitive, friendly, and available in the free version.
Tip: saving maps as Evernote notes is a great way to share them.
To get more inspired, check our recent article about story mapping.
2. Decide on how the user interface should look like – prepare mockups and screens
With modern tools, your first MVP sketch can look as sleek as you want, even if it’s built-in a few days. Our number 1 choice is Sketch.
Prepare mockups and screens for your MVP in Sketch
Sketch allows you to see your designs come to life with interactive hotspots, dynamic components, and animations before development has begun. What we all love Sketch for is that despite its many features, the UI is relatively easy to use, so the learning curve is quite short.
Tip: try using their Artboards. It turns your static screens into interactive prototypes, without ever leaving Sketch. Not only that but you can test them with the Sketch Mirror app and share them on Sketch Cloud. Give both a try, they are just great!
Three alternative tools worth to be named are:
Webflow – for websites mockups
Build website mockups with Webflow
pronto.io for prototyping apps
Prototyping apps with Pronto.io
Adobe XD for both designing and prototyping
Screens and designs with Adobe XD
Bubble.is, which is at the same time a visual programming tool and a cloud platform
No-code visual programming with. Bubble
Intuitive interfaces and free plans are what they have in common. And yet you do not need any knowledge of coding to use them.
Webflow is a bit more complicated than most of the DIY website tools out there. But, in my opinion, it is a very efficient way to start learning the basics of HTML and CSS. As at some point you still need to possess a bit of knowledge anyway.
proto.io is quite simple to use. It has also Sketch plugin integrated.
Adobe XD has a great iPhone app allowing you to preview how an application would look like on the device.
To prepare visuals and edit graphics, I’d recommend using MS PowerPoint.
MS PowerPoint for images
We used to think about PowerPoint as a tool for giving a presentation. However, with late years' updates, it can give you much more. Anything you can think of to do about images can be done there:
Will outline just a few:
- Icons – the set is large enough to be used to create almost anything
- Callouts, buttons, shapes with the ability to edit, distort, reshape, etc.
- Insert screenshots and screen recordings
Tip: Save ready images created on a slide as png or jpeg (or choose from many other formats).
3. Put life into your app – use Google Sheets and Google Forms to fill it with realistic dummy data
Build dummy data with Google Sheets
If you have never used Google Drive – start. Google Sheets has a fantastic range of functions that, when combined, can be useful as an MVP (minimum viable product). Using them as a database is also the quickest database setup you can think of.
Tip: as for test data, I suggest using a Random generator add-on for Google Sheets
Google Forms is the easiest way to collect information and keep it handy to a read-edit-manipulate spreadsheet. Without even mentioning the native embedding function of a Google Form into a website.
Typeform is an alternative tool with dozens of pre-built templates and examples.
Typeform with pre-build templates and examples
By the way, even after you go live, a professional setup database (like SQL or JSON) is still not always needed. In the early stages, when you have only dozens of hits per day, it usually isn’t worth the time of setting up a database from scratch, the effort of maintaining PHP code, or the cost of using a third-party tool. That’s where Google Forms again can help.
4. Make the prototype work – connect everything with Zapier
Zapier to connect all together
Zapier is a great automation tool, it can be utilized along with 1500+ apps, and if used smartly, can substitute a backend for you.
I was inspired by this guy’s experience in building a seamless online experience with almost no code. Look what they used and get inspired too:
- Slack for a team chat
- Acuity Scheduling for Appointment scheduling
- Stripe to process payments
- Google Forms for a customer feedback collection
- Google Sheets for a backup leads database
Your MVP will change as many times as you iterate, and on different stages, you will use different tools. The goal is to iron out the majority of creases before the user even experiences the app or website. Moreover, it is also fun to watch your idea live. Isn’t it?
In addition, I wanted to stress a paramount step – a presentation or a pitch. So here is another quick tip: get an account on Animaker.com and make a small fun animated presentation for your idea.
Again, no experience with animating is needed, Animaker is pretty easy to use. It also has a voiceover recording feature with the ability to download .mp3 file. Even if you decided that animation is not for you, use this one to put into your slides.
Depending on the nature of your product, you could also add specific WordPress plugins, Shopify, not to mention website building platforms, logo makers, etc. It’s just fascinating how many things you can do on your own using modern technologies. You are welcome to share those you like the most in the comments.
When the blueprint of your MVP is ready, use it to present your idea to potential investors (next time I plan to share some tips from my experience about getting the funding), to hire a CTO or an agency, to inspire peers, and to engage partners.