Diseñamos y desarrollamos el sitio oficial de Lakestone Legal, firma colombiana especializada en Derecho Laboral Corporativo. El proyecto combinó branding consistente, UI/UX centrado en conversión, integración de formularios con AWS (Lambda + SES), y buenas prácticas de performance, accesibilidad y cumplimiento normativo (política de tratamiento de datos y consentimientos).
Impacto en 3 líneas
- Estructura de contenidos orientada a negocio: servicios claros, CTA visibles y formulario de contacto de alto desempeño.
- Integración serverless para envíos confiables (SES) y validaciones front con manejo de estados (cargando, éxito, error).
-
Diseño modular y responsive con sliders de video, iconografía limpia, fotografías corporativas y microinteracciones suaves.
El reto
Lakestone Legal buscaba:
- Un sitio que transmitiera confianza y orden (clave en servicios legales).
- Un héroe con video de fondo y mensajes claros, bien legibles en móvil.
- Un portafolio entendible en segundos (sin depender de imágenes pesadas).
- Un contacto que realmente convierta y llegue al correo correcto, con trazabilidad.
- Cumplimiento de la normativa colombiana de datos personales con una política clara y accesible.
Lo que hicimos
1) Arquitectura de información y UX
- Jerarquizamos mensajes: propuesta de valor arriba, servicios en iconos (no fotos), CTA siempre visible.
- En móvil, ajustamos tipografías, alturas y espaciados dinámicos para evitar traslapes.
- Añadimos líneas de seguridad en el slider (márgenes y line-height adaptativos).
2) Héroe con video y tipografía legible
- Slider con video de fondo (Cartagena/Medellín) y capas responsivas (Revolution Slider).
- Correcciones finas: data-voffset, data-fontsize, data-lineheight, whitespace y márgenes verticales variables por breakpoint para evitar superposición de títulos en pantallas pequeñas.
- Botón “Agendar consulta” como CTA principal, accesible con teclado.
3) Portafolio de servicios en tarjetas con íconos
- Migramos de “thumbnails fotográficos” a tarjetas con iconos (Font Awesome), hover azul y sombras suaves.
- Mantuvimos los enlaces SinglePage (CubePortfolio) para cada servicio; solo cambiamos la “piel”.
- Resultado: peso menor, lectura inmediata y coherencia con el branding.
4) Formulario “Solicita una llamada” con AWS
- Front-end con validaciones (nombre, email, WhatsApp, servicio, mensaje) y estados de envío.
- Integración serverless: AWS Lambda + Amazon SES para correo transaccional.
-
Payload seguro y claro:
- site, siteEmail (origen), recibeEmail (destino)
- userName, userPhone, userEmail, userMessage (mensaje combinado con el servicio)
- Manejo de errores y mensajes al usuario (alertas Bootstrap).
- Prevención de fallos por IDs inexistentes (agregamos campos ocultos y verificaciones getElementById).
5) Privacidad y cumplimiento
- Modal de Política de Tratamiento de Datos: legible, con negritas, listas y subtítulos.
- Enlace contextual: “Al enviar aceptas nuestra Política…”, que abre el modal.
- Texto adaptado a normativa colombiana y hábitos de lectura en web.
6) Performance, SEO técnico y accesibilidad
- Compresión y formatos adecuados de imágenes (encabezados y galería).
- Lazy loading de recursos no críticos y reducción de repaints en animaciones.
- Uso de alt, roles ARIA y foco visible en componentes interactivos.
- Títulos semánticos (H1/H2/H3), meta-descripciones, Open Graph listos para compartir.
Stack y herramientas
- Front-end: HTML5, CSS3/SCSS, JS ES6, Bootstrap/animaciones ligeras, Revolution Slider, CubePortfolio.
- Iconografía: Font Awesome.
- Back-end (serverless): AWS Lambda + Amazon SES (us-east-1).
- Integraciones: WhatsApp Direct, anclajes internos, modal de privacidad.
Resultado
- Interfaz clara, moderna y confiable para una firma legal B2B.
- Velocidad y legibilidad mejoradas en móvil (sin superposiciones, con buen espaciado).
- Formularios confiables, con trazabilidad y mensajes a santitovar5@gmail.com desde web@lakestonelegal.com.
- Política de datos accesible y visible, sin fricción en la conversión.
Aprendizajes
- En sliders con mucho texto, la clave está en orquestar tipografías, offsets y line-height por breakpoint.
- Cambiar de fotos a iconos puede mejorar claridad, peso del sitio y consistencia visual.
- Los detalles de front (estados de botón, loaders, validaciones) elevan la percepción de calidad.
Próximos pasos
- Blog/recursos de Lakestone Legal para SEO orgánico.
- Micro–casos de éxito por servicio (auditoría, mediación, UGPP).
- Dashboard de analítica de conversiones del formulario.
¿Buscas algo similar?
Enithgma transforma sitios institucionales en máquinas de confianza y conversión, con serverless, UX fino y cumplimiento. ¿Hablamos de tu proyecto?
Visita Lakestonelegal.com