Volver a Proyectos Listado de Proyectos

Belvo

Migración de VueJS a WordPress

Fecha de lanzamiento: diciembre 15, 2020

El desarrollo del sitio B2B de Belvo ha sido sin duda unos de los proyectos de 2020 en los que más cómodo nos hemos sentido… y lo sigue siendo.

Estamos encantados de colaborar con ellos, todo siempre muy bien planificado y prácticamente sin sorpresas.

Partimos de un site desarrollado en VueJs y un blog hospedado en Ghost. Se decidió lanzar la web con el mismo diseño, pero en WordPress, debido a que el departamento de B2B de marketing necesitaba tener libertad para modificar el contenido, mejorarlo, etc. Lo único que tuvo diseño nuevo fue el blog, que después de importar los contenidos trabajamos con su departamento de diseño para mejorar la experiencia de usuario, y que visualmente fuera más atractivo.

Mejoras WPO con solo cambio de tema.
Mejora de velocidad al cambiar de tema.

De esta forma crearíamos la web en poco tiempo para que el equipo de marketing B2B pudiera trabajar fácilmente y posteriormente ir mejorándolo cómo hemos ido haciendo.

Una de las cosas que más valoramos en Belvo es la buena comunicación y ambiente que hay en el equipo. Todas las partes intentamos facilitar el trabajo a los demás y buscar el equilibrio entre la parte B2B, diseño y desarrollo.

¿Qué hemos aportado?

Hemos conseguido liberar al equipo tecnológico de Belvo para que se centren en su negocio/producto, trabajando codo con codo para que la gestión y los formularios de HubSpot tengan la gestión más sencilla posible, que lleve menos tiempo su gestión y puedan dedicar más tiempo a mejorar la conversión.

Módulo demos de la API

Creemos que la parte más compleja de toda la web ha sido desarrollar un módulo donde mostrar el funcionamiento de la API.

En el site estaba desarrollado con VueJs, pero decimos hacerlo de cero para mejorar la integración con WordPress, y hacerlo que se pudiera gestionar si fuera necesario. Solo aprovechamos el fichero JSON del que se alimenta. En la home tiene varias pestañas con los diferentes productos, y en cada producto mostrar su funcionamiento. Todo esto con un único módulo en toda la web al que hemos actualizado el diseño, y añadidos productos sin problema, ya que la idea era que fuera escalable y poder modificar fácilmente los estilos.

Nos pusimos manos a la obra, y con un poquito de HTML, CSS y Javascript conseguimos un resultado más que óptimo.

Pasado un tiempo, y con la nueva home, tuvimos que cambiar el diseño y funcionalidad, siendo estos los resultados:

Demostración del funcionamiento de la API en diferentes lenguajes para los productos disponible.
Demostración del funcionamiento de la API en diferentes lenguajes para los productos disponible.
Última versión del módulo escalable

Módulo Use Cases

Otro de los retos fue realizar este módulo de pestañas en la versión desktop y acordeón en móvil, con dos requerimientos indispensables:

  1. Intentar no duplicar código para no retrasar la carga de la página y que fuese lo más óptima posible.
  2. Que el diseño y la usabilidad no sufriera perdida de calidad por el punto anterior.
Módulo de pestañas en desktop
Versión escritorio
Módulo de pestañas en móvil
Versión móvil

Conectar con la API de ofertas de trabajo

Inicialmente, conectamos WordPress con la API de la plataforma Recruiter Flow para mostrar los diferentes posiciones de trabajo publicadas en la página Careers.

Pasado un tiempo se decidió cambiar de plataforma, y tuvimos que adaptar el desarrollo a la API de Ashby

Mejorando la velocidad de carga

En una web, casi siempre, se puede optimizar para que cargue más rápido, aunque depende si merece la pena invertir ese tiempo/esfuerzo para lo que se gana con la mejora.

Nosotros siempre estamos monitorizando la velocidad de carga de las páginas y, cada cierto tiempo, hacemos un análisis profundo. Las web suelen tener vida propia: cambio de diseño, creación de varias páginas por el equipo de contenidos, y los temidos updates de core de Google.

Intentamos, en la medida de lo posible, atacar este problema lo antes posible siempre que merezca la pena, y no tengamos otras tareas más importantes.

Aquí mostramos unas de las últimas mediciones con sus fechas.

Google Web Vitals desde París
Google Web Vitals desde São Paulo

Creación de bloque de Gutenberg para formularios de HubSpot

Gracias a la creación de este bloque, y a Gutenberg conseguimos que el equipo de marketing pudiera generar de una forma fácil y rápida landings para la recogida de leads. También liberamos al equipo técnico del cliente que ya no tenía invertir recursos en la creación de landings. Aquí se puede ver el resultado final.

Ventajas destacadas que obtuvimos:

  • Los formularios se gestiona desde HubSpot
  • El bloque se conecta al formulario de HubSpot a través de su «FormId»
  • Evento configurable para conectarlo con Analytics. Por defecto pone la url de la página donde se encuentra.
  • Y optimizado para que no afecte a la carga de la página, o si tienes varios formularios en la misma.
Bloque de Gutenberg para formularios de HubSpot
Bloque de Gutenberg para formularios de HubSpot
Resultado de PageSpeed en la versión móvil
Resultado de PageSpeed en la versión móvil

… Y seguimos mejorando

Una vez lanzada la nueva web nos pusimos a:

  • Mejorar el menú.
  • Generador de landing.
  • Mejor las páginas existentes.

Seguimos ayudando al departamento de marketing B2B de Belvo para que sean más ágiles en sus campañas.

Feedback del cliente

Luis nos ha ayudado a migrar la web de Belvo a un CMS (WordPress) en un tiempo récord. Es un placer trabajar con él, siempre está disponible, hace que las cosas sean fáciles y para nosotros es uno más del equipo. Aunque a veces el resto sea complicado, siempre aporta soluciones e intenta ir más allá dando recomendaciones de optimización/SEO/UX… Además, nos ayuda a integrar todo con Hubspot.

Muy recomendable, Luis hace que la a veces tediosa gestión de la web, sea fácil y amigable para los equipos de Marketing.

Isabel Cabrero

Isabel Cabrero Head of Marketing - Digital Marketing - B2B SaaS - B2B Demand Generation - Growth