Steakburger, UX & Rediseño web

Introducción

Rediseño completo de la web de Steakburger (clic para ver la web), el cual realicé totalmente por mi cuenta desde las fases de UX hasta su implementación final.

El problema

Estoy seguro de que Steakburger será un sitio de sobra conocido por muchos de vosotros y vosotras, buen producto, buena localización y un gusto exquisito en la decoración de sus locales… Entonces, ¿Qué podía fallar?

Tras entrevistarme con los stakeholders recibimos las primeras impresiones que tenían sobre su web actual, querían actualizarla y darle un aire más moderno y fresco, incluir más fotografía de producto y darle una vuelta al responsive, pues habían notado que la mayoría de visitas venían a través de terminales móviles y la web no terminaba de ser del todo friendly en estos dispositivos.

Manos a la obra

Tras realizar una auditoría de su sitio web, empecé a detectar posibles inconsistencias e incoherencias, tanto de UX como de UI (y branding), no había ningún de jerarquía de contenidos ni de componentes, todos los CTA´s tenían la misma importancia, la arquitectura de la información era muy mejorable, y además la tipografía utilizada, el tono y la voz no eran las mismas que se usaban en redes sociales.

UX

Tras tener varias reuniones con los stakeholders, se definieron los primeros objetivos medibles, se realizó un benchmark exhaustivo, se sacaron insights y se hicieron varias entrevistas de guerrilla a potenciales usuarios, tratando de descubrir que esperaban al entrar a una web como esta. Las necesidades/objetivos fueron las siguientes:

• Ver fotos del producto
• Poder encontrar la carta facilmente (con precios, por supuesto)
• Poder reservar rapidamente
• Y como dato destacado, más del 90% de los entrevistados visitaba/reservaba desde dispositivos móviles

Data driven design

Decidí incluir un snippet de código de Yandex metrica, el cual nos daba la oportunidad de obtener grabaciones de sesión, mapas de calor, de scroll etc etc, con el fin de analizar como usaban los usuarios su web tal y como estaba, pues seguro que obtendríamos pistas y oportunidades de diseño, al ver cuanto tiempo pasaban en la web, cuales eran los puntos de fuga o puntos de dolor.

¿Qué fue lo que detecté?:

• La página era abandonada practicamente de forma instantánea cuando los usuarios iban a la página de carta y no solo no veían las fotos de los platos, si no que intentaban clicar en el nombre de ellos con el fin (imagino) de comprobar si se abría alguna foto o si se les redirigía a alguna página, pero no ocurría nada.
• Pero no solo eso, a lo largo de toda la web, las fotos eran excasas y no tenían la calidad para hacer justicia a sus productos, por lo que el usuario no se sentía atraído a primera vista, además, con toda la oferta y la competencia que hay ahora mismo en Madrid a nivel hamburguesero, teníamos que atraparle por los ojos tanto como pudiéramos, sobre todo si tenemos en cuenta el tópico de que los usuarios hoy en día no leen, si no que escanean, y sobre todo se fijan en las fotos (quizá uno de los culpables de esto sea Instaejemm..).
• Lo mismo pasaba con los restaurantes, sin duda es uno de los puntos fuertes de este negocio (los locales son preciosos), pero no había fotos y las que había, no estaban clasificadas. No podías adivinar a cual de todos sus restaurantes pertenecían.
• La web era visitada por muchos usuarios extranjeros, era necesaria una versión en inglés sí o sí!

Otro de los problemas, era que no había ni voz, ni tono. En algunos textos se hablaba de usted, en otros de tu.. no había una identidad en los contenidos y efectivamente, la adaptación a mobile dejaba mucho que desear, un drama cuando vimos que más de un 80% de usuarios visitaban la web desde dispositivos móviles.

Conclusiones

La web no convertía, y mucho menos para todo lo que creíamos que podía convertir. No se producían reservas, la mayoría las recibían por teléfono ya que vimos que los usuarios no lo llegaban a hacer desde su página de contacto, posiblemente prefieresen buscar en google “Steakburger+dirección” para conseguir el número del local concreto. Como imaginaréis, recibir este grueso de reservas por teléfono implicaba mayor gestión para ellos y menos agilidad para todas las partes.

Soluciones

Después de poner estos problemas en común con los stakeholders y contarles nuestra estrategia, les convencimos facilmente de hacer un rediseño completo, de “tirar” la web que tenían y crearles una nueva “desde cero” (aunque desde cero nada, teníamos muchos datos).

Para ello, no solo me limité a solucionar los problemas de su anterior web, si no que intenté dotar la web con ese aire fresco y moderno que se nos pedía desde un principio (Los colores y tipografía que puedes ver hoy, tanto en la web como en sus redes, fueron elegidos por un servidor :)

Tras todo este trabajo de UX/UI, acabé el proyecto desarrollando el sitio web, para el que trabajé mano a mano con el equipo de audiovisuales para conseguir el efecto wow a la par que informativo que estabamos buscando, dándoles indicaciones para fotos y vídeos.

También con el equipo de marketing, los que ya estaban trabajando en la voz y tono de la marca a través de redes sociales, trabajar mano a mano con ell@s fue genial, participé en campañas de marketing y tuve oportunidad de ponerme en la piel de ux writer, lo que me encantó.

Incluimos un apartado de reservas, no solo con fotos de los restaurantes si no que también les propuse incluir visitas virtuales como aporte de valor, todo ello con el fin de aumentar la visibilidad de esos locales tan bonitos, y aumentar por supuesto el atractivo, la conversión y las reservas (con un cta bien accesible en cada apartado del restaurante, como no!).

Por supuesto, hicimos la adaptación a la versión inglesa, con la ayuda de mis compis de traducción.

Iteración

Cuando la web estuvo lista, los resultados se volvieron a medir, con test de usabilidad y herramientas de analítica, y para nuestra alegría, tras ajustar un par de tamaños y cambiar un par de CTAs de sitio, tanto la experiencia en la web, como la conversión mejoraron notablemente, por lo que tanto los stakeholders como los usuarios quedaron muy contentos con el resultado.

Tristemente, no guardo capturas de la web “vieja” y, también tristemente desde mi marcha de la agencia con la que trabajaba cuando hice la web, otras manos han pasado por ella y se han añadido multitud de componentes que no siguen del todo las bases que se sentaron, pero la versión en inglés que es la que os dejo, ha sufrido menos estas incosistencias :)