Belvo
Migración de VueJS a WordPress
Fecha de lanzamiento: diciembre 15, 2020
Sumario
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.
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:
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:
- Intentar no duplicar código para no retrasar la carga de la página y que fuese lo más óptima posible.
- Que el diseño y la usabilidad no sufriera perdida de calidad por el punto anterior.
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.
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.
… 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.
