LEAD
2022
Research, Design & Coding
Como parte de un test de habilidad, una empresa me envio una pagina DEMO con un solo objetivo: mejorar la conversion de su formulario de contacto. Entregable: diseno en Figma (web y mobile) y su implementacion completa en HTML, CSS y JavaScript.
5
Días
40
Horas
Web y Mobile
Dispositivo
FASE 1 - Analisis
Abordaje
Lo primero fue leer la página DEMO de principio a fin: cómo estaba distribuida, qué decían sus textos y títulos, dónde ponían los llamados a la acción. No tenía imágenes, solo espacios reservados para ellas. Analizarla me dejó con más preguntas que respuestas, así que hice un research corto sobre empresas del mismo rubro para entender mejor el contexto antes de diseñar.
FASE 1 - Analisis
el research
Revisé 2 páginas del mismo rubro (Onfleet y Package) y me fijé en algo puntual: cómo organizaban las imágenes, qué secciones destacaban más, y qué hacía que conectaran con sus clientes. De ahí saqué 6 puntos que quería asegurar en el rediseño.
Esta inmersión me permitió ver más allá de lo evidente y, al ponerme en los zapatos del usuario, comprendí la necesidad de información que surge al visitar un sitio web.
FASE 1 - Analisis
Resultado del research
A partir de esta reflexión, identifiqué las características esenciales que debían incorporarse:
Jerarquía visual clara
La página tenía que guiar la vista sola: botones de acción y secciones clave debían resaltar por sobre el resto, sin que el usuario tuviera que buscarlos.
Espacio blanco estratégico
Usé el espacio en blanco a propósito, para que la página respirara y no se sintiera saturada de texto.
Tipografía Legible
Elegí una que se leyera bien en cualquier tamaño de pantalla, sin sacrificar personalidad.
Diseño Responsivo
Tenía que verse igual de bien en móvil que en escritorio, sin perder jerarquía ni información en el camino.
Microinteracciones
Sumé animaciones y transiciones pequeñas para dar feedback inmediato y que la navegación se sintiera más fluida.
Call to action destacado
Los botones de acción tenían que ser imposibles de ignorar: color de contraste y ubicación pensada para llevar directo al formulario.
FASE 2 - Diseno
Design System y Wireframe
Con la idea visual ya clara, empece a bocetar como armar la pagina y defini un pequeno design system que despues use para construir los wireframes.
Tipografia
Poppins
1234567890
!@#$%^&*(){}[]
Colores
Primary
#0052CC
Componentes
Wireframe
Before
After
Before
After
Before
After
FASE 3 - Desarrollo
De Figma a produccion
Con el design system y los wireframes listos, pase directo al codigo yo mismo. No hubo hand off a otro developer: quien diseno el sistema de componentes fue quien lo tradujo a HTML, CSS y JavaScript. El resultado es un landing funcional, no un mockup estatico.
Stack tecnico
HTML
- header, nav, y cada seccion de la pagina como su propio section con un id descriptivo (#caracter, #Sectores, #funtion, #client, #contacto)
- Conectado directo al menu de navegacion, con scroll suave a cada seccion por su id
- Grid de Bootstrap mobile first: columnas responsivas (col-lg-5 col-md-12 col-12), a pantalla completa en mobile, proporcional en desktop
CSS
- Tipografia en dos capas: Poppins para titulos, Open Sans para el cuerpo del texto, separando lo que el usuario escanea de lo que realmente lee
- Selects nativos reescritos con un icono SVG propio, porque cada navegador los renderizaba distinto y queria que el formulario se viera igual en todos
- Estado activo de la navegacion por tabs marcado con una linea inferior, ajustada en 4 puntos de quiebre
JavaScript
- Animaciones de entrada con WOW.js disparando clases de animate.css, con delay escalonado por elemento (0.4s, 0.6s, 0.8s), para que los elementos del hero aparezcan uno despues del otro
- Navegacion por tabs construida desde cero, sin plugin, manejando el cambio de estado activo
- Modal de video embebido con GLightbox, sin sacar al usuario de la pagina
Decisiones de desarrollo ligadas al objetivo de conversion
- Formulario de calificacion progresiva: captura cargo, area de la empresa y tamano de flota en vez de solo nombre y email. Filtra leads calificados desde el primer contacto.
- Mensajes de error y exito visibles dentro del propio formulario, no solo la validacion por defecto del navegador.
- WhatsApp como canal alternativo: boton flotante fijo, en el verde oficial de la marca, para quien prefiere no llenar un formulario largo.
- CTA repetido en cada seccion clave: hero, caracteristicas y formulario, no solo al final.