Web/UX/UI
Diseño
Ilustración
Insights Pro Landing
Nueva landing para Insights Pro, una potente herramienta de análisis de la contratación. Aspecto actualizado con nuevos elementos visuales, datos simplificados, nuevas ilustraciones e implementación en Haml/Ruby.
2023
Get on Board
🎁 ¿Qué es Insights Pro? - El Producto
Insights Pro es una herramienta poderosa y completa desarrollada por Get on Board que brinda a las empresas análisis detallados y estadísticas exhaustivas sobre los empleos publicados en su plataforma. Su objetivo principal es ayudar a las organizaciones a optimizar su estrategia de contratación al proporcionar información valiosa y perspicaz sobre el rendimiento de los empleos.
🌟 El Proyecto
Nos enfrentamos al desafío de actualizar la identidad visual de Insights Pro para reflejar de manera más precisa los valores y la personalidad de la marca. Esto implicó un rediseño completo del look & feel, incluyendo la paleta de colores, presentación de la información y elementos visuales.
Además, buscamos unificar la presencia web de Insights Pro en una sola landing dentro del sitio web de Get on Board. Durante la fase inicial del lanzamiento, creamos varias landings utilizando diferentes tecnologías como Webflow y Netlify + 11ty para iterar rápidamente sobre el contenido. Sin embargo, con una narrativa más clara y una visión más consolidada del producto, era el momento de ordenar y unificar todo en una experiencia coherente y centralizada.
Objetivos
Los objetivos del proyecto consistieron en:
- Diseñar un nuevo look & feel que reflejara la intención y los valores de la marca.
- Actualizar el diseño del landing page de Insights Pro con un enfoque fresco y renovado.
- Unificar la presencia web del producto en una sola landing dentro del sitio web de Get on Board.
☀️ El diseño : renovación total
Look & Feel
El principal cambio que hice a la identidad visual del producto fue en la paleta de colores, pasando de un esquema oscuro a un esquema claro, con el objetivo de darle un aspecto más ligero y refrescante. Se incorporaron nuevos colores, como tonos lila y verde claro, que complementan los colores azules y rojos de Get on Board.
Para lograr una apariencia moderna, se utilizaron gradientes sutiles en todas las secciones del landing. El gradiente principal, más llamativo, se encuentra en el encabezado y el pie de página, mientras que otros gradientes delimitan las diferentes secciones del landing, proporcionando una experiencia visual atractiva y coherente.
Parte de esta actualización de la identidad visual del producto fue también crear nuevas ilustraciones que reflejaran los valores de la marca.
Para las nuevas ilustraciones, utilicé perspectiva y sombras para dar una sensación de profundidad. Estas ilustraciones brindan un toque visual único al landing y ayudan a transmitir mensajes clave de manera atractiva.
El elemento más importante de esta nueva landing era la sección que explicaba el reporte de manera más detallada. Para esta sección, reinterpreté y simplifiqué los gráficos del reporte para hacerlos simples de entender a primera vista. Realizé ajustes en la presentación de los datos para destacar los puntos clave.
Estructura y funcionalidad
La página ofrece tres acciones clave enfocadas en la venta del producto. En resumen, los usuarios pueden elegir "Contactar Ventas", "Obtener un sample report" para experimentar el producto de primera mano, o "Ver Perfiles Disponibles" dentro de un paquete predefinido o explorar todos los perfiles disponibles para un paquete personalizado.
Contactar Ventas: Al seleccionar "Contactar Ventas", se abre un formulario donde los usuarios pueden completar su información de contacto. Esta opción desencadena una serie de correo de ventas diseñados para involucrar y ayudar a los posibles clientes. Esta es la opción más directa para las ventas.
Obtener un Sample Report: También representado por un botón de "Más información" en el encabezado, la acción "Obtener un Sample Report" desencadena un correo que contiene un enlace para acceder a un Reporte de Insights Pro de muestra. Esto está destinado a usuarios que desean experimentar el producto de primera mano. El informe de muestra se acompaña de una secuencia de correos de ventas que proporcionan información adicional.
El Sample Report también incluye un banner que anima a los usuarios a comprar el producto completo Insights Pro.
Ver Perfiles Disponibles: Al elegir "Ver Perfiles Disponibles", se abre una ventana emergente que muestra los perfiles disponibles dentro de cualquiera de los 5 paquetes predefinidos. Cada paquete tiene una descripción y una lista de perfiles adaptados a las necesidades comerciales más comunes del usuario.
Además, existe la opción de un 6to "Paquete personalizado", donde los usuarios pueden elegir sus perfiles personalizados. Esta tarjeta se resalta utilizando un fondo degradado y un botón de color diferente, y su ventana emergente muestra los 46 perfiles principales disponibles (sin contar seniority, siendo un total de 125 perfiles si incluimos diferentes seniorities).
Cada modal de perfil incluye un botón que permite al usuario contactar a ventas, siguiendo la misma secuencia que en la acción "Contactar a ventas". La diferencia principal aquí es que esta acción incluye la información del paquete preferido por el usuario.
💻 Implentación
La implementación del nuevo diseño la llevé a cabo directamente en el codebase utilizando Haml y Ruby. Como responsable del front-end, me encargué de implementar el diseño del landing page, mientras colaboraba con otros desarrolladores para agregar la funcionalidad necesaria a los formularios de leads.
Ver sitio final (screenshot) ↓ Ver sitio final (web) →
🧠 Aprendizaje
Durante este proyecto, adquirí valiosos aprendizajes en diversas áreas. Aprendí a gestionar eficientemente la actualización de un landing page, desde la adaptación de la identidad visual hasta la incorporación de nuevos elementos gráficos. Además, tuve la oportunidad de trabajar directamente en el codebase, lo que me permitió mejorar mis habilidades en Haml y Ruby. También gané experiencia en la creación de ilustraciones personalizadas y en la implementación de un diseño adaptable, lo cual contribuyó a mi desarrollo profesional.