Work Honest, Eat Green

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

noun_clock_2154750Created with Sketch.

Tiempo de entrega

noun_List_1297749Created with Sketch.

Nuevo esquema de trabajo

noun_Puzzle_1637959Created with Sketch.

Adaptación de la marca

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

noun_write_2037808Created with Sketch.

Aprendizaje continuo

noun_Cloud_2056474Created with Sketch.

Menos es más

noun_User_2040663Created with Sketch.

El Test de usuario es importante

noun_Mouse_2056518Created with Sketch.

Dedicar tiempo a la UX del producto digital es fundamental

noun_Follow_2037779Created with Sketch.

Cliente y diseñador forman un equipo

noun_iPhone_866251Created with Sketch.

Content Fist SÍ, pero debe ser revisado en las diferentes fases del proyecto

Utilizamos cookies propias y de terceros para que tu navegación sea mucho mejor ¿Las aceptas?