Una web para convertir visitas en clientes

Overview

INLOC Robotics es una startup española de ingeniería, fundada en Barcelona en 2014, especializada en el desarrollo de soluciones de robótica, automatización y control. Cuando comenzó el proyecto, su web había quedado desactualizada y no reflejaba la evolución de la empresa ni de sus productos, además de presentar una navegación poco intuitiva.

El reto

El equipo de ventas evitaba dirigir a los clientes a la web antigua porque mezclaba el producto que quería vender con los proyectos de ingeniería de INLOC y resultaba confusa. El objetivo principal era centralizar la atención en un solo producto, SEWDEF.

Como objetivos secundarios, la web debía vivir en un CMS para que el equipo comercial pudiera actualizar contenidos de forma autónoma. Además, la plataforma seguía en desarrollo, así que no había pantallas reales del producto que mostrar: el diseño tenía que transmitir igualmente los argumentos de venta y toda la información que el cliente necesitaba para decidir.

Investigación

El briefing no me pedía que rediseñara la web antigua de INLOC, sino que creara una web comercial para vender un producto en concreto. Como ya llevaba tiempo trabajando en el rediseño de la plataforma interna, conocía bien la parte técnica, pero desconocía los argumentos de venta.

Escuchar a ventas

Hablé con el equipo de ventas para entender qué necesitaban de la nueva web y que el diseño respondiera a su visión comercial. De ahí salieron los objetivos clave: una web sencilla que mostrara el concepto sin saturar al visitante, capaz de hablarle a tres perfiles de cliente distintos sin perder una identidad de producto única, y que funcionara como puerta de entrada directa a la plataforma, no solo como escaparate.

Perfiles de usuario

Para hacer tangibles estos hallazgos, creé perfiles de usuario a partir de esas reuniones, que me dieron una visión clara del usuario objetivo y guiaron mis decisiones de diseño.

Análisis de mercado y competencia

Exploré el mercado actual y las webs comerciales de la competencia que trabajaba con plataformas de inspección de alcantarillado. A través de este análisis, pude identificar problemas y oportunidades clave.

Fortalezas: Todas comunican credibilidad con cifras grandes y concretas, casos de estudio cuantificados con clientes reales y testimonios con nombre, cargo y empresa que dan prueba social inmediata, además de segmentar claramente el contenido por audiencia.

Debilidades: Algunos reparten el mensaje entre varios productos, muchas webs se ven anticuadas o impersonales, y varias están más orientadas al soporte técnico que a la venta.

Oportunidades: Diferenciarse con una landing moderna orientada a conversión, apostar por la personalización y la participación del usuario, y replicar el concepto de demo que ya funciona en el sector.

Amenazas: La prueba social con cifras y casos cuantificados es difícil de igualar sin datos propios todavía, los testimonios con nombre y cargo dan a la competencia una credibilidad instantánea que SEWDEF no tiene en su lanzamiento, y captar la atención del cliente frente a competidores ya asentados en el mercado no será sencillo.

Inspiración

Para empezar a aprender las mejores prácticas del sector, recopilé referencias de otras landing para explorar patrones de estructura y estilo: heros con paneles de datos, tiras de logos de confianza y secciones de beneficios apoyadas en capturas de producto. Las organicé según lo que observé y analicé detenidamente lo que hacen los competidores.

Conceptualización

Con la investigación ya realizada tocaba definir los contenidos, organizarlos y traducirlos en una estructura clara para la web. Para eso, elaboré un documento con todas las secciones candidatas y lo revisé con el equipo de ventas, validando en cada conversación si merecía la pena incluirlas y qué texto debía llevar cada una.

Con las secciones ya validadas y el contenido de cada página definido, cree la arquitectura de la información y los wireframes de baja calidad para garantizar una estructura clara e intuitiva, que organiza las páginas de forma lógica y refleja la sencillez que pedía el equipo comercial.

Diseño

Mientras trabajaba en la creación de una buena página comercial, me embarqué en una aventura creativa. Probé muchos diseños y dibujos diferentes, y experimenté con el tamaño de las palabras. Pero a medida que profundizaba en el proyecto, me di cuenta de lo complicado que era lograr que todo encajara bien y, al mismo tiempo, que la información importante destacara.

Iterar para encontrar el camino correcto

Con la dirección de ilustración ya definida, monté distintas versiones completas de la página para presentarlas a mis superiores. El cambio era evidente: la que incorporaba la ilustración transmitía mucho más carácter propio y diferenciaba a SEWDEF frente a una landing genérica, mientras que la versión sin ella se apoyaba solo en tipografía y color y perdía esa identidad.

Ver prototipo en Figma →

Haciéndolo único

Antes de decidir la dirección visual, estuve explorando distintas fotografías, pero al final escogí la ilustración. Miré diferentes estilos y enfoques buscando la opción perfecta y, aprovechando mis conocimientos de diseño gráfico, acabé haciendo las ilustraciones yo misma.

Desarrollo

Ya tenía experiencia trabajando con WordPress, pero nunca había usado Elementor. Lo elegí porque encajaba con uno de los objetivos del proyecto: que el equipo comercial pudiera editar la web sin depender de desarrollo. Tuve que aprender la herramienta desde cero, entendiendo su sistema de secciones, columnas y widgets para poder construir una web tan cuidada como el diseño de Figma.

El siguiente reto fue trasladar ese diseño a pantalla real, cuidando cada espaciado y tipografía para que el resultado fuera fiel al diseño en cualquier dispositivo. Además, la web debía funcionar en varios idiomas, así que incorporé y organicé los textos en español e inglés, manteniendo la misma estructura y coherencia visual en ambas versiones.

Aunque también diseñé las pantallas mobile en Figma, Elementor ya gestiona el comportamiento responsive de cada sección de forma automática. Mi trabajo se centró sobre todo en especificar el tamaño de las tipografías en cada punto de ruptura, para que la jerarquía visual y la lectura se mantuvieran igual de claras en pantallas pequeñas que en desktop.

Resultados

El rediseño de la página comercial de SEWDEF permitió alcanzar los objetivos del proyecto y sentó las bases para escalar y seguir experimentando en el futuro, posicionando a SEWDEF a la par de grandes competidores.

El equipo de ventas ahora comparte un solo enlace centrado en el producto, sin confundirlo con los proyectos de ingeniería de INLOC, y puede actualizar contenidos por su cuenta sin depender de desarrollo. Los futuros clientes, por su parte, encuentran toda la información que necesitan para decidir antes de pedir una demo, reconocen a SEWDEF como marca propia gracias a la ilustración, y pueden acceder al contenido en varios idiomas desde cualquier dispositivo.

Retrospectiva

En un proyecto como este, me enfrenté a numerosos comentarios, resistencias y la necesidad de lograr consenso entre las distintas partes interesadas. La lección más importante que aprendí fue aceptar todas las aportaciones y cambios sin perder de vista los objetivos del proyecto ni la definición del problema. Los comentarios, en muchos casos, contribuyeron a mejorar el diseño.

También aprendí que aunque solemos apegarnos a nuestras ideas, es fundamental recordar que no todas tendrán éxito, es crucial no involucrarse emocionalmente en exceso. Si el entusiasmo inicial parece alto, sin información clara, es necesario dar un paso atrás, realizar cambios uno a uno y llevar a cabo experimentos.

Diseñar la web comercial de SEWDEF fue una aventura increíble, y estoy agradecida de haber podido trabajar en tantas cosas y aprender una herramienta nueva.