Rediseño de sitio web del Institut Paul Bocuse aumenta en 465.4% el engagement

    Dana Cano
    Dana Cano

    Account Manager

    26 jun, 2019 7 min

    Rediseñar un sitio web que ya genera resultados y conversiones, es un desafío que combina las ganas de hacer las cosas bien con la ansiedad por “no arruinar lo que ya funciona”. Pero desafiar retos es una de nuestras especialidades, esta es la historia de ese rediseño. 

    Cuando el equipo de producto del squad que maneja la cuenta del Institut Paul Bocuse planteó, de manera proactiva, rediseñar el site del cliente, lo pensamos dos y hasta tres veces. Sin embargo, a pesar de las dudas, decidimos desafiar el reto.

     

    Estas fueron las razones de peso que nos movieron a hacerlo:

    El desafío

    El Institut Paul Bocuse pertenece a la Corporación Educativa San Ignacio de Loyola la cual maneja los sites de sus productos educativos bajo la misma plantilla: limpia, eficaz, orientada a convertir, pero idéntica para todos lo programas.

    Nuestro cliente es la única sede latinoamericana del renombrado Institut Paul Bocuse, fundado por el chef del mismo nombre en 1990, que actualmente cuenta con seis sedes a nivel mundial.

    En un mercado gastronómico tan competitivo como el peruano, no tenía sentido esconder detrás de una plantilla estándar uno de los principales atractivos de la marca: su identidad.

    Por eso, el equipo propuso rediseñar el sitio web incluyendo el blog interno, para que transmitan la esencia de una marca sofisticada, artística y, sobre todo, gastronómica. Queríamos responder a las necesidades creativas del Buyer Persona y darle más razones para quedarse en la página.

    Durante el proceso de research UX, detectamos la necesidad de orientar el blog hacia la búsqueda. La audiencia de Paul Bocuse es curiosa. De hecho, nuestra principal fuente de tráfico es orgánica y 12 de nuestras keywords están posicionadas en el top 3 de Google. Sin embargo, el usuario no se quedaba en el blog y el buscador interno lo llevaba de nuevo a Google.

    Adicionalmente, el site estaba tan orientado a la conversión, que perdía la oportunidad de compartir información contextual sobre el Institut Paul Bocuse. En resumen, teníamos un sitio web eficiente pero frío, sin personalidad, ni enganche emocional.

    Estos eran los dolores antes del rediseño:

    • Ausencia de identidad y personalidad en el site
    • Un blog que no estaba orientado a la búsqueda
    • Un ambiente que invitaba a la conversión pero no al engagentment
    • No cumplía con las expectativas creativas y artísticas de un buyer muy visual

    La solución

    Para rediseñar este sitio volvimos a la base: estudiamos nuevamente los buyers persona para que fueran nuestra guía durante todo el proceso. Simultáneamente, el equipo de UX hizo un análisis del User's Journey y el User Flow. Esto sentó las bases de todo el trabajo de UI que vendría luego.

    Hicimos un wireframe de baja fidelidad y otro de alta, los cuales fueron testeados con usuarios reales: estudiantes del Institut Paul Bocuse. Los test se hicieron in situ en la sede del cliente, en un ambiente controlado y siguiendo la metodología Growth Driven Design.

    La usabilidad

    Una de las incorporaciones más importantes en usabilidad fue el buscador. La plantilla anterior estaba cero orientada a la búsqueda, mientras que, en el rediseño el protagonista es precisamente el buscador. Esta incorporación fue uno de los insights de mejora que obtuvimos durante la etapa de testeo.

    El objetivo del buscador es alimentar la curiosidad natural del buyer del Institut Paul Bocuse. Durante el testing nos dimos cuenta, de que el buscador funcionaba tanto para las personas que tienen claro qué quieren encontrar, como para aquellos que no sabían por dónde empezar su consulta. Por eso incluimos un placeholder dentro de la barra de búsqueda.  

    Además, incorporamos las categorías como complemento de búsqueda, las cuales, por supuesto, corresponden a nuestros clusters de contenidos.

    redisenamos-el-sitio-web-del-institut-paul-bocuse-y-aumentamos-engagement -vistas-2

    Otro elemento del rediseño, fueron las tarjetas para presentar los blogpost. Innovadoras, distintivas  e interactivas, captaron de inmediato la atención de los sujetos del test. Se validó que las tarjetas fueran leidas por Google como texto y no como imagen para no perder posicionamiento SEO.

    Desde el punto de vista UX se tomaron decisiones como reorganizar los campos del formulario. Desarrollar un diseño descendente y agrupar los campos del mismo tipo. Se hizo un trabajo de UX writing con los botones, CTAs y mensajes de agradecimiento para cuando el usuario haya terminado una tarea dentro del sitio, como descargar un ebook o agendar una cita con el Director. También reducimos los pasos para solicitar dicha cita.

    La estética

    Se trabajó una estética sobria que, sin embargo, no se alejara del buyer adolescente. Queríamos que su estética se correspondiera con quién es el cliente: la escuela de cocina más importante del Perú. Por eso escogimos el negro (sobriedad) y los detalles importantes están marcados con magenta (innovación, arte y juventud).

    Además, incorporamos elementos locales que identifican a la peruanidad, como los ajíes típicos y otros ingredientes gastronómicos. Esto, en un instituto internacional con sedes en seis países del mundo es un distintivo que genera conexión emocional.

    Al interior de los blogspost, complacimos al buyer dándole protagonismo a las fotografías de platos e ingredientes. Cuando dijimos líneas arriba que “volvimos al buyer” nos referíamos justamente a esto: a generar valor en cada una de las interacciones dentro del site.

    El Buyer Persona de Paul Bocuse es un joven que quiere triunfar en el mundo de la alta cocina, creativo, en extremo visual, con ambiciones y expectativas muy altas. Por eso quisimos darle a este rediseño una personalidad única que transmitiera gastronomía y estatus.

    Desde el punto de vista práctico, nuestra meta era lograr una identidad sólida, manteniendo la consistencia de cada vista

    redisenamos-el-sitio-web-del-institut-paul-bocuse-y-aumentamos-engagement

    Las herramientas

    Este es el listado de herramientas que utilizamos para lograr el look and feel y el prototipado:

    Adobe Photoshop: para la edición y preparación de las imágenes a utilizar.

    Adobe Illustrator: para adición y creación de iconografia y elementos gráficos vectoriales.

    Adobe XD: para maquetación y armado de las pantallas, vistas y flujos del microsite y blog en sus versiones mobile y desktop.

    Protopie: herramienta compatible con Adobe XD, funciona para animar de manera muy realista el entorno de navegación natural en un prototipo de página web o app. Su ventaja es que el resultado final es casi real, logrando interacciones muy detalladas para que el usuario explore las diferentes secciones del sitio durante el testeo.

    Instrumentos de testeo (entrevista con usuario): de la mano del UX se preparó una entrevista para usuarios que probaran el prototipo en un espacio controlado. Luego, se le asignó una serie de tareas que debía hacer por sí solo, interactuando con el prototipo. Por último se le hicieron preguntas que iban desde una opinión general del producto, hasta sensaciones en la navegación, extensión de contenido y estética del sitio.

    El proceso

    Durante todo el rediseño nos guió la metodología Growth Driven Design centrada en el usuario y basada en la mejora continua. Esto nos permitió disfrutar del proyecto sin las frustraciones típicas del rediseño tradicional.

    Sabemos que un sitio web no tiene que estar al servicio de caprichos estéticos, tiene que servir a las personas que lo visitan, cubrir sus necesidades. Usamos la experiencia de nuestros usuarios en curso, como insumos para mejorar el desempeño de la web, especialmente en lo referente a búsquedas e interacciones.

    Finalmente, implementamos pequeñas iteraciones a lo largo del rediseño, algunas de ellas se mantienen hasta hoy, porque la mejora continua es un proceso que no acaba.

    screencapture-site-paul-bocuseVista final - Resideño del site

    redisenamos-el-sitio-web-del-institut-paul-bocuse-y-aumentamos-engagement-blog-Vista final - Resideño del home blog

    inside-blog-paul-bocuse

    Vista final - Resideño vista del blogpost

    Los resultados

    Lo que en principio se trató de un rediseño motivado sólo por la necesidad de fortalecer la identidad de la marca y dar una mejor experiencia visual y funcional al usuario, se convirtió en un gran aprendizaje.

    Durante el primer Q del año en curso:

    • Las visitas aumentaron en 47,3%
    • El engagement creció en 465.4%
    • Los ingresos generados por fuentes Inbound incrementaron en 500%

    redisenamos-el-sitio-web-del-institut-paul-bocuse-y-aumentamos-engagement 4

    Los resultados cuantitativos confirmaron la hipótesis inicial del equipo: los usuarios valoran sitios web con identidad única y personalidad atractiva.

    Para nosotros, el gran aprendizaje fue que, contrario a la creencia tradicional de que debes hacer rediseño sólo cuando las cosas están mal, en realidad la mejora continua se trata de esto: seguir trabajando porque siempre hay una nueva versión por alcanzar.

    New Call-to-action

    cerrar