Exactly one year ago I sent a tweet telling the world I was launching Components UI. I didn’t expect much since I didn’t have a large following and this was just a side project for me. Little did I know that this small side project will still be around a year later helping creators, freelancers and agencies with their businesses.

This is a brief timeline of everything that has happened this past year around Components UI, how the product grew and the milestones achieved:

• April 06, 2020: I sent a tweet announcing Components UI. As of this writing, the tweet generated 22,182 impressions on Twitter and it responsible for everything that happened to Components UI
• April 17, 2020: I posted a blog post on Medium titled "Using Carrd.co and Gumroad for side hustles and making extra income". It tells the origin story, how I got the product started, how I built it and launch it and how I was filled with fear and uncertainty at all times. You can read the post on the blog here.
• May 12, 2020: Added video tutorials on how to use the components. This was the first big update available and it was free for anybody that had already purchased it.
• May 18, 2020: Price increased. I was completely nervous about this and thought that no one was ever going to purchase any package ever again.
• Jun 08, 2020: Launched Templates UI. Now you can buy individual templates for Carrd.
• Jun 12, 2020: Price increased again. Still nervous about raising prices.
• Jun 27, 2020: I started a SEO strategy and began to offer free guides: "How to build Simple Pricing Tables in Carrd" and "10 days of Carrd: Tips, tutorials and exercises delivered daily to your email to improve your websites". There are more guides available right now that you can check out here.
• Jul 08, 2020: I started an affiliate program for Components UI. You can promote any or all of the products on http://componentsui.com or it’s subdomains in order to earn a commission using the Gumroad Affiliates program.
• Jul 28, 2020: Launched Components UI: Dark Mode. A complete rebuild of the Components UI gallery using dark mode colors and contrast.
• Jul 30, 2020: Started to double down on SEO strategy and launched a blog for Components UI → https://componentsui.com/blog
• Aug 06, 2020: Added new dynamic templates to Templates UI and wrote the story "Building and launching a new product in 24 hours"
• Sep 29, 2020: Launched Build UI: A compilation of video and written step-by-step tutorials to help you build beautiful components like complex toggles in pricing tables, responsive navbars, dynamic sections, and more just by using Carrd elements and little pieces of code. This was a new challenging project since it involved learning code.
• Oct 27, 2020: Added new components to Build UI (one of the most requested: A responsive navigation bar - Navbar)
• Nov 20, 2020: Launched Components UI in Spanish.
• Jan 07, 2021: Announced Guides UI: Guides to help you build, sell and grow your digital products online
• Jan 14, 2021: Launched The Journey: A series of blog posts that include the uncensored story and the process of building Components UI and its products
• Mar 01, 2021: Added new 7 new components to Build UI. This was the biggest update to date.
• Mar 05, 2021: Price increased again. After almost a year I'm still nervous about raising prices.

What a ride. I still plan to keep working on the products and keep developing new ones to help creators, freelancers and agencies to build, sell and grow their digital products online.

Onwards,

Oscar

Components UI started as a leftover.

At the end of 2019 I was working on a community around entrepreneurs in my country. I reached out to my network to find out people that were interested in joining this community. The main purpose was to share lessons learned and resources of building a business in our country in a specific way. I found a some interest on the idea so I decided to push forward.

Once that idea was kind of validated by interviewing people, I decided to start building a landing page to explain the value proposition of the community and to add a "pay now" button at the end.

By that time I didn't want to focus on designing or building a super polished landing page. I just wanted to build it fast and ship it fast. I've been reading about a platform called Carrd.co that basically allowed you to build a one-page site for pretty much anything. I was sold. I joined Carrd and started to build the landing page.

Carrd has some templates for a lot of purposes but I didn't find one that fit my needs so I decided to start with a blank canvas and build it myself. I kept it simple and just added a hero section, a "features section" with the benefits of the community, a pricing table and a "frequently asked question" section. After a couple of days of refining the details I published the site and shared it with the people I interviewed before.

Some people joined the community but after a couple of months I shut the project down.

After the community project, I started to dabble with some other projects and found out I could use the same components I already had from the community landing page. Instead of building the new project from scratch, I could use the leftovers from the community project landing page and just modify the design, colors and text.

I shipped another small project and I noticed I kept coming back to the same components I had already built in order to launch a new landing page. That's when I realized that maybe some people were having the same problem when launching multiple projects. It clicked. I started to compile the components in one single Carrd project that I could re-use for multiple projects.

These components were in fact "leftovers" from another project that I could repackage and sell. That's how Components UI came to life.

There are a ton of examples of businesses or projects that came to life from a "leftover". One of my  favorites: Ruby on Rails — a programming framework — was a leftover from one of the founders of Basecamp. He used the framework to build their product but then found value in the framework, repackaged it and distributed online.

This "leftover" mentality also applies to the physical world. If you are a designing furniture for a client you might find that at the end of the process you are left with a lot of iterations of that furniture piece. The final piece might look different from those iterations so you could use those iterations (read: leftovers) and turn them into something else: a new furniture piece, a digital course on the process of designing furniture or maybe even proof of work for other clients.

If you can't come up with an idea for a new project you should look into your leftovers from other projects. You'll find out ideas that you can repackage and resell as a whole new different product. Here's proof that selling your leftovers works:

I’m working on an update for Build UI and I'm planning to launch it on March 2nd, 2021. This is a preview of the new components that will be available in the next version:

• Images Effects: You can use this on any image. Here’s an example used with logos. You can also use it if you have logos for publications where your project was featured or past clients to add social proof to your landing page. Click to preview
• Sharing Widget: A fixed component on the bottom of the screen to include your social profiles. Click to preview
• Mobile navigation: A fixed navigation bar at the bottom of the screen to emulate a native mobile navigation bar with icons. Click to preview
• Dynamic FAQ: Dynamic frequently asked questions section that you can show and hide answers to remove clutter from the Landing page
• Table of Contents: Make a table of contents for your new course or Ebook website
• … and more

This new version of Build UI is going to be a free update for everyone that has already purchased it. I will raise the prices when launching this new version so if you are thinking about buying Build UI you can do it now, lock in the current price and get free updates in the future.  Buy Build UI now →

I'm currently working on new components for Build UI so I decided to do a redesign of the landing page to prepare for the launch. This is the evolution of the design from launching the product on September 2020 to how it stands today.

Build UI is a compilation of step-by-step tutorials, videos and code snippets to guide you on how to make pricing tables, badges, dynamic sections, and more into your new or existing Carrd projects. Click here to learn more → https://componentsui.com/build/

Launch design

For the original launch of Build UI I decided to start with a clean list of the components available. I added some icons to make it visually appealing. No buttons. Just links with the word "preview" to check out how each component looks like.

Things I don't like about this design:

