Bootcamp Diseño UX-UI

BOOTCAMP Diseño UX/UI

Como parte del curso de Diseño UX-UI de Talento Digital para Chile, impartido por Adalid, hemos sido desafiados a encontrar una empresa para la cual queremos realizar un proyecto de diseño UX-UI.

En este contexto, mi equipo y yo hemos elegido el restaurant "Almacén de Pizzas". Almacén de Pizzas es una empresa de origen argentino que se distingue por su receta tradicional italiana. Cuentan con 12 sucursales en Argentina y también tienen presencia en Bolivia, Perú, Paraguay, Uruguay y, por supuesto, en Chile. Para este proyecto, nos enfocaremos exclusivamente en la sucursal de la pizzería ubicada en Chile.

A lo largo de este proyecto, les mostraré la página web actual y el prototipo que hemos desarrollado como resultado de nuestras investigaciones en diseño UX. Además, presentaré el prototipo final que hemos creado.

La pagina Actual si bien cumple con el objetivo de dar a conocer sus productos, encontramos que la información ingresada es poco clara y confusa en algunos aspectos lo que conduce a errores innecesarios a los usuarios que busquen disfrutar una deliciosa pizza.

Nos concentramos en el Medium User porque es el tipo de usuario que más seguido utiliza APPs de pedidos de comida o paginas webs para poder disfrutar comida rápida. La mayoría de estos consumidores y usuarios, piden pizza a domicilio para disfrutar antes del "carrete", disfrutar de alguna pelicula o momento junto a amigos, pareja o familiares.

El caso de pizza franuí es especial, ya que es una pizza dulce y en la pagina original, en el menú, estaba en la sección de postres, lo que podría generar condición y llevar a errores o desconocimientos del usuario.

A raíz de lo anterior nos pusimos a trabajar para realizar un Card Sorting específicamente al menú del sitio, los resultados reflejados en la imagen de arriba nos da a entender que a la mayoría de las personas testeadas pusieron a la pizza franuí en la sección de pizzas.

Ante esto se nos ocurrió reordenar el menú y colocar a la pizza frauní en la sección de pizzas de la pagina, pero a su vez dejar a la pizza en postres. De esta manera se encontraría en dos sectores del menú y buscamos testear con un tree testing los cambios que realizamos.

A los usuarios se les dio la tarea de realizar la compra de la pizza Franuí y los resultados del tree testing muestran que el 67% de los usuarios tuvo éxito en la tarea, el 17% un fallo directo, 8% fallo indirecto y un 8% no realizaron la tarea.

Con esto nos dimos cuenta que el cambio tuvo un resultado positivo, por lo que resolvimos ingresar ese cambio a las propuestas para ingresarlo en la pagina final.

Propuesta de Baja

Para realizar la propuesta de baja, todos los miembros del grupo realizamos propuestas separadas, de eso tomamos caracteristicas de cada una y lo logramos ensamblar en un solo prototipo, eficientes y con los cambio hechos con los resultados de card-sorting y tree-testing.

Propuesta de Alta Desktop

Este es el resultado de nuestro trabajo, demostrado en un prototipo de alta en la versión de escritorio, fue un trabajo complejo pero muy satisfactorio.

Esta es la versión móvil del sitio, fue un poco mas sencillo la adaptación de la versión de escritorio a la de dispositivos mas pequeños.

El sitio tiene una vista distinta dependiendo del usuario, las personas que se registren en la pagina la barra que se encuentra arriba del navbar se torna de un tono rojizo, además los usuarios al registrarse en el sitio, pueden ingresar un domicilio al que constantemente enviar pizza, lo que hace el proceso de compra más ágil y rápida.

En código, lo hicimos principalmente en HTML y CSS, nos preocupamos en que esté buen identado, con comentarios para hacerlo fácilmente editable y escalable a otras tecnologías como React.

En el UI Kit, mantuvimos en gran medida los colores con que ya contaba el sitio web original de Almacén de Pizzas, solo le añadimos algunas tonalidades de los colores ya existentes.

Resultado Código