A software demo is integral to legitimizing your product idea.
Right now, your idea is intangible: free floating and open to interpretation.
You might have tried explaining your idea to someone, but they just don’t get it. You explain in circles and you still might not be on the same page. How can you hire, fundraise, and build a successful product when people can’t grasp your novel idea?
The demo is the silver bullet in your entrepreneurial toolbox to communicate your vision, not by showing but by telling.
The best-kept secret with software demos is that you should feel no pressure to do one live, especially at the early stages. You are looking for money to build out your technical team and investors would much rather gain a comprehensive understanding of your vision than see that you are able to write a lot of React code in a 2 person team.
Extra points if you are able to show that your web application works well live and that you have users, but troubleshooting while your server is down during a pitch is not the best use of your time.
So, record it! The best way to include a recorded demo during your pitch is to walk the room through it. Don’t include audio, but keep the audience engaged as you walk them through a recording.
If you are looking for funding to build out your technical team, rest easy knowing that some of the best demos don’t require a lot of code, if any code at all.
How can I create my low-code demo?
Remember, low-code demos are just demos. Be clear that your demo isn’t a fully functional product that you could hand off after a pitch to play around with.
Prior to developing any web application, teams build mock-ups: layers of images and text that can be linked together to feign functionality. Mock-ups help ensure the team is on the same page regarding the required functionality, layout, and look of the finished application.
While not all functionality can be replicated in your mock-up, it allows for a general flow outline of your application. Feel free to only model the emphasized aspects of your product. Nobody cares about your log in flow.
Different types of mock-ups can be created for different purposes. Some mockups emphasize technology and others emphasize emotion. Understand where your demo needs to lie on this spectrum.
There are several programs that make this relatively simple: Adobe XD, InVision, Sketch, and Figma. I recommend Figma. Here’s why:
- It allows for live collaboration between users.
- You don’t need to download any software (although you can if you would like).
- It is free for 2 editors and up to 3 projects (as of February 2021).
- There is a huge community surrounding Figma. This comes in handy if you aren’t a well seasoned UX designer and would rather use buttons and layouts designed by people who know what they are doing.
- It is cloud-based, so no files that you need to keep track of and manage.
You can create different frames to show different screens in your application. You can choose the right screen size (mobile or computer), and go from there. Here, we are taking a look at a mobile app as you can see above.
If you aren’t super experienced in user experience design, I recommend checking out the Figma community page and duplicating a kit that someone else already made. Once you have duplicated it, you can go in and take a look at how they structured their kit and copy and paste components into your mock up.
It is easy to “prototype” user interactions directly into your Figma. You can do this in Figma by using the “Prototype” functionality and connecting individual components and screens.
For example, let’s take a look at what is going on above. We can see that when people click the “Register” button on the “Logged Out” screen that it brings them to the “Register (step 1)” screen. Conversely, we can see that when a user clicks on the back button in the “Register (step 1)” screen, that they are brought back to the “Logged Out” Screen. There are more connections to other screens in this application, but for brevity and understanding I included just these two.
To see a final demo and get a better understanding of what you can do with Figma, check it out here.
If an integral part of your application is not able to be replicated using a software like Figma, then you can record that portion seperately and stitch it together using any video editing software.
Reminders
An important thing to keep in mind is that you are creating just enough of a demo just to make your idea clear. You don’t need all of the functionality your app might hold one day. You just need enough to get other people excited.
By using the bountiful design kits available online, I am confident that with a little bit of work (and time spent learning the fundamentals of UI design) you will be able to create a mock-up that is clear, functional, and attractive.
One of the most common pitfalls to creating a demo is not planning for your mock-up. I highly recommend drafting out the general flow and functionality you are hoping to capture in your demo. Your demo doesn’t need to be beautiful but it does need to get the point across. Don’t get caught up in fonts and colors.
A demo is supposed to be clear and concise, not extensive and thorough. A demo should leave people with some further questions but with a better understanding of your idea.
Here are some links to get you started on creating your first demo.
Extra Resources
UI/UX Design Basics
There are also lots of great videos on youtube to help you out with this. Don’t get worried about the amount of information available. You just need to understand the fundamentals to put together a Figma demo.
Learning Figma
When it comes to learning Figma, the best way is to just dive right in. The Figma youtube channel, however, has the best information regarding how to use the product.
As always, if you’re working on an idea, drop us a line at team@greenline.vc and visit our website www.greenline.vc. Thanks!
Navi Sai, Founding Partner of Green Line Ventures.