• I added bullets but then added numbers to each bullet. I should have kept either the bullet or the number
• I added the "preview" link to each component to let the visitor know that they could see a preview but it added clutter to the design. It feels like the word "preview" is everywhere and it looses meaning
• The contrast between the bullet and the background is terrible. It fails the Web Content Accessibility Guidelines color contrast ratios

First redesign

I did the first redesign on Nov, 2020. I removed the icons to clean up the design and grouped the components into boxes. I think the boxes help see where each category begins and ends. That was not the case from the previous design where it's hard to separate the categories. I added buttons for the preview instead of just a simple link.

Things I don't like about this design:

• For some reason I kept the bullets but then added numbers to each bullet. Looking back I see I was trying to show how many components each category had. Should had kept just the numbers
• There are a crap ton of buttons on the page. The design feels crowded and the button looses its meaning
• The contrast between the bullet and the background still fails

Current design

For the current design — Feb 2021 — I decided to make the modules in one single column instead of two columns. I removed the boxes but used huge numbers to easily group the categories and show where each one begins and ends. I removed the bullets (finally) and just kept the numbers for each component.

I Removed the "preview" buttons for each component and added one single banner at the top to let the visitor know that they can click each component to get a preview. Added buttons for certain components to show how they look "live" in an actual project so they can get the feel of how the component actually works.

In my mind this design looks cleaner and serves the visitor instead of the page itself. It helps show what the product is about in a simple manner without clutter. Here's how the evolution of the design looks like:

One key lesson of this process is that you won't get it right the first time. You should iterate on the process and learn from your mistakes. Keep shipping updates and working on your product as you learn. I think it's true that you should be ashamed of your first iteration, otherwise you launched it too late.

Like it? Don't like? Thoughts about it? Let me know what you think on Twitter @oscaroarevalo or send me an email to oscar@oscaroarevalo.com.

Some people want to try before they buy. I'm know this is true because I'm one of those people. Maybe you wanted to try the Premium Components UI package because you don't know me and you were suspicious about buying something from someone on the internet. You bought it, got great value from it and now want to upgrade to a more expensive package — like the Professional Components UI package — to get the full added value from the tutorial videos and templates. So, the question is: "I bought a package from Components UI and now I want to upgrade to a more expensive package. Can I do that?". Short answer: Yes you can upgrade and here's how you do it.

You can upgrade packages available from Components UI and you can also upgrade packages available from Build UI.

As of this writing, there are three packages available for Components UI: Premium package, Complete package and Professional package. Let's say you bought the Premium package and now you want to buy the Complete package to get access to the Ebook template and Agency template. Instead of purchasing the Complete package again — and since you already have the Components UI gallery — you can just upgrade the package.

To upgrade to a more expensive package from the one you already bought, just send me an email to oscar@oscaroarevalo.com with your receipt and tell me to what package you want to upgrade. I'll send you a discount code with the amount you already paid (excluding any taxes) so you can apply that discount to the purchase of the more expensive package.

Here's an example of how it will work:

1. You bought the Components UI Premium package for - as of this writing - USD 59
2. You got great value from it and now want to upgrade to the Components UI Complete package so you can get access to the templates and video tutorials
3. You send me an email with your receipt and tell me you want to upgrade from the Premium to the Complete package
4. I'll create a discount code for USD 59 (the amount you paid) and send you the discount code via email
5. You'll buy the Components UI Complete Package and add the discount code at checkout. As of this writing the Complete package is USD 79 so, after you apply the discount code at checkout, you'll pay USD 20 (USD79 minus USD 59) for the package
6. I'll give you access to the assets of the new package you just purchased

In summary, upgrades for Components UI:

• You can upgrade from the Premium Package to the Complete Package
• You can upgrade from the Premium Package to the Professional Package
• You can upgrade from the Complete Package to the Professional Package

Why would you want to upgrade? A few reasons:

1. You want to get the templates from the other packages (they are included as a bundle in the Complete and Professional package. They are cheaper in the bundle than if you purchase them individually)
2. You are starting a new side-hustle and want access to one of the templates included in the Professional package so you can ship your new project as soon as possible
3. You work as a freelancer and are getting more clients so want to have a bigger offering that includes templates. You can read how to use Components UI as a freelancer here
4. You have a design agency working with clients and want to expand the offering of templates you already have so you can get more clients and do less of the work. You can read how to use Components UI as an agency here

The option to upgrade also applies to the Build UI packages. In summary, upgrades for Build UI:

• You can upgrade from the Premium Package to the Complete Package
• You can upgrade from the Code Snippets Package to the Complete Package

One last thing to remember: If you purchase any package and found out you don’t like the material or you can’t find the value in it, just reply with your purchase receipt email within 30 days and I will issue a refund. No questions asked. I want you to be happy with your purchase.

If you have any questions about any of the packages or about the product, just email me at oscar@oscaroarevalo.com. I try to answer every message and email I get.

What happens when you purchase Components UI? How do you receive the project in Carrd? This post answers these and more questions you might have about the purchasing of Components UI.

Depending on the package, when you purchase Components UI you'll receive a copy of the complete gallery and templates in your Carrd account. The sending and receiving of projects in Carrd is a manual process — at the least from the time of this writing.

The process when you purchase any package from Components UI looks like this:

1. You purchase the Components UI gallery and/or templates from componentsui.com. You'll get a confirmation email that includes your receipt
2. I'll receive an email confirming your purchase
3. I'll log into my Carrd account and manually transfer you the complete Components UI gallery and/or templates from my account to yours. To do the transfer(s) I'll use the email adress you used for the purchase during checkout (*)
4. You'll receive a confirmation email that I've sent you the transfer(s) in Carrd
5. You'll have to log into your Carrd account and manually accept the transfer(s) under the “Manage your Carrd account” section: Under Overview and then at the bottom of the page under Activity
6. Depending on the package you'll have instant access to the Ebook and tutorial videos from your Gumroad library. You don't have to have a Gumroad account to do this. Just go to the email with your purchase receipt and there you'll see a View Contents button to check these assets

Some things to keep in mind:

• This process is done manually – at least for now – so please be a little patient. Depending on the time of the purchase I might be sleeping so I'll send you the transfer(s) as soon as possible (My timezone is GMT -6:00 Central America)
• (*) Don't worry if you used one email address to make the purchase but have a different email associated with your Carrd account. Just email me the correct one at oscar@oscaroarevalo.com and I'll send you the transfer(s) there
• As you can see on the Components UI website, you need a Carrd Pro Plus account to use it. I won't be able to send you the transfer(s) if you are not and I'll get a message saying that you need a higher plan to receive them

Once you accept the transfer(s) on you Carrd account you'll have complete access to the Components UI gallery and/or templates. They are yours forever and they become a project on you Carrd dashboard called "My sites". You can  read the license here to learn what you CAN and CANNOT do with the Components UI gallery and/or templates.

