How I built and manage Components UI [part 1]

When we decide to start a project we don't really know how to begin or what tools and services to use. This is the list of products, services and tools I used to build and now manage Components UI. I've added and removed some tools since the beginning of this journey so this list might look different in the future (For example: At the beginning of Components UI I just used Carrd, Gumroad and tips from the Landing Page Hot Tips Ebook).

Most of the tools I use are paid services. Even though there are free options available, I decide to pay for them because they save me time and offer great value for what I pay monthly. They allow me to run Components UI very lean, with automated processes and without much overhead. Sometimes "free" doesn't really mean free, it just means you are paying with "life", meaning you are paying with your time.

Some of the services and products include discounts for you when you sign up and some of them are affiliate links which means I get a commission when you sign up with no extra cost to you.

Carrd: Landing page builder

At the beginning of Components UI I used Carrd to design, build and publish my landing pages. You don't have to worry about hosting, uptime monitoring and all that stuff related to managing a private server.

The Carrd platform is very versatile so it can be used with other services: When the landing page was built, I added the Gumroad integration so I could take payments and fulfill digital products. After that I added analytics so I can monitor where my customers where coming from (referrals) and work on developing marketing channels. Finally I added Convertkit  to start with email marketing.

You don't have to do this but I recently started to host the landing pages for my projects on my own server using Digital Ocean. I still use Carrd to design and build the landing pages but when I finish I export the assets (HTML, CSS, etc) and host those assets on my own server.

Why I love about Carrd:

• Constrains: You have to get creative and build simple things with Carrd. "Simple" doesn't mean "easy" or "cheap", it means removing unnecessary clutter to accomplish your goal (in the case of Components UI: Getting customers)
• Advanced settings: You can add complex components and functionality to your Carrd projects with a little bit of code. This is how one of my projects (Build UI) started.
• Price: The price versus the value delivered is amazing. I'm on the Pro Plus plan (the most expensive one) and it starts at $49 USD per year.
• Multiple sites: You can have multiple sites for multiple projects in the same account. You can even use the platform if you run an agency or if you are a freelancer doing web design and hosting for your clients.

Components UI: Landing page builder

Once I have an idea for a new project I normally spec the MVP — minimum viable product — and start building the landing page for the project in Carrd. To kickstart this process I use Components UI and Build UI. They allow me to quickly design and build a new landing page without the hassle of starting with a blank canvas. Yes, they are my own products. Yes, I use them for most of my projects. And Yes, Build UI was built using the Components UI gallery.

I'm not going to get into too much details on why I love Components UI and Build UI since they are my products. You can read more about them and what others all saying about them here:

• Components UI: A collection of pre-built components and templates designed for Carrd.co
• Build UI: A compilation of step-by-step tutorials to help you build complex components by using Carrd elements and little pieces of code

Gumroad: Payment Gateway

I use Gumroad to sell my digital products: They work as a hosting provider (they host the digital files that are delivered to my customers), as a payment gateway (they accept and manage payments securely) and as a fulfillment provider (they send access to the digital files once a purchase is made).

You can also use Gumroad for your landing page but I prefer Carrd since it's more powerful and allows for more customization.

Why I love Gumroad

• They are the payment gateway so they handle all payment related issues securely
• Content delivery and fulfillment is done automatically by Gumroad for your digital products. Meaning: You just have to upload the files (PDF, videos, etc) that your customer is going to get and Gumroad hosts them and delivers them to your customers once they purchase
• Don't need to know how to code to set up your products
• You get analytics (sells and views) of your products
• Ability to set up affiliates: People that will promote your products and get a commission every time someone buys using their affiliate link. You can read more about affiliates on Components UI here.

You can use Gumroad for free but for Components UI I pay for their premium account that starts at USD $10 / month. With the Premium account you get a reduction on the fees Gumroad takes for each sale and you get unlimited posts and workflows for your customers.

Although workflows on Gumroad are a nice to have, I use Convertkit sequences and automations for my customers and subscribers.

Hover: Domain registrar

I use Hover to purchase and manage most of my domains. The service and their platform is easy to use, they provide great support and include things like WhoIs privacy protection for free (this is added for an extra cost on most domain providers). You can also purchase an email address for your domain (example: email@yourdomain.com) for as little as $5 USD a year.

If your want to use Hover for your next project click here and get $2 USD off your first purchase. This is an affiliate link so I get a commission with no extra cost to you if you decide to use the service.

Ghost: Content Management System

To write and publish the Components UI blog I used Ghost as my content management system (CMS). Ghost has a paid version that starts at $29 USD but I use the open source version that's free but you have to host it on your personal sever.

Ghost has become a very powerful tool that you can also use to have memberships, subscriptions and exclusive content.

