How to Build and Validate a Startup Idea with a Landing Page MVP [In Less Than Two Hours]

Written by whizzoe | Published 2019/12/23
Tech Story Tags: product-management | minimum-viable-product | product-design | nocode | mvp | validate-a-startup-idea | carrd | airtable

TLDR How to Build and Validate a Startup Idea with a Landing Page MVP [In Less Than Two Hours] How to build and Validates a startup idea with a landing page MVP [in less than two hours] This article is part of my toolkit newsletters where I share resources about building things. I build prototype to solve problems using tech and design. Some of them are built in code, no-code, or spreadsheet or spreadsheet tools. Greetingram is an online gift platform that allows you to create greeting card with customized voice messages.via the TL;DR App

The toolkit to help you build MVP with $0 capital and 0 code
Note:Ā This article is part of myĀ toolkit newslettersā†—ļø where I share resources about building things. Join me :)
As aĀ product personā†—ļø, I build prototype to solve problems using tech and design. Some of them are built inĀ code,Ā no-code, orĀ spreadsheet
Few months ago, I helped to prototype a startup idea for a friend, Chris. He wanted to validate an eCommerce idea of selling greeting cards with personalized voice messaging.
Thanks for the permission to showcase your project, Chris! That said, I would like to share the toolkit & steps that I used to create the landing page MVP:

1. Getting it right šŸ˜ƒ

Dropbox, Facebook & Airbnb did not start out as a full-feature platform. In fact, they built a scrappy initial product to test their ideas to see whether it will succeed.
You donā€™t want to build something that no one is going to use. Therefore, a minimum viable product (MVP) is your good friend.
But hereā€™s how MVP goes wrong
  • A landing page alone is not a MVP (insights from Bufferā€™s CEO)
  • Capturing email addresses on ā€˜Early Accessā€™ page is not user adoption
  • Building a *working* MVP that doesnā€™t solve the problemā€”risk failing to validate the startup idea (insights from Y Combinatorā€™s CEO)
So, what makes a MVP?
  • A product with just enough features to test your initial hypothesis
  • Allows you to gain traction (Beta users, pre-order, download or pay)
  • Helps users to solve problems and perform actions that are valuable to answering your hypothesis

2. Ideation stage šŸ’”

Letā€™s name this project ā€”Ā Greetingram. An online gift platform that allows you to create greeting card with your customized voice messages.
Users can upload voice recording, choose a background music & place order to get the physical greeting card delivered.
To begin, I list down parts I want to build
  • A one pager to explain how the concept works
  • Product copy that evokes feelings, experiences and values to the users
  • An online storage to receive uploaded voice recording from users
  • Display music options for users to choose from
  • Users can proceed to order and make payment
šŸ‘‰Visit the landing page MVPĀ here

3. My toolkit āš’ļø

Whether you can code or not, there are existing tools that can help you to build *working* prototype, MVP or product in hours ā€” not months.
These tools are inexpensive, fast and ā€œlow codeā€ that can put together a MVP that are usable and functional.
Hereā€™s what I used to buildĀ Greetingram:
A simple, fully responsive and customizable page builder. I use it to build the entire Greetingram landing page.
A spreadsheet + database creation tool. I use it to build the file attachment components and customer pre-order form.
I use Drive as online cloud storage to upload background music audio files.
Search high quality free stock photos for Greetingramā€™s homepage background.
šŸ‘‰Visit the landing page MVPĀ here

4. Set up Carrd ā›µ

Letā€™s build the landing page. Go toĀ CarrdĀ and sign up for a free account.
Then, choose ā€œstart from scratchā€Ā option on the top right ā€œdotted boxā€ icon. This allows you to customize your own design and layout.
Configure Page canvas
  • On a blank Carrd page (Right toolbar ā†’ select ā€œPageā€)
  • Style: Wide box
  • Position: Center
  • Width: 66
  • Background color: #FFFFFF
Add your Page elements
  • Right toolbar ā†’ select ā€œ+ā€ icon ā†’ dropdown element options
  • Container (I prefer to use container to structure each section)
  • Text (ā€œGreetingramā€ logo and homepage intro text)
  • Button (ā€œSend a card nowā€)
  • Customize design, color, size and layout on the left panel

5. Pitch and messaging šŸŽ€

Following Step 4 above, I design my Carrd page by adding different section, sub-section and page elements.Ā Pro Tip:Ā You can duplicate section and modify the contents to avoid repetitive process.
A great landing page design matters as much as your messaging. Most product pitch fails when company tells what their product is all about, rather than what their products can actually help the users to accomplish.
Hereā€™s my copywriting structure for the landing page:
How it works
Help users understand why your service is unique and who youā€™re serving to. Instead of writing everything in one paragraph, I also use column element to illustrate how Greetingram works in 4 steps. Keep it clean.
Segment your messaging
If you have more than one product benefit or value to communicate, break them down into different section. In this case, I focused on the benefits of voice greeting card and why it matters to people you love.
Final CTA
Include a final CTA near the bottom of your landing page. This can remind visitors and help them to activate the next step. You can play around with value-based CTA ā€” ā€œCreate my greeting cardā€ or action-based CTA such as ā€œGet startedā€.

6. Taking customer pre-order šŸ›’

One way to test whether users will adopt your idea is to ask them to pay. In this case, we can build a customer pre-order form usingĀ Airtable. The idea is to validate whether users are interested by placing pre-order.
Start by setting up the basic:
Add a base
  • Click on ā€œ+ā€ to add a base
  • Click ā€œStart from scratchā€
  • Name your base (ā€œPre-Order Formā€)
Convert into Form view
Airtable allows you to convert a spreadsheet view into a Form while maintaining the data linked between these views.
  • Click on the base you created
  • On the top bar, click on the first tab
  • Add a view, select ā€œFormā€
Fill up the pre-order form
This form should allow users to upload voice messages, select background music, provide shipping address, and proceed to place order. Hereā€™s what to include in the form:
  • Upload voice recording file
  • Preview audio files and select background music
  • Street address
  • Postal code
  • City / State
  • Full name
  • Gift receiver name
  • Email address (for invoice & payment)

7. Preview background music šŸŽµ

We want to allow customers to preview, listen and choose their favorite music to go with the personalized voice greeting card. In this step, we can use Google Drive:
Create a new folder on Drive
  • Upload music files .mp3
  • Enable sharing and copy the shareable link for next step
Link to Airtable order form
  • Copy & paste the shareable link
  • Configure your pre-order form with music select options
šŸ‘‰Visit the landing page MVPĀ here
[1] Find me onĀ Personal SiteĀ /Ā TwitterĀ /Ā LinkedInĀ šŸ”„
[2] In case you miss out, I can send my upcoming toolkit to your inbox ā€”Ā Click here to join my newsletterĀ šŸ’Œ
[3]Ā If youā€™re feeling generous & love my work, you canĀ buy me a coffeeĀ ā˜•



























Written by whizzoe | My Tools: whizzoe.com/#tools . Creator, writer & productivity lover. HackerNoon Award Winner in 2020 & 2021.
Published by HackerNoon on 2019/12/23