If you have any doubts or questions about this process or about the product, just email me at oscar@oscaroarevalo.com or send me a message using the blue chat widget on the website. I answer every message and email I get.

Thanks for supporting my work!

I started Components UI on March 2020. It started as I little side project that has grown and now has a family of products available. This is a review of what happened in January 2021. I won't probably do a review every month but I'll try to include one when there's a milestone or updates to the product.

The Slow burn continues

For privacy reasons I don't share specific financials results about my projects but I want to share some of the trends and general results from the project.

Like I said in the post The current state of Components UI: 2021 edition, Components has been a slow burn and it continues to be. I didn't get a bunch of sales and visitors when I launched. Instead, it has been growing consistently and organically every month. It's not a rocket ship and I'm fine with it.  I'll keep focusing on SEO and content marketing to improve search results and keep a steady growth over time.

Here's the trend of sales up to January 2021:

Product and Pricing

I started to notice that most of my customers are freelancers and agencies. They are looking to improve their offerings and reduce the time they spend working on a clients web project. I wrote a couple of post showing how you can use Components UI as a web freelancer and how you can use Components UI as an agency working with clients and they got a bit of traction.

With that in mind I changed the packages and the wording of the offer to focus on them. Since Components UI is also aimed at people working on a landing page for a project or side-hustle (the way I started Components UI myself), I kept a package for them as well. As of this writing, this is how the packages are set:

• Professional Package: The professional option if you run an agency or do freelance with clients. It includes the Components UI gallery, templates, documentation, tutorial videos and priority support
• Complete Package: The complete option with prime templates ready. It includes the Components UI gallery and a couple of templates
• Premium package: The budget option to kickstart your new projects. It includes the Components UI gallery and documentation. This package is aimed towards people building a side-hustle or new projects. It is what I'd purchase if I was starting the landing page for Components UI again

Content and Email Marketing

I've been writing consistently on the Components UI blog for a couple of months to improve SEO. Traffic from Google has been growing since the launch on March 2020 which means that the content marketing and SEO strategy is beginning to show results.

I've also changed the frequency that I do email marketing. At the beginning I used to send emails every month or every couple of weeks and I just focus on updates and new products. Since January I started to send emails every Tuesday to include product updates but also posts including tutorials, guides and lessons learned to provide additional value to my customers and potential customers.

I started a blog post series called The Journey: a series of blog posts that include the uncensored story and the process of building Components UI and its products. I write about lessons learned, experiences, challenges and the process of building in public. I'm writing about things I wish I knew when I was starting Components UI or things I'm learning as I build Components UI that can benefit other people. You can learn more about The Journey here.

Multiple Languages: Spanish

I'm a native Spanish speaker so I want to help and provide value to people in Spanish-speaking countries as well. I started Components UI as a digital product in English but recently launched a new version built from the ground up in Spanish. You can read the complete process on how I did it here: How to build a digital product in multiple languages.

I wanted to do a Spanish version of the product to provide additional value but — in turn — it will also generate a new market for the family of products, increasing even more the value of the asset.

As of this writing the Components UI gallery is now available in Spanish and there's a section on the blog dedicated to posts in Spanish.

Onwards.

Ahora que las herramientas, los productos y los servicios están definidos y configurados, quiero explicar brevemente cómo los conecto entre sí para diseñar los sistemas y procesos que impulsan Components UI.

En la parte superior del embudo, la gente encuentra Components UI a través de las redes sociales o la búsqueda de Google. Esto se logra mejorando el ranking SEO con marketing de contenido usando Ghost para administrar y publicar el blog. Después de interactuar con el contenido de la página de destino (diseñada y creada con Carrd), es posible que encuentren una guía gratuita disponible y se registren para recibirla por correo electrónico mediante el formulario de registro de Convertkit (por ejemplo, se registran para recibir "10 days of Carrd").

Una vez que se registran se les lleva a una automatización en Convertkit donde recibirán la guía para la que se registraron. Este puede ser un correo electrónico único o una secuencia de correos electrónicos como en "10 days of Carrd". Después de recibir las guías, los usuarios entran en otra automatización donde hago una presentación "suave" de uno de mis productos: les digo de qué se trata el producto y los beneficios del producto. Si deciden comprar, la automatización se detiene y se les etiqueta como "cliente" en Convertkit mediante la integración de Gumroad. Esto se hace automáticamente para asegurarme de que no sigo lanzando un producto a personas que ya lo compraron.

Una vez que las personas compraron un producto, se las lleva a otra automatización en Convertkit donde, durante un período de tiempo, reciben correos electrónicos haciendo un seguimiento de la compra y pidiéndoles comentarios. Al final de esta automatización hago otro lanzamiento "suave" (cross-sell o venta cruzada) de otro de mis productos ya que las personas que ya compraron tu producto — y están satisfechas con él —  están más inclinadas a comprarte nuevamente. Dependiendo del producto, podría ofrecer un descuento ya que quiero agradecer a las personas que apoyan mi trabajo.

A través de todo este embudo hago un seguimiento de dónde vienen las personas (referencias) en Fathom Analytics para ver qué fuego debería alimentar con más gasolina (es decir, hacer más de lo que ya funciona) y también rastrear qué partes de contenido son más populares para tal vez expandir sobre esos conceptos o hacer más publicaciones en el blog sobre ese tema. Esta publicación a su vez alimenta la máquina de SEO y ayuda a atraer a más personas al sitio donde el embudo comienza nuevamente.

Esta es solo una parte del sistema que utilizo para unir todos estos servicios. El sistema está mayormente automatizado y me ayuda a crear una especie de máquina de ventas perpetua sin perder mucho tiempo y desconectar la entrada de la salida. En otras palabras, puedo obtener muchos resultados (ventas, visitantes, etc.) con menos aportes (tiempo dedicado a promocionar y desarrollar Components UI).

Esta es la parte 2 de una serie llamada "Cómo construí y administro Components UI". Si deseas leer la parte 1 donde describo en profundidad los productos y servicios que utilicé para construir y ahora administrar Components UI, haz clic aquí.

