Trabajar con Invopop fue un placer para nosotros, en gran parte gracias a trabajar mano a mano con Juan Moliner, co-fundador de Invopop, su energía desbordante y su creatividad nos llevó al siguiente nivel. Nuestros principales objetivos pasaron por mejorar el diseño de ciertas páginas/componentes para enriquecer la experiencia de usuario y gestionar el CMS con más de 100 items en Webflow, utilizando múltiples referencias entre colecciones y conectándolo con Notion como base de datos principal a través de WhaleSync.

Mejoras en el diseño

Para mejorar el diseño de Invopop, nos enfocamos en crear páginas y componentes intuitivos basándonos en la identidad visual establecida. Rediseñamos páginas relevantes como la Cobertura por Países, las Guías de Facturación con el mapa interactivo con paths SVG que luego explicaremos en detalle, y la página específica para cada Tecnología de Cobertura, haciendo que el contenido fuera mucho más accesible. También añadimos elementos como la Tarjeta de Seguridad GDPR y la sección de las Industrias en la página de inicio, para que los usuarios pudieran acceder y entender rápidamente aspectos importantes de Invopop.

De Notion a Webflow con WhaleSync

Nuestra integración entre Notion y Webflow fue bastante granular. Creamos una estructura CMS completamente automatizada. Configuramos un proceso en el que Notion actúa como base de datos principal, donde el cliente actualiza los datos, y gracias WhaleSync sincronizamos cada item del CMS con sus respectivos campos. Eso permite actualizar componentes como historias de éxito de clientes, costes locales de facturación electrónica y datos específicos de cada país, por ejemplo. Todo se sincroniza de manera automática, lo que permite que la página web refleje nuevos datos de forma dinámica con un mínimo esfuerzo manual del equipo de Invopop desde Notion. Esta solución ayuda al equipo de Invopop a centrarse en lo que realmente importa sin grandes quebraderos de cabeza con Webflow.

Mapa global interactivo con SVGs desde el CMS

El mapa interactivo que creamos es una de las características de las que más orgullosos nos sentimos. Cada país del mapa está configurado como un ítem del CMS, conectado a Notion, y contiene información específica como la información de facturación y regulaciones. Los paths SVG y las coordenadas XY permiten una ubicación precisa en el mapa, mientras que las opciones de filtro permiten a los usuarios navegar por etiquetas como capacidades de facturación B2B, B2C o B2G. Las funciones interactivas del mapa, como las animaciones al pasar el cursor y las superposiciones, crean una experiencia inmersiva para los usuarios que exploran las regulaciones de facturación a nivel global. Con este enfoque basado en el CMS, el mapa es fácil de escalar y fácil de actualizar.

Multi-lenguaje con Webflow Localization

Usando la función de localización de Webflow, tradujimos todas las páginas e items del CMS de inglés a español. Aunque el proceso fue complejo y en su mayoría manual, ahora permite que el contenido de Invopop sea "amigable" para el SEO en ambos idiomas, abriendo el camino para la internacionalización de la marca.

Conclusión

Hicimos que la web de Invopop tenga una experiencia de usuario aún más centrada, con un sólido CMS que permite que la página web escale y sea auto-mantenible mientras Invopop siga creciendo. A través de este proyecto, profundizamos en nuestra capacidad para desarrollar componentes interactivos y estéticamente acordes con la identidad visual establecida, así como en la construcción de una página web sincronizada con Notion a través de WhaleSync. Además, nos adaptamos de forma natural a la forma de trabajar de Invopop, utilizando Slack para la comunicación y entregando tareas bajo demanda garantizando una colaboración fluida y una gestión eficiente del proyecto.