Saltar al contenido
← Volver a los trabajos

Folium

Cliente
Proyecto personal
Rol
Estrategia de producto · UX/UI · Frontend · Copy
Año
2026
Herramientas
Figma · Astro · React · Tailwind · TypeScript
Tags
SaaS · Landing · UX · UI · Estrategia de producto · Design System
Pantalla principal del caso Folium: SaaS · Landing · UX · UI · Estrategia de producto · Design System

El problema

Trabajo con clientes y siempre choqué con lo mismo: el laburo creativo sale bien, pero todo lo que lo rodea es un caos. El brief llega por WhatsApp, los archivos viven en Drive, los cambios se piden por mail, las reuniones se arman por Calendly y, cuando hay que entregar, nadie sabe cuál era la versión final. Probé ordenarme con Notion, carpetas y planillas, pero siempre terminaba haciendo seguimiento administrativo en vez de diseñar.

El problema nunca fue que faltaran herramientas. Hay demasiadas, sueltas y desconectadas. Y por más que el trabajo sea bueno, una carpeta desordenada o un hilo eterno de mensajes hacen que el cliente vea todo como improvisado.

Así que en vez de sumar otra app al ruido, quise imaginar la que me faltaba: un solo lugar donde el cliente entre y vea su proyecto, las entregas, el feedback y lo aprobado, con mi marca y sin tener que aprender nada. Antes de construir el SaaS completo, decidí validar la idea con una landing. El nombre viene de folium: la hoja, la página donde queda registrado el trabajo.

Quiero un único portal donde el cliente vea su proyecto, las entregas y el feedback, sin carpetas perdidas ni hilos infinitos, y donde la experiencia se vea tan profesional como el trabajo. Pero antes de programar el SaaS entero, quiero comprobar si le pasa a alguien más que a mí.

— Yo, al arrancar Folium

El proceso

Empecé por la estrategia, no por la pantalla. Definí una sola hipótesis verificable: si un freelance puede presentar proyectos, entregas y feedback en un portal simple y con marca, baja el caos operativo y mejora cómo lo percibe el cliente. Todo lo demás, secciones, pricing, copy, lo ordené alrededor de esa apuesta.

Antes de escribir una línea de código, diseñé todo en Figma: el sistema visual completo (tipografía, paleta, componentes y motion) y cada sección de la landing, más el mockup del portal en desktop y mobile. Esa etapa fue donde resolví las decisiones difíciles, la jerarquía, el tono, qué mostrar del producto futuro, sin pelearme con el navegador. Recién con el diseño cerrado pasé al build.

El front lo armé en Astro para que la landing sea rápida y estática, con React solo donde hace falta interacción real (el formulario de waitlist), Tailwind para consistencia visual y Resend para capturar los emails. La estructuré como un funnel narrativo: planteo el caos de herramientas dispersas, propongo el portal como solución, aterrizo en perfiles concretos (diseñador, fotógrafo, editor, estudio boutique) y cierro invitando a la lista de espera. La hice bilingüe, con detección automática del idioma.

Puse la waitlist para validar antes de invertir meses de desarrollo. Cada mail que alguien deja dice que el problema le resultó familiar y la propuesta tiene sentido. Como el proyecto es mío, decido el alcance y construyo según lo que voy viendo, no según un roadmap inventado. Y como la landing vende "experiencia profesional", tenía que demostrarlo con su propio diseño: si prometo orden, la pieza tiene que sentirse ordenada.

— Sistema de diseño

Sistema de diseño

Tipografía

General Sans para marca, títulos, precios y métricas: tono editorial y compacto, con tracking negativo (-0.02em) en los headings. Inter Variable para cuerpo, navegación, formularios y microcopy: lectura limpia en textos largos. Tres pesos: 400 para leer, 500 para texto interactivo, 600 para títulos y énfasis. Nada de 700+ para no sobrecargar.

General Sans para marca, títulos, precios y métricas: tono editorial y compacto, con tracking negativo (-0.02em) en los headings. Inter Variable para cuerpo, navegación, formularios y microcopy: lectura limpia en textos largos. Tres pesos: 400 para leer, 500 para texto interactivo, 600 para títulos y énfasis. Nada de 700+ para no sobrecargar.

Estilo
Tamaño60px

Escribí acá

— Galería

Pasá el mouse

Captura de pantalla de Folium (1)
Captura de pantalla de Folium (1)
Captura de pantalla de Folium (2)
Captura de pantalla de Folium (2)
Captura de pantalla de Folium (3)
Captura de pantalla de Folium (3)
Captura de pantalla de Folium (4)
Captura de pantalla de Folium (4)
Captura de pantalla de Folium (5)
Captura de pantalla de Folium (5)
Captura de pantalla de Folium (6)
Captura de pantalla de Folium (6)

— Impacto

El estado actual

Folium está en fase de validación, así que todavía no hay métricas reales de conversión, signups ni retención. Lo que sí hay es una pieza funcional: una landing bilingüe con legalidad completa desde el arranque. Cuando la waitlist tenga datos, esta sección muestra los números.

Idiomas
2
ES + EN
Landing bilingüe con hreflang y redirección por idioma.
Embudo
8
secciones
Hero, problema, solución, beneficios, casos de uso, pricing, FAQ y CTA.
Confianza
5
piezas legales
Privacidad, Términos, DPA, Seguridad y security.txt desde la fase cero.
Precios
3
planes
Free, Pro y Agency: definir el pricing ordenó el alcance del producto.

Lo que viene

Folium hoy es la fase cero: la landing valida la demanda y el lenguaje del producto. Lo que sigue depende de lo que la validación vaya confirmando:

  1. 001

    MVP funcional

    Acá Folium deja de ser landing y pasa a ser producto. Registro, gestión de clientes y proyectos, link único para que el cliente entre sin crear cuenta, entregas simples, comentarios, aprobaciones con fecha, control de revisiones y avisos por mail. El objetivo es ver si el portal funciona en proyectos reales.

  2. 002

    Producto Pro

    Marca propia en el portal, almacenamiento ampliado, comentarios sobre archivos, calendario integrado y un dashboard más completo. Lo que busca es que los primeros usuarios encuentren razones para pagar.

  3. 003

    Estudios y ecosistema

    Multiusuario, roles, reportes por cliente/proyecto, marca blanca y API. Después, integraciones con Google Calendar y almacenamiento, automatizaciones y templates: que Folium pase de portal de entregas a sistema operativo liviano para estudios creativos.

Disponible para trabajar

¿Tenés una buena idea?

Este lugar está esperando tu próximo caso de éxito.