Digital Ocean: Hosting

The Components UI blog is hosted on Digital Ocean. Their prices start at $5 USD and you get a “1-click install” to set up your blog with Ghost.

If you want to use Digital Ocean for you blog or some other project click here and get $100 in credit over 60 days. This is an affiliate link so I get a commission with no extra cost to you if you decide to sign up.

Fathom Analytics: Website analytics

Analytics help you track where your visitors are coming from, how much time they spend on your site, how they convert to paying customers, and more. There are plenty of free options you can use but they don’t respect your users privacy and some of them use nasty tricks to track them. A simpler solution is to use a privacy focused analytics tool like Fathom Analytics.

I personally use Fathom Analytics on my websites and it works beautifully. To set it on your website you just copy some code, embed it on your website and you are good to go.

Why I like Fathom Analytics:

• Fathom anonymizes all collected data, doesn’t use cookies, and isn’t sourced from terminal equipment. So no consent banner is required
• You can have multiple sites on your Fathom Analytics account
• The project is built by indie makers
• Amazing and simple design
• Get website monitoring for free (meaning: get alerts when your website is down)
• Set up custom domains for your analytics to avoid content blockers

One last thing I like about Fathom Analytics is that you can use it for clients if you are an agency or a freelancer with clients. Since you can have multiple sites on your account, you can choose to share one specific dashboard with specific people and offer it as a service.

If your want to give Fathom a try click here  and get $10 credit. This is an affiliate link so I get a commission with no extra cost to you if you decide to sign up.

Convertkit: Email Marketing

Email is one direct way to stay in touch with your customers or potential customers. I personally use Convertkit for my products since it’s beautifully designed and easy to use. You can set automations and sequences to convert leads into customers.

You can get really creative with Convertkit automations and sequences to create a funnel for you potential customers. As an example: I use it to deliver the “10 days of Carrd”  and “A week of better design” free guides automatically. They just have to subscribe to receive the guide and Convertkit handles the sending of the emails. After a subscriber is done with the guide, I set them up for another sequence to pitch one of my products if they haven't purchased already. Since I don't want to pitch someone that has already purchased the product I use Convertkit to assign tags and segments.

All of this is done automatically without me getting in the way or losing time managing each email. I just set the automation, include the sequence(s) inside the automations and set it live. It sounds complex at first but Convertkit is designed so well that you can visually see the steps in your automations.

Why I love Converkit:

• Great design and easy to use
• Powerful automations and sequences
• Amazing price for the value it provides to my projects
• You can connect it to Gumroad to set up automations like cross-sales (example: "You bought my product. Maybe you'll like to buy this other product" or the classic "Would you like fries with that?") or up-sells (example: Upgrade to a more expensive version of the product you just purchased)

If you want to give Convertkit a try click here and start with a free trial. You can also get a free account but without automations and sequences capabilities. This is an affiliate link so I get a commission with no extra cost to you if you decide to sign up.

Extra resources

Landing Page Hot Tips Ebook

Designing a website is hard. You don’t know where to start or you design something that doesn’t look good but you can’t quite figure out why. I know this is true because it has happened to me.

A huge resource that has helped me improve my designs comes from Rob Hope and his Landing Page Hot Tips Ebook. It features 100 digestible lessons to implement into your Landing Pages. Each tip features a few paragraphs, visual references and related resources. Additional features include: PDF Ebook (180-pages), Audiobook (54mins), Interactive launch checklists and more.

It’s safe to say that I go back to review the contents of this Ebook every time I start a new project online.

If you are interested in learning more about designing a great landing page or enhancing your website design super powers, you can grab the Ebook  with a discount by clicking → here . This is an affiliate link so I get a small commission with no extra cost to you if you decide to buy the Ebook.

Open Source Icons

These are some of the libraries of icons I often use. There are plenty of paid options available but I think these are enough for my needs:

• https://material.io/resources/icons/ : Open Source Icons. Here you can find basic icons made by Google
• Remix Icon - Open source icon library: Remix Icon is a set of open-source neutral-style system symbols elaborately crafted for designers and developers

Illustrations

These illustrations have become very popular lately. They are great to kickstart your project but if you use them without any customization, you risk looking a lot like every other website out there.

• https://undraw.co : Open source illustrations for any idea. Here you can find awesome illustrations for your projects and features
• https://www.openpeeps.com: Hand-Drawn Illustration Library. Here you can find illustrations to use for users, avatars, and more

Connecting the tools

Now that the tools are defined and set I want to explain briefly how I connect them with each other to design the systems and processes that power Components UI. This part turned out to be a blog post on its own so please click here if you want to read Part 2 of this post: Connecting the Tools: How I manage Components UI (part 2).