Let's Build It: Your First Prototype

Get market validation for your product as quickly as possible

Sep 29, 2022

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:

Join Discord

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:

Draw Me Something

Thank you for being a subscriber. Until next time - Guilherme

P.S. Mind rating today's post? Awesome | Liked | 50/50 | Meh | Terrible

One Person Business