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?

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:

  • 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.

  • 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í!

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).

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.

UX/UI Designer, Web designer & Weird ilustrator http://charliedenova.es

UX/UI Designer, Web designer & Weird ilustrator http://charliedenova.es