⚒️ Creado sin código #3 - Adschive, la biblioteca de ads en reel para e-commerce
Jesús Castillejo nos cuenta como ha lanzado un MVP de su side-project en muy poco tiempo con un resultado realmente cuidado, usando Framer.
👋🏻 ¡Hola!
Mientras estás leyendo estas línea estoy ahora mismo camino a Barcelona, para montar un evento en una terraza de la mano del equipo de Framer. Me cuentas esto hace un año y la verdad es que no te creo.
Además tengo la suerte de poder contar en 10-15 minutitos nuestra experiencia formando gente en Framer y proyectos que hemos hecho para clientes. Vamos, un lujo.
Lujo como fue la semana pasada poder estar en Zaragoza, de la mano de Daniel Amieva y Óscar Saboya (y las más de 20 personas que se pasaron por ahí) para inaugurar los eventos de NCHZaragoza.
Además, la newsletter de la semana pasada ha gustado bastante, lo cual me alegra bastante porque la he hecho con cariño fruto de la experiencia de años pasados.
Como te prometí, ahora vendrán newsletter centradas en proyectos y la de esta semana es una que realmente me parece que es un ejemplo perfecto de cómo puedes montar un side-project basado en tu necesidad, así como un lujo es tener a Jesús, persona de la que soy todo un fan.
Sin más, te dejo con la historia de Adschive.
👀 Un side-project que nace de encontrarse un problema en tu día a día
Muchas veces en nuestro día a día nos encontramos problemas. Con más o menos intensidad, que nos duelan más o menos.
Muchas veces encontramos software que nos ayuda a solucionarlo, pero otras muchas hackeamos esto mediante cosas como montarnos nuestro propio Notion, Obsidian, notas del teléfono o incluso mandarnos un whatsapp a nosotros mismo.
Esto es lo que le pasó a Jesús, que en su día a día buscaba la manera de recopilar anuncios que fueran interesantes y que le pudieran ser referencia, pero no encontraba ningún lugar en el que tener una recopilación que sirva de inspiración.
El resumen del proyecto es que ha decidido dar un paso hacia validar si esto es un problema de más gente de su sector y que puede ser el germen de un proyecto realmente interesante.
Te dejo con Jesús, que nos contará su historia. Si te ha gustado o te sirve de algo, compártesela a alguien que creas que le puede interesar, así nos apoyarás.
🙋♂️ Background acerca de ti :)
Soy Jesús Castillejo, diseñador de formación con gran atracción por la parte de negocio.
Socio y responsable de la parte de web, diseño, estrategia y marca de Minimalism Brand (creada en Shopify, herramienta no-code centrada en creación de ecommerces).
Siempre he estado montando proyectos personales y webs para terceros. Entre mis últimos side projects está Necso, comunidad en la que comparto todos nuestros avances en Minimalism, lecturas y noticias relevantes del sector y webs que están haciendo cosas interesantes a nivel usabilidad o negocio.
También soy profesor en varias escuelas como The Power o IEBS, en donde busco aunar diseño y negocio con clases sobre UX/UI, experimentación o creación de landing pages.Todo con una aplicación práctica.
👶¿Cómo nace el proyecto?
Adschive nace de una necesidad personal. A la hora de buscar referencias para las campañas de ads de Minimalism el proceso era muy tedioso. O tenía que grabar pantalla cuando aparecía un anuncio interesante en redes o tenía que ir corriendo a la biblioteca de anuncios de Facebook para descargarlo.
Con el tiempo recopilé decenas de anuncios que podrían ser útiles para más gente del sector “moda”. Así que decidí compartirlo.
Un sitio como Adschive, en donde encuentras anuncios de calidad, organizados por categorías, me hubiese sido muy útil en ese momento.
👀 ¿Cómo funciona?
Los anuncios en video están etiquetados según su contenido. En la actualidad hay 7 categorías:
URBAN
INDOOR
STUDIO
OLD AGE
CHILDREN
NATURE
SPORT
Un anuncio puede pertenecer a varias colecciones, por ejemplo, si el anuncio muestra a señores mayores haciendo deporte en el medio de la ciudad, estaría etiquetado con “Old age”, “Sport” y “Urban”.
En un futuro no descarto añadir alguna categoría más como “UGC (User-Generated Content)” con anuncios creados por creadores de contenido, ya que pueden resultar muy útiles de cara a definir campañas con influencers.
¿Por qué anuncios en video?
En Minimalism validamos que los anuncios en video son los que generan un mayor CTR y conversiones a venta, ya que permiten comunicar más; tanto a nivel de planos del producto, como a nivel copies.
A fin de simplicar el producto, Adschive se concentra únicamente anuncios en formato story, ya que es de los más consumidos, y me abre la puerta a no sólo compartir anuncios del ecosistema de Meta, sino también de Tiktok.
🚀 ¿Cómo construyes el MVP? ¿Qué tecnología usaste para ello?
Realmente esta versión de Adschive no ha sido la primera. Hace meses lancé una one page website sencilla creada con Carrd. Herramienta hiperbarata pero que no os recomiendo si queréis hacer algo bien pulido.
Con ese primer MVP quería validar si la gente estaba dispuesta a pagar, y sí, con pocas visitas conseguí generar ventas.
El funcionamiento de ese MVP era sencillo. Con un único pago conseguían acceso a mi repositorio que estaba creado en Notion. El enlace te llegaba gracias a una automatización con Mailerlite, que estaba vinculado con la pasarela de pago de Stripe.
Cuando se recibía el pago a través de Stripe, el mail del comprador se enviaba a Mailerlite y activaba un mail automático con el enlace a Notion. Todas estas automatizaciones no las hice ni con Make ni Zapier, que suelen ser las herramientas habituales dentro del no-code. En este caso empleé Pipedream, herramienta quizás menos conocida entre la comunidad, pero que me funcionó muy bien.
He de reconocer que quizás este primer MVP era un poco “chapucero” pero me sirvió para validar.
¿Y la beta actual?
La Beta actual está diseñada en Figma y construida de cero en Framer.
✅ ¿Qué ventajas y incovenientes te has encontrado a la hora de desarrollarlo por hacerlo en No-code?
Las ventajas del No-code son innumerables. El tener la posibilidad de crear algo con total autonomía y llevar el diseño al nivel que quieres es increíble.
Si hacemos foco en Framer, es una gozada. He creado proyectos para clientes en Webflow y el CMS no tiene nada que ver. Gestionar contenido dinámico en Webflow es poco intuitivo y tiene bastantes limitaciones. Para nosotros, los más frikis del no-code, puede tener un pase, pero para los clientes es una odisea. Por otro lado tenemos a Framer, que es una gozada en cuanto a CMS, muy sencillo y visual.
🚀 Conviértete en desarrollador web profesional con Webflow y crea webs increíbles
Una de nuestras formaciones que más salida profesional tiene es desarrollar en Webflow. Y aunque Framer es muy versátil, Webflow ahora mismo te permite construir páginas webs profesionales para clientes tan grandes como Iberia, Mango o Urban-X.
En este programa de 8 semanas vas a ser capaz de hacer tu primera web profesional. Lo sé porque yo mismo contrato a mis alumnos una vez acaban para hacer webs reales.
Empezamos la semana que viene la 5ª edición y tienes 100€ de descuento con el cupón: NEWSLETTERQ2
También me gustaría destacar lo especialmente fácil que es crear “conditionals” y “transforms”. Yo los tengo integrados a nivel de marca, para que cuando importo un Google Sheet, automáticamente me aparece el logo de la empresa, y no tengo que añadirlo uno a uno.
A nivel inconvenientes, echo en falta la paginación en el CMS de forma nativa. En mi caso, con multitud de videos por página, necesito una paginación para que la web no tarde mucho en cargar. Esto lo he solventado añadiendo “code overrides”, snippets que te permiten añadir más funcionalidades a Framer a través de código.
Los overrides los he sacado de la propia comunidad de Framer, a través de foros, blogs, etc. Algunos de ellos los he añadido tal y como los compartían sus creadores, y otros los he modificado con la ayuda de Chatgpt, como por ejemplo la barra de carga situada en la parte superior de los videos. Edité el código con Chatgpt para que bebiese de forma dinámica de la duración de cada uno de los videos. Os dejo aquí el código.
🔮 Planes de futuro
El objetivo actual de Adschive es aportar mucho valor que acabe generando visitas al sitio, autoridad del dominio a través de enlaces externos y registros al formulario.
A fin de generar más tráfico orgánico, en la próxima iteración añadiré un apartado de blog con el que posicionar términos clave. Para la creación de estos posts haré uso de Editby, herramienta de inteligencia artificial especializada en la creación de contenido.
Y el paso siguiente al blog sería crear una zona privada de pago para usuarios, con más referencias y marcas.
👀 ¿Cómo podrías hacerlo tú?
El caso de Jesús con Adschive es un ejemplo perfecto de solucionar un problema propio que seguro que más gente tiene.
Como has visto, no hay más que hacer una landing page sencilla - puedes usar tanto Carrd como Framer pera ello - en la que cuentes tu propuesta de valor y compartírselo a gente que puedas pensar que tiene el mismo dolor que tú. Esto puede ser amigos, familiares o compañeros de profesion.
Lo importante es que no te obsesiones con hacer algo demasiado complejo. Que aquí lo importante es saber si a alguien le interesa tu producto y si es una necesidad real, no si la web es más o menos bonita.
Hasta aquí la newsletter de esta semana. Si te ha gustado ya sabes que nos hace muy feliz ver cómo se lo haces llegar a más gente. Te lo ponemos fácil.
Dejo por aquí el override de la barra de carga del video :) Por si le es útil a alguien:
import React, { useEffect, useState } from "react"
import { addPropertyControls, ControlType } from "framer"
export default function ProgressAnimation(props) {
const { backgroundColor, progressColor, file } = props
const [width, setWidth] = useState(0)
const [duration, setDuration] = useState(0)
useEffect(() => {
// Obtener la duración del archivo .mp4
if (file) {
const video = document.createElement("video")
video.src = file
video.addEventListener("loadedmetadata", () => {
setDuration(video.duration * 1000) // Convertir a milisegundos
})
}
}, [file])
useEffect(() => {
// Actualizar la barra de progreso
const interval = setInterval(() => {
setWidth((prevWidth) =>
prevWidth >= 100 ? 0 : prevWidth + 100 / (duration / 100)
)
}, 100)
return () => clearInterval(interval)
}, [duration])
const styles = {
container: {
width: "100%",
height: "100%",
position: "relative",
overflow: "hidden",
},
background: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: backgroundColor,
},
progress: {
position: "absolute",
top: 0,
left: 0,
height: "100%",
width: `${width}%`,
background: progressColor,
},
}
return (
<div style={styles.container}>
<div style={styles.background}></div>
<div style={styles.progress}></div>
</div>
)
}
addPropertyControls(ProgressAnimation, {
backgroundColor: {
title: "Background Color",
type: ControlType.Color,
defaultValue: "rgba(0, 0, 0, 0.12)",
},
progressColor: {
title: "Progress Color",
type: ControlType.Color,
defaultValue: "black",
},
file: {
title: "Video File",
type: ControlType.File,
allowedFileTypes: ["mp4"],
},
})