Cuando decidimos iniciar un proyecto realmente no sabemos cómo comenzar o qué herramientas y servicios utilizar. Esta es la lista de productos, servicios y herramientas que usé para construir y ahora administrar Components UI. He agregado y eliminado algunas herramientas desde el comienzo de este viaje por lo que la lista podría verse diferente en el futuro (por ejemplo: al comienzo de Components UI, comencé usando Carrd, Gumroad y consejos del libro electrónico Landing Page Hot Tips Ebook.

La mayoría de las herramientas que utilizo son servicios pagados. Aunque hay opciones gratuitas disponibles, decido pagarlas porque me ahorran tiempo y ofrecen un gran valor por lo que pago mensualmente. Me permiten administrar Components UI de manera muy simple, con procesos automatizados y sin demasiados gastos generales. A veces, "gratis" no significa realmente gratis, solo significa que estás pagando con "vida", lo que quiere decir que estás pagando con tu tiempo.

Algunos de los servicios y productos incluyen descuentos cuando te registras y algunos de ellos son enlaces de afiliados, lo que significa que obtengo una comisión cuando te registras y sin costo adicional para ti.

Carrd: Creador de páginas de destino

Al comienzo de Components UI usé Carrd para diseñar, construir y publicar mis páginas de destino. No tienes que preocuparte por el hosting, el monitoreo del sitio y todo lo relacionado con la administración de un servidor privado.

La plataforma Carrd es muy versátil por lo que se puede utilizar con otros servicios: cuando se creó la página de destino, agregué la integración Gumroad para poder aceptar pagos y entregar los productos digitales. Después de eso, agregué Fathom Analytics para poder monitorear de dónde vienen mis clientes (referencias) y trabajar en el desarrollo de canales de marketing. Finalmente agregué Convertkit para comenzar con el marketing por correo electrónico.

No tienes que hacer esto pero recientemente comencé a alojar las páginas de destino para mis proyectos en mi propio servidor usando Digital Ocean. Todavía uso Carrd para diseñar y construir las páginas de destino pero cuando termino de construir, exporto los activos (HTML, CSS, etc.) y los alojo en mi propio servidor.

Por qué me encanta Carrd:

• Restricciones: tienes que ser creativo y construir cosas simples con Carrd. "Simple" no significa "fácil" o "barato", significa eliminar el desorden innecesario para lograr tu objetivo (en el caso de Components UI: conseguir clientes)
• Configuración avanzada: puedes agregar componentes complejos y funcionalidad a tus proyectos de Carrd con un poco de código. Así es como comenzó uno de mis proyectos (Build UI).
• Precio: El precio frente al valor entregado es asombroso. Estoy en el plan Pro Plus (el más caro) y comienza en $ 49 USD por año.
• Varios sitios: puedes tener varios sitios para varios proyectos en la misma cuenta. Incluso puedes utilizar la plataforma si tienes una agencia o si eres un profesional independiente que realiza diseño web y alojamiento para sus clientes.

Components UI: creador de páginas de destino

Una vez que tengo una idea para un nuevo proyecto, normalmente especifico el MVP (producto mínimo viable) y comienzo a construir la página de destino del proyecto en Carrd. Para iniciar este proceso utilizo Components UI y Build UI. Estas dos herramientas me permiten diseñar y construir rápidamente una nueva página de destino sin la molestia de comenzar con un lienzo en blanco. Sí, son mis propios productos. Sí, los uso para la mayoría de mis proyectos. Y sí, Build UI se creó utilizando la galería de Componentes UI.

No voy a entrar en demasiados detalles sobre por qué me encanta Components UI y Build UI, ya que son mis productos. Puedes leer más sobre ellos y lo que otros dicen sobre ellos aquí:

• Components UI: Una colección de componentes y plantillas prediseñados diseñados para Carrd.co
• Build UI: una compilación de tutoriales paso a paso para ayudarlo a construir componentes complejos utilizando elementos de Carrd y pequeños fragmentos de código

Gumroad: Pasarela de pago

Utilizo Gumroad para vender mis productos digitales: funcionan como proveedor de hosting (alojan los archivos digitales que se entregan a mis clientes), como pasarela de pago (aceptan y gestionan pagos de forma segura) y como proveedor de entrega (envían acceso a los archivos digitales una vez realizada la compra).

También puedes usar Gumroad para tu página de destino pero prefiero Carrd porque es más poderoso y permite una mayor personalización.

Por qué amo Gumroad:

• Son la pasarela de pago por lo que manejan todos los temas relacionados con el pago de forma segura
• Gumroad realiza automáticamente la entrega de contenido para tus productos digitales. Esto significa: solo tienes que cargar los archivos (PDF, videos, etc.) que tu cliente va a recibir y Gumroad los aloja y los entrega a sus clientes una vez que los compran
• No necesitas saber cómo codificar para configurar tus productos
• Obtienes análisis (ventas y vistas) de tus productos
• Posibilidad de configurar afiliados: personas que promocionarán tus productos y obtendrán una comisión cada vez que alguien compre utilizando su enlace de afiliado. Puedes leer más sobre afiliados en Components UI aquí.

Puedes usar Gumroad de forma gratuita pero para Components UI pago su cuenta premium que comienza en USD $ 10 / mes. Con la cuenta Premium obtienes una reducción en las tarifas que Gumroad cobra por cada venta y obtienes publicaciones y flujos de trabajo ilimitados para tus clientes.

Aunque es bueno tener flujos de trabajo en Gumroad, yo utilizo secuencias y automatizaciones Convertkit para mis clientes y suscriptores. Lea más sobre cómo uso Convertkit aquí.

Hover: Registro de dominio

Utilizo Hover para comprar y administrar la mayoría de mis dominios. El servicio y su plataforma son fáciles de usar, brindan un gran soporte e incluyen cosas como Protección de privacidad WhoIs de forma gratuita (esto se agrega por un costo adicional en la mayoría de los proveedores de dominio). También puedes comprar una dirección de correo electrónico para tu dominio (ejemplo: email@tudominio.com) desde $ 5 USD al año.

Si deseas utilizar Hover para tu próximo proyecto haz clic aquí y obtendrás $ 2 USD de descuento en tu primera compra. Este es un enlace de afiliado así que obtengo una comisión sin costo adicional para ti si decides utilizar el servicio.

Ghost: Gestión de contenido

Para escribir y publicar el blog de Components UI utilicé Ghost como mi sistema de gestión de contenido (CMS). Ghost tiene una versión pagada que comienza desde $ 29 USD pero yo uso la versión de código abierto que es gratuita pero que tienes que alojar en tu servidor personal (más sobre eso aquí).

Ghost se ha convertido en una herramienta muy poderosa que también puedes usar para tener membresías, suscripciones y contenido exclusivo.

Digital Ocean: Hosting

El blog de Components UI está alojado en Digital Ocean. Sus precios comienzan en $ 5 USD y obtienes una "instalación con 1 clic" para configurar tu blog con Ghost.

Si deseas utilizar Digital Ocean para su blog o algún otro proyecto haz clic aquí y obtendrás $ 100 en crédito durante 60 días. Este es un enlace de afiliado así que obtengo una comisión sin costo adicional para usted si decide registrarse.

Fathom Analytics: Analíticos

Los analíticos te ayudan a rastrear de dónde provienen tus visitantes, cuánto tiempo pasan en tu sitio, cómo se convierten en clientes y más. Hay muchas opciones gratuitas que puedes usar pero no respetan la privacidad de tus usuarios y algunos de ellos usan trucos desagradables para rastrearlos. Una solución más sencilla es utilizar una herramienta de analíticos centrada en la privacidad como Fathom Analytics.

Yo personalmente uso Fathom Analytics en mis sitios web y funciona a la perfección. Para configurarlo en tu sitio web  simplemente copia un código, agrégalo en tu sitio web y listo. Esto es incluso más fácil si lo utilizas de la mano con Carrd.

Por qué me gusta Fathom Analytics:

• No es necesario que agregues uno de esos molestos banners de cookies en su sitio
• Puedes tener múltiples sitios en tu cuenta de Fathom Analytics
• El proyecto está construido por creadores independientes
• Diseño simple y sorprendente
• Obtendrás monitoreo del sitio web de forma gratuita (es decir, recibes alertas cuando tu sitio web esté inactivo)
• Configura dominios personalizados para tus analíticos para evitar bloqueadores de contenido

Una última cosa que me gusta de Fathom Analytics es que puedes usarlo para clientes si eres una agencia o un freelancer con clientes. Dado que puedes tener varios sitios en su cuenta, puedes optar por compartir un panel específico con personas específicas y ofrecerlo como un servicio.

Si quieres probar Fathom haz clic aquí y obtén un crédito de $ 10 USD. Este es un enlace de afiliado así que obtengo una comisión sin costo adicional para usted si decide registrarse.

Convertkit: Marketing con email

El correo electrónico es una forma directa de mantenerse en contacto con tus clientes o clientes potenciales. Personalmente uso Convertkit para mis productos ya que tiene un hermoso diseño y es fácil de usar. Puedes configurar automatizaciones y secuencias para convertir clientes potenciales en clientes.

Puedes ser realmente creativo con las automatizaciones y secuencias de Convertkit para crear un embudo para tus clientes potenciales. Como ejemplo: yo lo uso para entregar las guías gratuitas “10 días de Carrd” y “Una semana de mejor diseño” automáticamente. Solo tienes que suscribirte para recibir la guía y Convertkit se encarga del envío de los correos electrónicos. Una vez que un suscriptor termina con la guía, lo configuro para que inicie otra secuencia y presentar uno de mis productos si aún no lo ha comprado. Como no quiero presentarle a alguien que ya haya comprado el producto uso Convertkit para asignar etiquetas y segmentos.

Todo esto se hace automáticamente sin que yo estorbe o pierda tiempo administrando cada correo electrónico. Solo configuro la automatización, incluyo la (s) secuencia (s) dentro de las automatizaciones y las activo. Suena complejo al principio pero Convertkit está tan bien diseñado que puedes ver visualmente los pasos en tus automatizaciones.

Por qué amo Converkit:

• Gran diseño y fácil de usar
• Potentes automatizaciones y secuencias
• Increíble precio por el valor que aporta a mis proyectos
• Puedes conectarlo a Gumroad para configurar automatizaciones como ventas cruzadas (por ejemplo: "Compraste mi producto. Tal vez quieras comprar este otro producto" o el clásico "¿Quieres papas fritas con eso?") O upsell (ejemplo: actualice a una versión más cara del producto que acaba de comprar)

Si deseas probar Convertkit hazclic aquí y comienza con una prueba gratuita. También puedes obtener una cuenta gratuita pero sin automatizaciones ni capacidades de secuencias. Este es un enlace de afiliado así que obtengo una comisión sin costo adicional para ti si decides registrarte.

Recursos adicionales

Landing Page Hot Tips Ebook

Diseñar un sitio web es difícil. No sabes por dónde empezar o diseñas algo que no se ve bien pero no puedes entender por qué. Sé que esto es cierto porque me ha pasado.

Un gran recurso que me ha ayudado a mejorar mis diseños proviene de Rob Hope y su Landing Page Hot Tips Ebook. El Ebook cuenta con 100 pequeñas lecciones para implementar en tus páginas de destino. Cada consejo incluye algunos párrafos, referencias visuales y recursos relacionados. Las características adicionales incluyen: Ebook en PDF  (180 páginas), Audiolibro (54 minutos), listas de verificación de lanzamiento interactivas y más.

Es seguro decir que vuelvo a revisar el contenido de este libro electrónico cada vez que comienzo un nuevo proyecto en línea.

Si estás interesado en aprender más sobre cómo diseñar una gran página de destino o mejorar los superpoderes de diseño de su sitio web, puedes obtener el libro electrónico con un descuento haciendo clic → aquí. Este es un enlace de afiliado así que obtengo una pequeña comisión sin costo adicional para ti si decides comprar el libro electrónico.

Iconos de código abierto

Estas son algunas de las bibliotecas de iconos que utilizo con frecuencia. Hay muchas opciones pagadas disponibles pero creo que estas son suficientes para mis necesidades:

• https://material.io/resources/icons/: Iconos de código abierto. Aquí puedes encontrar íconos básicos hechos por Google
• Remix Icon - Biblioteca de iconos de código abierto: Remix Icon es un conjunto de iconos de código abierto de estilo neutro elaborados para diseñadores y desarrolladores

Ilustraciones

Estas ilustraciones se han vuelto muy populares últimamente. Son geniales para poner en marcha tu proyecto pero si los usas sin ninguna personalización, corres el riesgo de parecer mucho a cualquier otro sitio web.

• https://undraw.co: ilustraciones de código abierto para cualquier idea. Aquí puedes encontrar impresionantes ilustraciones para tus proyectos
• https://www.openpeeps.com: Biblioteca de ilustraciones dibujadas a mano. Aquí puedes encontrar ilustraciones para usar con usuarios, avatares y más

Conectando las herramientas

Ahora que las herramientas están definidas y configuradas, quiero explicar brevemente cómo las conecto entre sí para diseñar los sistemas y procesos que impulsan Components UI. Esta parte resultó ser una publicación de blog en sí misma así que haz clic aquí si deseas leer la Parte 2 de esta publicación: Conexión de las herramientas: cómo administro Components UI (parte 2).

Comencé Components UI en marzo de 2020. Comenzó como un pequeño proyecto paralelo que ha crecido y ahora tiene disponible una familia de productos. Aprendí muchas lecciones durante la construcción y el crecimiento de Components UI, así que quiero compartir lo que planeo para el futuro del proyecto en base a esas lecciones.

No construyas sobre la plataforma de otra persona

Components UI comenzó como una "extensión" de la plataforma de Carrd.co. Ayudó a las personas a poner en marcha sus nuevos proyectos al proporcionar plantillas y componentes prediseñados.

El problema con este enfoque es que el producto está construido en la plataforma de otra persona y tienes poco o ningún control sobre el futuro de la plataforma: la plataforma puede cerrarse (piensa en MySpace), nuevos competidores podrían entrar en juego con mejores precios y características que hacen que la plataforma sea obsoleta (piensa en Webflow) o incluso que el mercado se inunde con otros productos similares (piensa en los diseñadores de Wordpress).

"Si no puedes abandonar la plataforma, no es realmente tu negocio" - Ghost.org

Cuando creamos proyectos llegamos a creer que tenemos que ser los mejores en un conjunto de habilidades en particular: ser la persona de Facebook, ser la persona de SEO y, en este caso, ser la persona de Carrd. Creo que deberíamos centrarnos en desarrollar activos en lugar de aprender un conjunto de habilidades específicas que podrían no tener valor en el futuro.

A medida llega el futuro, no quiero ser un experto en Carrd ni quiero desarrollar un curso / proyecto para convertirme en un experto en Carrd. Creo que la mayoría de las habilidades más allá de el proyecto de Build UI son solo conocimientos marginales que no mejoran significativamente la calidad del producto final (ejemplo: La regla 80/20).

No me malinterpretes. Amo Carrd y continuaré usándolo para mis productos tanto como pueda durante el tiempo que tenga sentido. Lo que quiero ahora es que Components UI y Build UI sean el primer bloque en la construcción de algo mucho más grande que pueda potenciar a las personas para crear y vender productos digitales en línea. Quiero unir activos para construir algo más valioso incluso si Carrd o cualquier otro servicio deja de existir.

Construcción de activos

Soy ingeniero industrial de profesión por lo que estoy obsesionado con la construcción de procesos y sistemas. Al construir la Components UI, diseñé diferentes sistemas que me permiten ejecutarlo de manera simple, con procesos automatizados y sin muchos gastos generales para poder concentrarme en otras cosas como desarrollar un mejor producto, marketing y crecimiento. Los sistemas y el proceso diseñados me permitieron desconectar la entrada de la salida, lo que significa que puedo trabajar menos pero ganar más con ese trabajo.

Una vez que Components UI ganó un poco de popularidad, comencé a notar algunos imitadores que creo que son muy comunes en los productos en general. Aunque las personas pueden simplemente copiar o clonar tus productos o servicios, no pueden copiar los sistemas y activos que has creado. No pueden copiar como ejecutas y operas tus proyectos, por lo que siempre puedes estar por delante. Copiar o clonar un producto puede resultar sencillo pero copiar un sistema requiere mucho tiempo y experiencia.

Nuevo: Guides UI

Avanzando hacia el futuro, quiero desarrollar una familia de productos que se complementen entre sí. Quiero que cada producto se mantenga por sí solo pero también sirva para construir un activo. Guides UI es el siguiente paso en el proceso de desarrollo de ese activo.

Guides UI será mi próximo proyecto y será una compilación de productos que pueden ayudarte a construir y vender productos digitales en línea. Se enfocará en sistemas en lugar de plataformas para que pueda evolucionar con tus proyectos incluso si la plataforma ya no existe. Algunas de las guías que planeo lanzar (tentativamente):

• Creación y venta de productos digitales en línea (trabajo en proceso)
• Marketing para no-coders
• Más allá del crecimiento del producto
• ... y más por venir

Quiero seguir creando activos en lugar de solo variaciones del mismo producto (es decir, crear otra plantilla en Carrd con un color diferente). Esta "mentalidad de activos" funcionará de la siguiente manera: si quieres construir y vender productos digitales, quiero que pienses en la guía "Construir y vender productos digitales en línea". Una vez que aprendas sobre los sistemas en esa guía y quieras comenzar a construir tu proyecto, quiero que pienses en "Build UI o Components UI" para crear tu página web.

Más adelante, cuando tengas tu proyecto en funcionamiento y quieras escalarlo, quiero que pienses en la guía "Marketing para no-coders". En mi mente, todo esto funcionará como un ecosistema que aporta valor a las personas que quieren construir y desarrollar un proyecto en línea y que se encuentran en diferentes etapas del proceso.

Sirviendo nuevos mercados

Soy un hablante nativo de español así que quiero ayudar y brindar valor a las personas en los países de habla hispana también. El producto secundario de hacer eso es que generará un nuevo mercado para la familia de productos, aumentando aún más el valor del activo. En este momento, solo la galería de Components UI está disponible en español (la página de inicio, el libro electrónico en PDF y los videos se desarrollaron desde cero en español). Planeo ofrecer Build UI y Guides UI en español para que las personas que no hablan inglés puedan tener las mismas oportunidades y recursos para crear y vender productos digitales en línea.

Finalmente, planeo construir esto en público y compartir el proceso en "The Journey", una sección de este blog con "Lecciones aprendidas, experiencias, desafíos y proceso de construcción de Components UI y sus productos". Compartiré también la mayoría de estas actualizaciones y publicaciones en la sección de "Español" en este blog.

Hacia adelante.

El español es mi lengua materna así que quiero ayudar y brindar valor a las personas en los países de habla hispana también. Comencé Components UI como un producto digital en inglés pero recientemente lancé una nueva versión reconstruida desde cero en español. Este es mi razonamiento detrás de hacerlo y cómo lo hice.

Construyendo un producto digital en inglés

La primera versión de Components UI se creó en inglés básicamente gracias a Carrd. Components UI está construida sobre la plataforma Carrd.co que solo está disponible en inglés por lo que tenía sentido comenzar allí. Esto fue un desafío al principio ya que mis seguidores eran personas que hablaban español y yo no estaba acostumbrado a escribir / construir productos en inglés.

Después del primer lanzamiento comencé a considerar la idea de reconstruir Components UI en español para brindar valor a las personas en los países de habla hispana. Pensé en amigos y familiares que solo hablan español y en cómo podrían beneficiarse de un proyecto como este.

Creación de un producto digital en varios idiomas

Inicialmente construí una página de destino — landing page — básica usando Carrd.co y Components UI, por supuesto, para decirles a los visitantes que la versión en español se acercaba y que podían registrarse para recibir actualizaciones. También agregué un enlace a esta página en español en el pie de la página de inicio de Components UI. Hice esto para probar si alguien estaba interesado en el proyecto en español. No quería comenzar a construir algo que nadie fuera a usar.

Observo por el análisis de mi sitio web que algunas personas estaban visitando la página de destino en español. Un día alguien me escribió que estaba interesado en comprar Components UI pero estaba más interesado en la versión en español. Me preguntó cuándo estaría disponible y me comentó que la compraría. Eso era todo lo que necesitaba para empezar a construirlo.

Recuerdo haber escuchado un podcast de Tim Ferriss donde contó la historia de un cliente que se quejaba con uno de los hermanos Collison de que Stripe no estaba disponible en su idioma. Esa noche codificaron y publicaron la versión del sitio de Stripe en ese idioma y enviaron una nota al cliente que se quejaba. Pensé que esa era una historia genial y quería hacer lo mismo.

Cómo construí Components UI: versión en español

Al día siguiente hice un inventario de las cosas que necesitaba construir y traducir para publicar la nueva versión en español. Mi lista era algo como esto. Aunque la lista parece pequeña, fue más trabajo del que esperaba:

• Texto de la página de destino
• Traducción y formato de libros electrónicos (manuales)
• Traducciones de video
• Activos y páginas de venta en Gumroad

Página de destino

Para la página de destino necesitaba traducir todo el texto al español. Decidí poner la página de destino en una subcarpeta en lugar de un subdominio para fines de SEO, así que también necesitaba agregar algo de código.

Primero agregué la etiqueta lang y hreflang a la página de destino para indicarle a Google, u otros motores de búsqueda, que la página tenía múltiples variaciones de idioma. Esto ayuda a los motores de búsqueda a darse cuenta de que tu(s) página(s) web está en varios idiomas y a indexarlas de manera correspondiente.

Luego cambié los metadatos de SEO a la versión en español

Hice todo esto porque decidí publicar en una subcarpeta y alojarlo en mi servidor. Si lo estuviera haciendo en un subdominio habría usado Carrd en su lugar y cambiaría el idioma y la descripción en la configuración del sitio y agregaría el código de idioma alternativo en un embed element.

Finalmente agregué una pequeña notificación que solo aparece si el navegador web del visitante está configurado en español. No quiero molestar a los visitantes que solo hablan inglés con esta notificación. Mi lógica aquí es que si tu navegador web está configurado en español, entonces consumes contenido en español. Lo mismo ocurre con el inglés. Por supuesto, puedes descartar la notificación si prefieres la versión en inglés del producto.

Libro electrónico

La traducción del libro electrónico — que es básicamente el manual de uso —  fue bastante sencilla. Solo necesitaba traducir el texto y ajustar algunas de las imágenes.

Video

Dependiendo del paquete, cuando compra la Components UI, obtienes acceso a tutoriales en video. No quería volver a grabar los videos así que extraje el audio de todos los videos, traduje el audio y lo puse en texto y luego leí el texto sobre el video. Este proceso tomó algo de tiempo pero fue mucho más rápido que si los hubiera vuelto a hacer desde cero.

Activos y páginas de venta en Gumroad

Utilizo Gumroad para vender mis productos digitales. Para esta parte construí las imágenes, las vistas previas y las muestras en español y traduje el texto de la página de venta.

Una vez que tuve todos mis activos listos en español, publiqué la página de destino, cargué los archivos en Gumroad y puse el producto disponible para la venta. Le envié un correo electrónico al cliente que me dijo que quería la versión en español del producto para hacerle saber que estaba listo. Lo compró de inmediato.

Todo esto tomó un par de días de trabajo. El efecto colateral de hacerlo fue que generará un nuevo mercado para la familia de productos, aumentando aún más el valor del activo. En este momento solo la galería de Components UI ya está disponible en español. Planeo agregar una sección en español al blog y ofrecer Build UI y Guides UI en español para que las personas que no hablan inglés pueden tener las mismas oportunidades y recursos para crear y vender productos digitales en línea.

Comencé Components UI en marzo de 2020. Comenzó como un pequeño proyecto en paralelo que ha crecido y ahora tiene una familia de productos disponible. Esta es una revisión de lo que sucedió en 2020 y cómo se encuentra en este momento. Si deseas obtener más información sobre el futuro de Components UI, puedes hacer clic aquí.

Una combustión lenta

Por motivos de privacidad no comparto los resultados financieros específicos de mis proyectos pero quiero compartir algunas de las tendencias y los resultados generales del proyecto.

Al igual que con cualquier proyecto nuevo, no tenía seguidores en redes sociales ni en una lista de correos. Esto es algo de lo que me arrepiento y le aconsejo a cualquiera que desee comenzar un nuevo proyecto que comience a construir seguidores lo antes posible. Comienza a construir seguidores incluso si tu proyecto no está completamente formado.

Una vez que la primera versión de la UI de Componentes estuvo lista, simplemente envié un tweet sobre el proyecto a mi pequeño grupo de seguidores. Algunas personas comenzaron a compartir el tweet, incluso el creador de Carrd, y eso se tradujo en algunas ventas iniciales. Seguí tuiteando sobre el proyecto pero me encontré haciendo mucho trabajo y obteniendo pocas ganancias. Como no soy dueño de la plataforma de Twitter y ellos pueden cambiar las reglas o el algoritmo, decidí comenzar a escribir en blogs y enfocarme en marketing de contenido y SEO.

El marketing de contenido y el SEO son una estrategia a largo plazo pero una vez que ganes impulso, puedes desconectar la entrada de la salida, lo que significa que puedo trabajar menos pero ganar más con ese trabajo. Así es como se ve la tendencia de ventas para el 2020:

Cómo puedes ver en el gráfico, Componentes UI ha sido una combustión lenta. No obtuve muchas ventas y visitantes cuando lancé. En cambio, el proyecto ha estado creciendo constantemente cada mes sin hacer mucho trabajo. Una aclaración importante: no es que no haya trabajado en el producto desde el lanzamiento, es solo que el trabajo se realizó por adelantado con actualizaciones en el camino en lugar de hacer grandes cantidades de trabajo constantemente.

Marketing de contenidos y SEO

El tráfico de Google ha ido creciendo desde el lanzamiento en marzo, lo que significa que la estrategia de marketing de contenidos y SEO está comenzando a dar resultados. Al momento de escribir este artículo, el tráfico de Google y la búsqueda web es mayor que el tráfico de las redes sociales (lo contrario sucedió durante los primeros meses de Components UI). Esto es importante por tres razones:

• No tengo que seguir tuiteando para generar tráfico
• Puedo escalar el tráfico a una audiencia más específica
• Soy dueño de la plataforma: incluso si Twitter cierra o cambia el algoritmo, sigo siendo dueño del contenido de mi blog y mi lista de correo electrónico, para poder seguir atrayendo tráfico

Esto no quiere decir que no me guste Twitter o que no tuitearé sobre Components UI. Seguiré compartiendo mi progreso y actualizaciones en Twitter pero las métricas de vanidad como seguidores, retweets o "me gusta" no son la meta final. Prefiero concentrarme en crear contenido, construir un canal directo de comunicación con mis seguidores y seguir desarrollando activos.

Sistemas e imitadores

Al construir la Components UI, diseñé diferentes sistemas que me permiten manejarlo de manera muy simple, con procesos automatizados y sin muchos gastos generales para poder concentrarme en otras cosas como desarrollar un mejor producto, marketing y crecimiento.

Todo este trabajo se realizó por adelantado con mantenimiento y pequeñas actualizaciones a lo largo del camino. Como dije antes, diseñé sistemas y procesos que me permitieron desconectar la entrada de la salida, lo que significa que puedo trabajar menos pero ganar más con ese trabajo. Puedes leer más sobre los sistemas que desarrollé para ejecutar Components aquí: [Conexión de las herramientas: cómo construí y administro Components UI [parte 2]](https://componentsui.com/blog/connecting-the-tools-how -i-construyó-y-administra-componentes-ui /)

Una vez que Components UI ganó un poco de popularidad, comencé a notar algunos imitadores que creo que son muy comunes en los productos en general. Aunque las personas pueden simplemente copiar o clonar tus productos o servicios, no pueden copiar los sistemas y activos que has creado. No pueden copiar como ejecutas y operas tus proyectos por lo que siempre puedes estar  un paso adelante. Copiar o clonar un producto puede resultar sencillo pero copiar un sistema requiere mucho tiempo y experiencia.

"A medida que construyo públicamente, quiero ser lo más honesto posible sobre mi viaje. ¡Existen solicitudes de reembolso groseras! ¡La gente copia tus cosas! La mejor manera de lidiar con situaciones malas es tener una fe inquebrantable en lo que estás haciendo y rodéate de personas que te levanten ". - @JanelSGM

Una familia de productos

Al momento de escribir esta publicación, existen 5 productos principales bajo la marca Componentes UI:

1. Components UI: una colección de componentes y plantillas prediseñados diseñados para Carrd.co
2. Build UI: una compilación de videos y tutoriales escritos paso a paso para ayudarte a construir componentes complejos en tus proyectos de Carrd.co
3. Dark Mode: una colección de componentes y plantillas prediseñados diseñados para Carrd.co en modo oscuro
4. Templates UI: Hermosas plantillas diseñadas y construidas para Carrd.co
5. Components UI en Español: Una colección de plantillas y componentes prediseñados para Carrd.co en Español

En este momento me estoy concentrando en mejorar y hacer crecer Build UI y planeo enviar la versión 2.0 del producto muy pronto. Esta será una actualización gratuita para todos los que ya hayan comprado el producto.

Mirando hacia el futuro

Aprendí muchas lecciones durante la construcción y el crecimiento de Componentes UI el año pasado. Decidí que quiero crear un activo en lugar de simplemente crear productos basados en mi identidad. Quiero que este activo se mantenga por sí solo y no dependa de mí específicamente para crecer.

Escribí una publicación más detallada sobre el futuro de Components UI donde establecí mi estrategia para construir un activo y servir a nuevos mercados. Si está interesado en leer el El futuro de Components UI, haz clic aquí.

Si tiene algún comentario sobre el producto o deseas hablar sobre el estado actual o el futuro de Components UI y los productos digitales, comunícate conmigo en Twitter en @oscaroarevalo o envíeme un correo electrónico a oscar@oscaroarevalo.com.

I'm a native Spanish speaker so I want to help and provide value to people in Spanish-speaking countries as well. I started Components UI as a digital product in English but recently launched a new version re-built from the ground up in Spanish. This is my reasoning behind doing it and how I did it.

Building a digital product in English

The first version of Components UI was built in English basically because of Carrd. Components UI is built on top of the Carrd.co platform that's only available in English so it made sense to start there. This was challenging at first since my following was people that spoke Spanish and I was not used to write / build products in English.

After the first release I started to think about the idea of re-building Components UI in Spanish to provide value to people in Spanish-speaking countries. I thought about friends and family members that only speak Spanish and how they could benefit from a project like this one.

Building a digital product in multiple languages

Initially I put up a basic landing page — using Carrd.co and Components UI of course — telling visitors that the Spanish version was coming up and that they could sign up to receive updates. I added a link to this page on the footer of the Components UI landing page as well. I did this to test if anyone was interested in the project in Spanish. I didn't want to start building something that no one was going to use.

I notice from my website analytics that a few people were visiting the Spanish landing page. One day someone wrote that he was interested in purchasing Components UI but was more interested in the Spanish version. He asked me when it'd be available and that he'll purchase it. That was all I needed to start building it.

I remember listening to a Tim Ferriss podcast where he told the story about a customer complaining to one of the Collison brothers that Stripe was not available in his language. That night they coded and published the Stripe site version on that language and sent a note to the complaining customer. I thought that was cool and wanted to do the same.

How I built Components UI: Spanish Version

The next day I did an inventory of the things I needed to build and translate to publish the new version in Spanish. My list was something like this. Although the list looks small, it was more work than I expected:

• Landing page text
• Ebook translations and formatting
• Video translations
• Assets and selling pages on Gumroad

Landing page

For the landing page I needed to translate all the text into Spanish. I decided to put the landing page on a subfolder instead of a subdomain for SEO purposes so I also needed to add some code.

First I added the lang tag and the hreflang to the landing page to let Google — or other search engines — that the page had multiple language variations. This helps search engines to notice that your pages are in multiple languages and index it accordantly.

Then I changed the SEO metadata to the Spanish version.

I did this because I decided to publish on a subfolder and host it on my server. If I was doing it on a subdomain I'd have used Carrd instead and change the language and description on the site settings and added the alternate language code in an embed element.

Finally I added a small notification that only appears if the visitor's web browser is set to Spanish. I don't want to bother visitors that only speak English with this notification. My logic here is that if your web browser is set to Spanish then you consume content in Spanish. The same is true for English. You can of course dismiss the notification if you'd prefer the English version of the product.

Ebook

The Ebook translation was pretty straightforward. I just needed to translate the text and adjust some of the images.

Video

Depending on the package, when you purchase Components UI you get access to video tutorials. I didn't want to shoot the videos all over again so instead I extracted the audio from all the videos, translated the audio and put it in text and then read the text on top of the video. This process took some time but was way faster than if I had done them all over again from scratch.

Assets and selling pages on Gumroad

I use Gumroad to sell my digital products. For this part I built the images, previews and samples in Spanish, and translated the text on the selling page.

Once I had all my assets ready in Spanish, I published the Landing page, uploaded the files to Gumroad and set the product live. I emailed the customer that told me he wanted the Spanish version of the product to let him know that it was ready. Lo and behold, he purchased it right away.

All of this took a couple of days of focused work. The side product of doing it was that it will generate a new market for the family of products, increasing even more the value of the asset. Right now only the Components UI gallery is already available in Spanish. I plan to add a Spanish section to the blog and offer Build UI and Guides UI in Spanish so that non-English speakers can have the same opportunities and resources to create and sell digital products online.