Work honest, Eat green es el segundo proyecto final que he desarrollado para el Master en Diseño web y App de LaBasad basado en la creación de un producto digital de ticket restaurante para la cadena de restaurantes Honest Greens. 

Un proyecto con el que he podido aprender en profundidad cómo es el proceso de creación de un diseño web desde el punto de vista de UX y de UI.

Retos principales del proyecto

Tiempo de entrega

Sin duda uno de los retos a los que nos enfrentamos siempre y en el día a día. Casi siempre los tiempos de entrega de un proyecto son bastante ajustados, por lo que tenemos que “correr” o encontrar las soluciones más acertadas con la mayor brevedad de tiempo. Finalmente y tras muchas correcciones ¡llegamos a tiempo!

Nuevo esquema de trabajo

Otro de los principales retos ha sido la elaboración de un Priority Guidelines. A priori puede parecer fácil, pero cuando una sóla persona tiene que enfrentarse a un proyecto de esta envergadura, hay cosas que se te resisten y ésta ha sido una de ellas. Tener que marcar cada una de las partes muy concretas con texto real incluido ha sido una de las cosas más complicadas a hacer en un tiempo tan reducido.

Adaptación de la marca

Una de las cosas más complejas del proyecto fue poder adaptar el estilo de carta de la que dispone la marca escogida. Se trata de la creación de un plato completo, comprendido por 3 fases: 1. Elección de una base; 2. Elección de una proteína o salsa; 3. Elección de una guarnición. A partir de aquí, podemos seguir configurando el menú añadiendo postre, picoteo o bebida.

Desarrollo del proyecto: Comienzo

  • Análisis y comprensión del briefing de cliente: Conocer el proyecto, qué es y cómo debe ser. 
  • Investigación previa: Explorar el sector de ticket restaurante y competencia para conocer otras marcas de ecommerce de comida. 

Competitive Analysis: Realización de un análisis en profundidad de la competencia. Cómo son sus webs, qué aspectos son correctos y cuales podríamos mejorar en este proyecto. 

Con el competitive Analysis obtuve una conclusión clara: Cuantas más pantallas tenga que llegar el usuario para conocer el menú o para poder realizar su compra, mayor será el tiempo en este proceso y por tanto mayores posibilidades de abandono existirán. El producto digital tenía que ser claro, conciso y directo.

Desarrollo del proyecto: Planteamiento

  • Lo primero de todo fue analizar la marca escogida para el proyecto y crear un Moodboard con su identidad.
  • A continuación, realizamos la propuesta de valor y objetivo que queríamos conseguir con el análisis competitivo.
  • Tras tener un análisis bien definido, realizamos el inventario de contenido ¿Cuántas páginas va a tener el proyecto? ¿Cuál va a ser la información imprescindible en cada una de esas páginas?
  • Con los Priority Guidelines comentados anteriormente, conseguimos definir de una manera más estructurada, real y consistente cómo podría ser el resultado final de cada una de las páginas.
  • Finalmente, generamos wireframes prototipados, que nos ayudan a realizar un test de usuario real y conocer qué elementos son correctos y en cuáles nos podemos equivocar. Tras realizar el test de usuario realizamos algunos cambios para desarrollar el proyecto final.

Intenté que este producto digital se pareciera a la carta de Honest Greens, con cada uno de sus pasos. Además buscaba que no hubiera múltiples pantallas para llegar a ver las características de los platos por eso los platos están dispuestos en una galería en forma de carrusel donde el plato seleccionado queda visto en mayor tamaño y con todas sus características. 

En el caso de las salsas y las guarniciones decidí no hacerlo así ya que de un sólo vistazo se ven todos los ingredientes, por lo que no es necesario una vista ampliada. 

Otra de las decisiones fundamentales del proyecto fue que la “cesta” estuviera visible en todo el proceso de compra, de manera que el usuario puede checkear lo que ha incluido en ella. 

En cuanto al proceso de compra, existen dos pasos en los que el usuario puede modificar o eliminar elementos de su compra. Esto facilita la corrección de errores por parte del usuario.

En el proceso de diseño del producto final, se decidieron algunos aspectos que en los wireframe habíamos cambiado tras haber sido testeados con usuarios. 

Por ejemplo, el botón de “entrar” se cambió por “pedir” y se añadió un icono de persona ya que nos dimos cuenta que con este cambio el usuario tendría un mejor acceso a la acción más relevante de esta web: pedir su comida para llevar al trabajo.

Otro de los retos que afrontamos fue la forma en la que el carrusel podía ser movido por el usuario.

La primera opción fue un barra tipo slider que deslizar de izquierda a derecha.

Al realizar los test de usuario, alguno de ellos comprendió la acción pero otros nos contaron la dificultad que veían a la hora de entender que esa barra slider servía para mover el carrusel. Por esta razón, decidimos cambiar la barra por flechas laterales más usables.

Desarrollo del proyecto: Definición

Finalmente, los ejercicios llevados a cabo para dar lugar al producto final han sido:

  • Recopilación de imágenes de producto sacadas de banco de imágenesElemento de lista nº1
  • Creación de un Ui kit y librerías para trabajar en equipo de mejor manera
  • Primeros esbozos del proyecto para dar lugar a la construcción final
  • Creación de Layout para el proceso de Wireframe y de Diseño. 12 columnas vertical con un ancho de 1200px. Cada una de las columnas con 60px de ancho y 40px de espacio entre las mismas.
  • Creación de Layout a 4px para una mejora en los espacios entre textos e imágenes. PONER EJEMPLO

Algunos aspectos que se han mejorado de UX en la propuesta visual final han sido:

  • Una carta más clara para la elección del menú.
  • Una forma de visualizar los productos en carrusel más sencilla.
  • Pequeña explicación del proceso de compra en la home que complementa a los iconos.

Conclusiones del proyecto

Aprendizaje continuo

La base de todo trabajo es el aprendizaje. En cada paso se aprenden cosas nuevas que quizá no podrías haber tenido en cuenta si no te hubieras equivocado antes.

Menos es más

A veces un diseño atrevido o creativo no aporta la solución al proyecto y por tanto no complementa el objetivo.

Test de usuario

El test de usuario es muy importante para poder comprender la usabilidad del producto que estás creando.

Desarrollo UX

Si volviera a realizar el proyecto, dedicaría más tiempo al desarrollo de la parte de UX, ya que la parte UI no fue tan compleja de hacer como pensaba.

Equipo

Una de las cosas fundamentales que he aprendido es que un proyecto como éste se desarrollaría mucho mejor con un equipo multidisciplinar para gestionar mejor el tiempo.

Content Fist SÍ

Content First SÍ, pero con matices: Sí es muy importante definir el contenido desde el inicio ya que además de ayudar a crear una mejor experiencia, facilita la parte de diseño de la interfaz. Sin embargo, creo que no siempre es posible ya que en algunas ocasiones el contenido también se tiene que adaptar al diseño UX y al UI. En definitiva, el contenido debe ser lo primero, pero debemos tener la posibilidad de revisarlo en cada una de las fases que dan vida al producto digital.