Findasense: Rediseño del Ecosistema Digital Global

El contexto

Findasense es una consultora global de transformación digital. Cuando llegué al proyecto, su web tenía un problema raro de detectar: el Hero principal — el espacio más valioso del sitio — era una nota interna sobre su adquisición por TP Infinity. La marca estaba hablando de sí misma antes de que el usuario entendiera para qué servía.

A eso se sumaba “deuda de diseño”: secciones duplicadas, jerarquías rotas, formularios largos. El sitio informaba, pero no convencía.

Mi reto fue darle la vuelta bajo una premisa simple: el usuario no quiere saber quién eres hasta que entiende cómo puedes ayudarle. No empecé por el diseño — empecé por entender por qué la web no estaba funcionando.

Auditoría y referencias

La auditoría reveló que el 60% de los problemas no eran de pixel, eran estructurales. Cuatro patrones se repetían:

• Secciones que decían lo mismo dos veces. “¿Qué hacemos?” y “¿Qué problemas resolvemos?” vivían separadas pero contaban la misma historia.
• Sin jerarquía visual. Todo competía por la mirada al mismo nivel — H1, párrafos y links se leían igual.
• Callejones sin salida. Desde “Insights” no había forma de volver al Home. El flujo se cortaba.
• Formularios largos. Cada campo extra era un punto de abandono.

Después miré qué estaban haciendo bien las agencias de referencia — R/GA, MRM, GUT, Globant, Huge — y me llevé tres ideas:

• Bold + mayúsculas en hero para sonar con autoridad sin perder cercanía.
• Layouts modulares que escalen sin reescribir CSS cada vez que entra un bloque nuevo.
• Hovers en rojo como acento único, no decoración: la mano que guía al click.

Tres pilares, tres decisiones

Con la auditoría sobre la mesa, reduje el rediseño a tres ejes. Cada uno con una decisión concreta detrás:

1. Claridad. El Hero pasó de “noticia corporativa” a propuesta de valor directa. Si en cinco segundos no entiendes qué hace Findasense, fallé.
2. Confianza. Subí Casos de Éxito y logos de clientes (Coca-Cola, Lenovo, Bimbo) al primer scroll. Lo que antes vivía debajo del fold pasó a ser lo primero que el usuario ve.
3. Conversión. El formulario largo se rompió en cinco pasos de un solo campo cada uno. Menos fricción por pantalla, mismo dato recolectado.

Reorganizar la casa

Reescribí el sitemap invirtiendo el orden tradicional: primero qué hacemos, después quiénes somos. La conversión y el expertise pasan delante; la historia de la empresa, detrás.

Dos decisiones que vinieron con esta reestructuración:

• UX Writing. Las secciones de metodología y cultura se unificaron en “Quiénes somos”. Menos puertas, mismo contenido.
• Navegación persistente. El Header siempre lleva un CTA de contacto y un selector ES/EN/PT visible desde cualquier nivel. Nadie se pierde.

Del wireframe al sistema

Diseñé en Figma con un UI Kit pensado para WordPress 6.4 desde el día uno. La regla: nada que el equipo de desarrollo no pudiera replicar con Gutenberg.

Wireframing low-fi. Mapeé el flujo asegurándome de que ninguna página fuera un callejón sin salida — especialmente noticias y prensa, donde antes el usuario quedaba atrapado.

High-fidelity. Cuatro decisiones que dieron forma al sistema:

• Bloques de color para separar visualmente servicios y casos de éxito sin necesidad de leer.
• Rojo Findasense como acento único — palabras clave, hovers, botones. Nada más.
• Mobile first real: cada componente probado en móvil antes que en desktop.
• Prototipo navegable entregado al equipo interno para testear transiciones y el flujo del formulario antes del handoff.

Design System (UI Kit)

El sistema visual se construyó como una base sólida y escalable: tokens de color, jerarquía tipográfica y componentes consistentes que aseguran coherencia en todo el ecosistema digital y facilitan el mantenimiento en WordPress.

Color

Paleta construida sobre el rojo característico de Findasense como acento único, equilibrada con negro, crema, un azul celeste para bloques tecnológicos y blanco como base limpia.

Tipografía

Una sola familia tipográfica — Montserrat — utilizada en todos los pesos para mantener una voz visual coherente entre headings, body y UI. Mayúsculas en hero y secciones clave para reforzar el tono editorial y la autoridad de la marca.

Recurso de marca: la coma

La coma del logo dejó de ser un detalle tipográfico para convertirse en el recurso visual que articula todo el sistema. La usé como contenedor de retratos, marco para hero illustrations, fondo en testimonios y elemento decorativo. Una sola pieza, muchos roles — siempre con la misma forma, distintos pesos.

Prototipo final

El resultado: una web que cuenta lo que hace antes que quién es. Hero directo, casos de éxito en el primer scroll, formulario sin fricción y una identidad visual coherente de principio a fin.

Recorrido completo · Desktop

Diseñar para que se construya

Como el sitio se implementaría en WordPress 6.4, cada bloque pasó por un check con el equipo de desarrollo: si no se podía hacer con Gutenberg o un constructor visual, no entraba al diseño. Eso protegió la velocidad de carga (WPO) y eliminó el código a medida que iba a costar mantener.

Las revisiones semanales con el equipo afilaron tres cosas:

• El mensaje del Hero — versión tras versión hasta que cualquiera lo entendiera de un vistazo.
• La respuesta táctil de los botones en móvil — más área de toque, feedback más claro.
• La coherencia del multilenguaje — algunos layouts se rompían en portugués por longitud de texto, los reajusté.

Solución y impacto

El resultado es una web minimalista, potente y orientada a resultados que redefine la presencia digital de Findasense.

Entregables

• Audit de UX y Benchmark competitivo.
• Nuevo Sitemap y Arquitectura de Información.
• Wireframes Low y High Fidelity.
• UI Kit completo: Variables, componentes y estilos.
• Prototipo interactivo en Figma.
• Guía de estilo para implementación en WordPress.

Ecosistema digital en vivo

Explora la experiencia diseñada para el ecosistema global de Findasense.

findasense.com

Visitar

Ver sitio web en vivo

Haz clic en la imagen para explorar la web real ↑