Agendar una llamada

Agendar una llamada

Cargando la agenda
← Todos los proyectos

Litora EB-5

Inmobiliario · Plantilla · HubSpot · Design System · Landing Page
Litora EB-5

Resumen

Litora es un tema de HubSpot que creé para la venta, pensado para empresas inmobiliarias que ofrecen inversiones del EB-5. El EB-5 es la visa estadounidense que da la green card a extranjeros que invierten en un negocio en Estados Unidos que crea empleos (USCIS). La demostración presenta una empresa que lleva inversores brasileños a Tavessa, un edificio de alquiler en Florida, con una página de webinar, una página de evento en São Paulo y sus páginas de agradecimiento, en portugués e inglés.

Rol
Diseño UX/UI y desarrollo en HubSpot
Alcance
10 landing pages, un tema propio y formularios conectados al CRM
Herramientas
Figma, HubSpot, GSAP
Sector
Inmobiliario

El problema

Quien invierte por el EB-5 espera años por la green card y teme perder lo que invirtió. Las páginas tienen que responder a esos miedos sin prometer retorno, plazos ni visa, ya que la SEC trata ese tipo de promesa como una señal de fraude (SEC).

Restricciones

  • Plan gratuito de HubSpot

    El plan gratuito permite hasta 30 landing pages, sin tests A/B y con el logo de HubSpot en todas las páginas.

  • Edición sin código

    El equipo de marketing cambia textos, fotos y fechas en el editor de HubSpot.

  • Dos idiomas

    Cada página tiene una versión en portugués y otra en inglés.

  • Sin promesas

    Cada número de la página viene con su fecha y su fuente.

Investigación

Antes de diseñar, estudié lo que los inversores del EB-5 preguntan y reclaman en internet, y sus principales preocupaciones definieron el contenido de la página.

Al inversor le preocupaEn la página
La demoraUna pregunta del FAQ sobre plazos que no promete fechas
Perder el dineroUna sección de riesgos que responde “Sí.” a “Puedo perder mi dinero?”
Comprar una vivienda para tener la visaLa primera respuesta del FAQ explica que eso no funciona
El costo totalUna tabla con todos los costos del proceso
Probar el origen de los fondosUn tema del webinar y una pregunta del FAQ sobre eso

Cada página apunta a un término de búsqueda, y su H1 usa las palabras que los brasileños de verdad buscan, como “visto EB-5”.

Estructura de las páginas

  • 10landing pages
  • 15módulos editables
  • 13secciones listas

La página del webinar sigue el orden de las preguntas del inversor. Abre con la fecha y el formulario de inscripción, muestra el proyecto, los costos y los riesgos, y cierra con una última invitación a inscribirse.

La página del evento reutiliza los mismos módulos con su propia dirección y horarios, y las páginas de agradecimiento confirman la fecha y explican qué pasa después.

Cuatro Decisiones

1El formulario en la primera pantalla

Problema
La inscripción es el objetivo de la página.
Decisión
La fecha, los horarios y el formulario comparten la primera pantalla.
3 fieldscalifican a cada inversor en el CRM

2Sin promesas

Problema
Cualquier promesa le parecería un fraude a un inversor.
Decisión
Los riesgos tienen su propia sección, con respuestas directas.
0 promisesde retorno, plazos o visa

3Un formulario más ligero

Problema
El formulario incrustado de HubSpot pesa unos 180 KB y no sigue el diseño.
Decisión
El tema tiene su propio formulario, que envía los datos a la Forms API de HubSpot.
2 formsllegan al CRM con todos sus campos

4Contenido que queda visible

Problema
El contenido oculto por una animación rompe el editor de HubSpot y desaparece sin JavaScript.
Decisión
Toda animación sigue el scroll, y nada se mueve cuando el movimiento reducido está activado.
0 blocksocultos en el editor o sin JavaScript

Desarrollo

  • Los colores y las fuentes de la marca están en los ajustes del tema.
  • El tema pasa la validación del marketplace de HubSpot, salvo en las plantillas de blog.
  • Las páginas en portugués e inglés están vinculadas con hreflang.
  • El archivo de Figma usa las mismas Variables y estilos de texto que el código.

Accesibilidad

  • Los campos tienen 16 px, y los errores aparecen como texto.
  • Una capa oscura mantiene el texto legible sobre las fotos.

Resultados

  • 99–100de rendimiento en el móvil
  • 100accesibilidad
  • 69 → 99de rendimiento entre la primera medición y la última
Webinar 99
Evento 100
Agradecimiento del evento 100
Agradecimiento del webinar 96
Privacidad 100

PageSpeed en el móvil, 4 de octubre de 2026.

Guía de Estilo

Colores y Botones

#0D271E · Palm Darkest
#14382B · Palm Darker
#1C6146 · Palm
#FF7A66 · Coral
#F6C23F · Sun
#F9CC63 · Sun Light
#FBF5E9 · Cream
#F1E8D5 · Cream Dark
#748478 · Neutral
Tipografía · Jost, Nunito Sans, Unbounded

Invest with the facts on the table.

EjemploNombrePesoTamañoAltura de líneaEspaciado
A live EB-5 visa webinarH1 · JostLight44px48.4px-2%
What you will learnH2 · JostLight40px44px-2%
How EB-5 worksH3 · JostRegular20px22px-2%
Free and onlineAntetítulo · Nunito SansMedium14px18.2px8%
Thursday, November 12Destacado · Nunito SansRegular20px26px0
Each step, in orderCuerpo · Nunito SansRegular16px25.6px0
TavessaProject · UnboundedMedium208px208px-2%
Litora, EB-5 visa webinar page
Móvil
Diseñado en Figma
Hecho con HubSpot
Diseño y desarrollo de joaomob
Puedes ver la versión en vivo aquí (se abre en una pestaña nueva) Abrir Figma en modo lectura → (se abre en una pestaña nueva) Ver el código del tema → (se abre en una pestaña nueva)
Créditos
  • Tema de HubSpot por João Marcos