Let's Build It: Your First Prototype
Get market validation for your product as quickly as possible
Hi, Guilherme here š
This is my first paid post on a series that Iām aiming to do. The goal for each is to do a step-by-step explanation of how to build something. If youād like to access the full content of this post, and future posts, make sure to subscribe to the paid version.
Also, I just created a Discord. This is a first for me, still trying to figure this thing out. But why donāt you join? You never know what might come out of it:
Now with the actual post š
So, you have an idea that you think might work, but youāre not really sure how to get started? In this post, Iāll give you a step-by-step explanation, with real examples, of how you can do so.
Prototyping is a very important part of your journey. Itās a way to quickly validate whether or not your idea has some sort of market fit. You want to do this before going all in on something.
The quicker you validate an idea, the quicker you can understand if youāre on the right track. The goal of a prototype is to show your potential customers what value youāre bringing to them. It doesnāt need to be perfect.
Most times it will be dirty, rough, and raw. But it gets the job done: validation.
The idea
For the purpose of this exercise, Iām going to build a simple idea I thought about: Draw Me Something.
Iām looking to create a service where customers can request a drawing of anything, pay for it, and then receive it in their inboxes after itās finished. Simple, right? Letās get cracking.
The plan
To achieve my goal, I need the following things:
Landing page: Itās a fully digital product, a webpage to host everything is mandatory;
Submission form: customers will be making custom requests, and I need to be able to receive them and also know who asked for what;
Payment: after making their requests, customers need to pay for it and only then will I send them the drawing;
Drawing: I donāt know how to draw. Also, my goal is to build something as automated as possible. So I need a way to automatically generated the drawings.
After choosing all of the above, I need to start building. That means:
Setting up the landing page, and explaining what Iām offering.
Having a call-to-action that triggers the users to submit a request through a form.
Afterwards, the user should be redirected to a payment page.
And, upon successful payment receive back a notification saying that the request has been received.
In the end, Iāll create the drawing and manually send it to them by email.
Fairly simple, no? Letās get cracking on how I will achieve this.
The prototype
You donāt need to be a programmer to build a prototype.
In this day and age, thereās so much offering regarding no-code tools that thereās simply no excuse for not being able to build a simple prototype.
Next, Iāll list all the products that Iām going to use (all of them are free to use, with limited but enough options), and even someone with no coding experience can set them up. Afterwards, Iāll show you step-by-step how to connect everything up.
1. The landing page
For this, Iāll be using Carrd. A āsimple, free, fully responsive one-page sites for pretty much anythingā, as they perfectly put it.
Create your account and go to your dashboard. There, click on āNew Siteā.
Then either choose a template or start with a blank page. I suggest using a template.
After that, youāll be redirected to the page editor. Here youāll be able to see your page in real-time, add or remove elements, text, images, etc.
For the purpose of this exercise, you want to focus on something simple. Go straight to the point, with a page title, maybe an image, and a clear description of what youāre offering to your potential customers.
For me, I chose something like this:
As you can see, I also added the CTA right at the top of the page. This CTA should lead the users to the actual submission form after clicking it.
In order to add a form, click on the ā+ā icon, on the top right corner of the editor and select āFormā:
After clicking, the form will be automatically added to the page. You can then move it around, to a place you find suited.
If you click the form, an action panel will appear on the left side of the screen. Make sure you select āContactā as the type for it. This way, users can submit a request with an email.
Under the option āOn Completionā, you want to select āRedirect to a URLā. More on that later.
For now, thatās the basics of the landing page functionality. But you might want to add some more things to it. You want this page to be as clear as possible on whatās your value proposition to the user. So feel free to add more elements to help with that. Maybe a step-by-step explanation, with images? Maybe even a video, or a block of text with more context? Up to you.
2. Payment
For this, Iāve chosen Stripe. Itās probably the most comprehensive payment solution out there, easy enough for anyone to use and without any upfront cost to you.
Create your Stripe account - this is a bit of a tedious process.
Then click on the āMoreā tab, and select āPayment Linksā on your Stripe dashboard. This will allow you to create a direct payment link to integrate into your landing (remember the āRedirect to URLā option? Thatās right).
Click on ā+ Newā. What youāll see on this new page, on the right side, is a preview of what your customers will see once they are redirected to the payment page. Make sure to edit the details the best way possible. You want something that looks trustable, so users actually pay you for your service.
Donāt forget to edit both the āPayment pageā and the āConfirmation pageā.
On the āConfirmation pageā tab youāll want to have the following configuration:
Basically, you want the users to be redirected back to your landing page after successful payment.
After youāre done, click āNextā and then āCreate linkā. Make sure to copy the link URL of your payment link to use in the next step.
Thatās it for Stripe!
3. Carrd + Stripe
Now that I have my payment link, I can go back to Carrd to finish the set-up. If I select the form that I created previously and go to the āOn Completionā field, I can paste the link from Stripe there.
Now, when the user submits a form, they will be redirected to the Stripe payment page. And, after they finish the payment, theyāll come back to the landing page!
As the last step, you need to publish your page. Click the āSaveā icon, and the āPublishā menu will pop up.
Fill in the āTitleā and āDescriptionā as you wish and under āActionā select āPublish to a .carrd.co URLā. Select the final URL name that you might want to use, and click āPublish Changesā. Your landing page is now live, and you can check it out!
4. Drawing
As I said before, I donāt know how to draw. So Iām going to use something to help me out: DALL-E. This is an AI system that can create realistic images and art from a description in natural language.
After I receive the requests from my customers and confirm that they have made the payment, Iāll go into the DALL-E page, and create an image based on the input of the customer. DALL-E will generate multiple images out of the same prompt, and I just need to choose the best one.
Then, all Iām left with is to send the image to the customer, and thatās that. Done!
Final thoughts
You can improve your landing page as you wish in order to make it as appealing as possible. But always remember that this is a prototype. The goal is not to be perfect, it is to be effective.
Make sure that you also test out what youāve built. You donāt want to be opening this to potential customers, and then have a non-functional webpage right?
By the way, in case you want to test Stripe without actually paying any money, you should use a āTest modeā link on the āRedirect to URLā field.
Go to the āPayments linksā page in Stripe, and enable test mode on the top right corner.
After doing this, a new payment link will be generated for you and you can use this one as much as you like for testing purposes. Just donāt forget to revert back to the actual link before going live!
Next steps
So now you have a landing page, and product, and a way to receive payments. What should you do? Well, show it to the world of course!
I wonāt go into details about that in this post, but just make sure that you reach your target audience and show them your product. After that, just wait and see what happens, gather feedback, and iterate if necessary.
And now, for the great reveal, here is the website I built:
Thank you for being a subscriber. Until next time - Guilherme
P.S. Mind rating today's post? Awesome | Liked | 50/50 | Meh | Terrible