Pau Jara

AGS Rent

Grupo AGS

Landing en React para administración de arriendos con seguro de restitución: del problema al plan en una lectura.

Tipo
Landing de servicio
Estado
Publicado
Mi aporte
Diseño, desarrollo e integraciones
Año
2025
Herramientas
Figma · React · Vue.js · TanStack · Tailwind CSS · CRM
Hero de AGS Rent: titular «Renta protegida, no prometida.» sobre fotografía, con botones de cotización y WhatsApp.
Fig. 01Sitio implementadoPrimer viewport en desktop.

01Resumen

AGS Rent es el servicio de administración de arriendos de Grupo AGS, con un Seguro de Restitución que cubre meses de arriendo impagos y el retiro de arrendatarios morosos. La landing está dirigida a propietarios de la Región Metropolitana y los lleva a cotizar la administración de su propiedad.

Vista general de la landing completa, dividida en tres columnas.
Fig. 02Sitio implementadoLa landing completa, en tres columnas que se leen de izquierda a derecha.

02Mi participación

Rol y alcance

Participé en todo el proceso: estructura, diseño UX/UI, desarrollo en React e integraciones.

Colaboración

Proyecto realizado en Agencia Böll.

Entregables
  • Estructura y jerarquía de contenidos
  • Diseño UI en Figma
  • Desarrollo en React
  • Formulario integrado a CRM

03El problema

Un seguro de arriendo se percibe como letra chica. La página tenía que partir por el problema del propietario, explicar cómo funciona la cobertura sin tecnicismos y hacer comparables los planes.

04Decisiones clave

Cada decisión se lee como necesidad → decisión → efecto. «Esperado» indica la intención de diseño, no un resultado medido.

Decisión 01

Primero el problema, después el servicio

Necesidad
Que el propietario se reconozca antes de leer la oferta.
Decisión
Abrí con cuatro situaciones concretas —arrendatario moroso, propiedad vacante, daños, cobranzas— y recién después presenté los beneficios.
Efecto esperado
Conectar la oferta con un problema real.
Fig. 03Sitio implementadoBeneficios en tarjetas con fotografía, después del bloque de problemas.
Decisión 02

La cobertura explicada en cuatro pasos

Necesidad
Desarmar la desconfianza hacia un seguro «de papel».
Decisión
Expliqué el Seguro de Restitución como una secuencia numerada y cerré con una aclaración directa: la póliza se puede leer completa antes de firmar.
Efecto esperado
Entender la cobertura sin tecnicismos.
Fig. 04Sitio implementadoCuatro pasos y la aclaración sobre la póliza.
Decisión 03

Dos planes, uno destacado

Necesidad
Elegir el nivel de protección sin comparar tablas largas.
Decisión
Presenté dos planes lado a lado, con la comisión en grande, lo que incluye cada uno y el plan de mayor cobertura destacado en color.
Efecto esperado
Decidir entre dos opciones claras.
Fig. 05Sitio implementadoPlan Estándar y Plan Plus, con el segundo destacado.

Otros detalles

Fig. 06Sitio implementadoFormulario de cotización con datos de la propiedad.

05Versión móvil

Hero móvil de AGS Rent con botones de cotización y WhatsApp.
Fig. 07Sitio implementadoEn móvil, los dos llamados a la acción —cotizar y WhatsApp— quedan dentro del primer viewport.

06Del diseño a la implementación

Desarrollé la landing con el mismo stack de mis landings: React, Vue.js, TanStack y Tailwind CSS.

  • Componentes de problemas, beneficios, pasos, planes, testimonios y preguntas frecuentes.
  • Formulario de cotización con comuna, tipo de propiedad y plan de interés, integrado a CRM.
  • Versión móvil con llamados a cotizar y a WhatsApp en el primer viewport.

07Resultado y aprendizaje

Entregado

Landing publicada, con versión desktop y móvil.

Observado

Cada solicitud llega con la comuna, el tipo de propiedad y el plan de interés, lista para que un ejecutivo la gestione.

Aprendizaje

Vender un seguro es vender confianza: el orden del contenido —problema, solución, funcionamiento, precio— pesa más que cualquier recurso visual. Pedir comuna y tipo de propiedad en el formulario le ahorra al equipo comercial la primera llamada.