> From building to selling - EP.01

Welcome to the very first day of the Crossroad build log! 🎉

This series follows my journey of indie hacking a product from building to selling. I uploaded today’s Twitch stream to YouTube if you want to watch the replay.

Introducing; Crossroad! 👋

Since I started using more social media, I have seen many accounts use some "links in bio" page. Some link to their latest news, while most lead you to a horrendously ugly page with a couple of links to their latest merch, products, or other social media.

Now, I don't have the time (and ambition) to write the next Linktree. However, I do want to enter this space from another angle:

I am going to design and build a "links in bio" template that you own (one- time purchase), customize, and push to your hosting service.

I will write this in plain HTML, CSS, and as little JS as possible. If you want to build your page with data coming in from your blog or other API, you only have to worry about the data and not the UI.

Similar to TailwindUI, I want end-users to be able to mix and match blocks to build their perfect version of a link in bio page. Easy enough for people to copy and paste without deep coding knowledge and complete enough for seasoned developers to bring their data to populate the UI.

Thinking about how to sell this product. 💰

I plan to make two versions of this product, a lite and a pro version. I know, so innovative, I must be a genius.

The lite version will contain only a couple of blocks, enough to make a decent link in bio page. Maybe I’ll throw in one or two cool block designs to sweeten the deal.

The pro version will contain all the blocks, including the blocks that you are supposed to hook up to your API. However, less technical customers can always manually edit the HTML to still link to their latest content.

Payments 💳

I thought about going down the TailwindUI route, creating a back-end where people (after purchasing the product) can log in and copy-paste the code. However, that will add a lot of time and effort to the project. We'll see; it's not yet out of the question.

Most likely, I will build a landing page and add two buttons that will lead you to a Gumroad page to purchase one of the templates. I haven't used Gumroad before, so I am curious about the hype.

Creating a mood board. 🖼

Now let’s get to the work that I did today, design!

Each time I start working on a new design, I search the internet (especially Dribbble) to compose a mood board for the project. Exploring multiple styles also helps to get my brain into design mode.

For this, I love to use FigJam boards. The spatial interface, sticky notes, and easy drag and drop of images make it the perfect tool to compose a mood/inspiration board for any project. I also sometimes use it to brainstorm an idea since it also comes with the tools included for that kind of work.

Playing with the first couple of designs. 🎨

After setting up the mood board, I placed some shapes and fonts onto the artboard. This is the time I usually ask myself the following questions:

While I am still very much in the exploration phase, I am getting a feeling for the blocks system. I will divide blocks into their category and try to create 3 to 5 versions for each type.

I also started working with textures to spice up the backgrounds; I got reintroduced to using textures while checking out the fantastic DesignJoy website.

Also, check out this podcast with the founder of DesignJoy. Crazy insights, crazy entrepreneur.

Getting better at Figma. 🎓

One of the goals of this project is to level up my Figma skills. I spend so much time in Figma that it’s finally time to deepen my knowledge of the tool. There is still a disconnect between the designs that I have visualized in my mind and what I can achieve in Figma.

I especially want to get better with the layouts and with the components. Having fiddled with this for a couple of hours showed me how much there is to gain.

I will check out some articles and videos, so if you have any suggestions, let me know in the comments!

Let’s work on creating more blocks. 🔨

Now that we have styles to explore via the mood boards and have a better idea of what we need to design for the first version of the project, it’s time to work on creating more blocks and taking the design to the next level.

Let’s get to work. 💪

Thanks for reading this build log, and I hope to see you tomorrow!

If you want to stay updated in the meantime, give me a follow on Twitter.

With love,

Twankrui