Fresh Market: Mercado de Alimentos Perecibles

De Casiopea


TítuloFresh Market
Tipo de ProyectoProyecto de Taller
Palabras Claveapp
Período2018-2018
AsignaturaTaller de Diseño de Interacción,
Del CursoTaller de Diseño de Interacción 2018
CarrerasDiseño, Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property., Diseño Industrial"Diseño Industrial" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Camila Benavides, Belen Varas, Consuelo de la Maza, Belen andrea Varas
ProfesorHerbert Spencer, Rodolfo Pinto

Primera Etapa: Articulación

Definición de Objetivos

Para iniciar con el proyecto se define el grupo específico de personas para el que se va a diseñar. Se tiene como objetivo el mercado de alimentos perecibles, tomando como escenario los mercados, las ferias y las verdulerías. Se propone investigar la relación vendedor-cliente.


Primer Acercamiento

Archivo:EntrevistadeAcercamiento.pdf

La primera salida se realiza al Mercado Cardenal para dar cuenta de los problemas que son evidentes en primera instancia. Se realiza una primera entrevista con preguntas generales para acercarse de a poco a las necesidades de los usuarios y los puntos débiles de la interacción vendedor-cliente.


Registro

Como método de registro se utilizan fotos y croquis.

Relaciones

Appmercado7.png


Mapa de Empatía

Mapa de empatia .png

Comparación de Precios

Mercado y Competencia

Tablapreciosappmercado.png

Usuarios y Método de Investigación

Luego de observar las relaciones que se dan en el Mercado se definen los posibles usuarios para el sistema a diseñar:

VENDEDORES

  1. Mercados
  2. Ferias
  3. Verdulerías
  4. Emprendedores

Método de Investigación: Entrevista Semi Estructurada


CLIENTES

  1. Dueños de Casa
  2. Estudiantes
  3. Instituciones

Método de Investigación: Encuesta Online

Segunda Etapa: Descubrimiento

Investigación

Se procede a realizar los dos métodos de investigación. Ambos métodos se construyen en Google Docs; la entrevista se imprime y cada integrante del grupo sale a distintos locales de venta para abarcar lo más posible. Por otro lado la encuesta se publica en distintas redes sociales como Whatsapp o Facebook y se utilizan los contactos como recurso para difundirla.

Se presentan los datos obtenidos más relevantes.


Entrevista Semi Estructurada: Vendedores

Archivo:EntrevistaVendedorPreguntas.pdf

Archivo:EntrevistaVendedorRespuestas.pdf


Appmercado8.png


Appmercado9.png

Encuesta Online: Clientes

Archivo:EncuestaClientesPreguntas.pdf

Archivo:EncuestaClientesRespuestas.pdf


Appmercado10.png
Appmercado11.png

Definición del Problema de Negocios

Se definen los problemas más importantes a resolver.

1. VENDEDOR

Falta de publicidad para atraer más clientes La gran mayoría de los locales de venta no cuentan con publicidad de ningún tipo, sus clientes simplemente llegan solos o a través de comentarios entre conocidos. Se entiende entonces que principalmente son clientes que viven cerca al local.

A través de la aplicación los comentarios y valoraciones serían accesibles a cualquiera que busque información. El vendedor podría publicitar rápidamente su negocio y poner todos los datos necesarios de sus servicios incluido lo necesario para el delivery. La publicidad en cuestión podría ser filtrada por los usuarios según cantidad de estrellas o localización.


2. CLIENTES

Falta de información de locales y productos Muchos clientes no conocen la cantidad de locales que venden productos perecibles cerca de su casa y mucho menos aquellos emprendedores o productores que no cuentan con locales físicos. Por otro lado también existe una desinformación con respecto a la amplia gama de productos en el mercado global; tipos, usos, formas de mantención, recetas, entre otros.

La aplicación comunicaría a los clientes con vendedores de cualquier tipo sin importar si estos cuentan con locales o no.

Segunda Etapa: Síntesis

Primera Propuesta

Tomando en cuenta los resultados tanto de la entrevista como la encuesta se desarrolla una primera propuesta que consiste en una aplicación que tiene como principal objetivo conectar al vendedor y al cliente de una manera mucho más global, utilizando a su vez un sistema de localización y valoraciones que ayuda a los usuarios a encontrar los locales más cercanos a sus hogares tomando en cuenta la calidad y el precio.


Conceptos

  • Geolocalización de puntos de venta cercanos
  • Comparación de precios de los distintos negocios
  • Búsqueda de precios más económicos
  • Valoraciones de los usuarios
  • Publicidad de los negocios
  • Servicio Delivery


Appmercado12.png

Usuarios

  • Gente joven con niños chicos
  • Gente que no tiene tiempo
  • Personas a las que le da lata salir de la casa
  • Mujeres adultas dueñas de casa
  • Dueños de negocios
  • Productores
  • Estudiantes
  • Gente que no maneja
  • Emprendedores
  • Estudiantes con trabajos de emprendimiento


Modelo

Se desarrolla un modelo del negocio desde la síntesis de los contenidos.

Primera Versión

Appmercado13.png

Hasta aquí el contenido de la primera presentación.

Archivo:Presentación Grupo Epsilon 1.pdf


Segunda Versión

MÓDULO CONSU.png

Personas y Escenarios

A partir de lo que se extrajo de la entrevista y la encuesta se realizó un listado de los principales usuarios de la app. Se toman algunos casos y se transforman en personajes específicos dentro de un escenario de uso de la app, y además se plantea cómo esta puede solucionar sus problemas.


Clientes

calce calce

calce calce

calce calce

Vendedores

calce calce

calce

Viñetas

Viñeta.png

Afinaciones

Benchmark: Aplicaciones de Ventas

Archivo:TablaBenchmarkVentas.pdf

Antes de comenzar con la maquetación de la app, se realiza un estudio de mercado de las grandes aplicaciones/sitios de ventas, que funcionan tanto para pc como smartphone. Estas apps son gigantes y si bien no están a un nivel de comparación con el proyecto tienen en común que todas funcionan bajo estándares globales en lo que a ventas y experiencia de usuario refiere. Forman parte de la competencia en lo que respecta a ventas a precio económico y delivery.

Se estudia: Wallapop, Amazon, Alibaba, Aliexpress, Etsy, eBay


Se analizan 6 aspectos claves de la UX de las app en puntajes de 0-4, los aspectos se dividen en categorías de preguntas.

  1. Usabilidad
  2. Utilidad
  3. Contenidos
  4. Navegación
  5. Estética
  6. Ayuda

Cada categoría tiene 6 preguntas, por lo que cada sitio puede tener un máximo de 24 puntos por categoría. Finalmente se exponen los gráficos de cada categoría y se puede observar las fortalezas de cada sitio/app.

Usabilidad

Registro
Puntajes
Graficoappmercado1.png

Utilidad

Registro
Puntajes
Graficoappmercado2.png

Contenidos

Registro
Puntajes
Graficoappmercado3.png

Navegación

Registro
Puntajes
Graficoappmercado4.png

Estética

Registro
Puntajes
Graficoappmercado5.png

Ayuda

Registro
Puntajes
Graficoappmercado6.png

Generales

El sitio/app mejor situado en el mercado en términos de Experiencia de Usuario es Aliexpress, seguido de eBay y Alibaba en tercer lugar.

Graficoappmercado7.png

Sugerencias

Se abstrae una lista de sugerencias para la construcción de la app a partir de lo obtenido en los resultados del benchmark.

  1. Permitir al usuario navegar por el sitio sin necesidad de hacerse una cuenta
  2. Indicar al usuario de manera completa los errores que comete, dónde se encuentran y cómo solucionarlos
  3. El sistema debe ser adaptable a las diversas plataformas de uso
  4. Debe permitir un feedback entre los usuarios (valoraciones)
  5. Debe tener sistema de predicción en todos sus buscadores
  6. Entregar información completa acerca de los productos, el vendedor y el local de venta
  7. Jerarquizar contenidos para el mayor entendimiento del usuario
  8. Permitir al usuario personalizar su búsqueda mediante filtros
  9. Permitir la libertad de navegación para el usuario
  10. El usuario debe saber siempre dónde está y dónde estuvo
  11. El sitio debe tener una estética minimalista y simple sin exceso de información gráfica
  12. No poner publicidad extra
  13. Utilizar iconografía que minimice la carga de memoria del usuario
  14. El sitio debe contar con una completa sección de ayuda siempre accesible para el usuario
  15. El sitio debe contar con una completa sección de ayuda siempre accesible para el usuario

Tercera Etapa: Ideación

Mapa de Navegación

Primera Propuesta

Error al crear miniatura: Archivo más grande que 25 MP

Mapadenavegacionapp2.png

Segunda Propuesta

Error al crear miniatura: Archivo más grande que 25 MP

Mapa de navegacion2.png

Barras PC

Barrasappcomputador.png

Barras Smartphone

Barras CEL.png

Tercera Propuesta

Mapa hecho en draw.io

Mapa de Navegación .png

Mapa de Clases (1).png

Arquitectura de la Información

Archivo:PaperFreshMarket.pdf

Wireframes

Beneficios

Compra

Venta

Sesión

Prototipo Funcional

Se realiza un primer prototipo funcional con los wireframes en la aplicación InVision. Este primer prototipo se puede probar en el celular y así revisar el tamaño de las pantallas, imágenes, tipografía, y corregir lo que sea necesario.

https://invis.io/VBJJY8WY2C4#/299463253_Pagina1

Hecho para pantalla de iPhone 6

Cuarta Etapa: Implementación

Diseño Visual

Para el logo de la aplicación se piensa en un color llamativo y que hiciera buen contraste con las letras, se realizan pruebas con naranjo y finalmente con rojo. Se selecciona el último color y se propone utilizar también en partes clave pero sin abusar para no sobrecargar la app.

Dado que la aplicación contiene muchas imágenes de los productos se propone un fondo blanco para que sean las fotos las que destaquen, pero se piensa en diferenciar las barras con un color sutil.

Para las imágenes de la aplicación se utilizan de frutas, verduras y especias solo en las secciones de la página principal para poder diferenciarlas y que aparte del nombre el usuario sepa a qué esta accediendo. Las imágenes generales de la app no corresponden a productos sino más bien a campos, haciendo alusión al origen de los productos y a lo fresco.


Maquetas

Colores

Logo y Botones: #D7483F

Barras: #EFEEEE

Fondo: #FFFFFF

Mensaje de verificación: #87bd39


Tipografía

Raleway

Títulos: Medium 24 pt

Subtítulos: Light 18 pt

Texto: Light 14 pt

Inicio Sesión y Filtros: Light 12 pt


Beneficios

Primera sección de la aplicación en la que se le permite al usuario acceder a información acerca de los alimentos pero relacionada con los beneficios que tiene para la persona ya sea estéticamente o mediante la salud. El usuario puede seleccionar si sus intereses corresponden al cuidado personal o a la parte de alimentación.

¿Qué puede encontrar el usuario en Alimentación?

Todos los datos acerca de vitaminas y nutrientes que deberían estar presentes en nuestras comidas o ser adquiridos de alguna forma. Aparte de la información el usuario puede acceder a una lista de los alimentos que contienen tal vitamina o nutriente, desde donde el usuario puede apretar cualquiera de los productos de la lista y la aplicación lo redirige automáticamente a la sección de Ventas de ese producto específico. De esta manera se logra una conexión entre ambas secciones de la App.

¿Qué puede encontrar el usuario en Cuidado Personal?

El usuario puede acceder a todo lo relacionado con el cuidado del cuerpo, ya sea dietas, remedios caseros o estética. Además el usuario puede compartir sus propias recetas y guías, relacionándolas con los productos que se encuentran en la app.

Compra

Segunda sección de la aplicación en la que se le permite al usuario comprar productos, divididos en 4 grupos; frutas, verduras, especias, canastas. Cuando el usuario accede a uno de los grupos se le muestra una lista de todos los productos que se ofrecen en la aplicación en orden alfabético. El usuario busca y al seleccionar el producto que busca se le da la posibilidad de filtrar por ubicación, precio y valorizaciones, haciendo que la búsqueda sea más personalizada en pos de mejorar la experiencia del usuario.

Al acceder a un producto específico se le muestra al usuario todos los datos necesarios; nombre de la tienda/vendedor, contacto, ubicación, descripción del producto, datos acerca del delivery, valoraciones de otros usuarios, opción de agregar a favoritos, opción de abrir directamente en el mapa, y siguiendo la línea de hacer la búsqueda más personalizada se le permite al usuario acceder desde el mismo producto al perfil de la tienda/empresario, así puede ver datos más específicos y también una lista de todos los otros productos que el mismo vendedor ofrece.

Para que el usuario esté seguro de lo que compra, en el carrito se le da la posibilidad de revisar todos los productos que agregó con su precio al lado y el precio agregado de delivery, puede modificar la cantidad que quiere, y tiene la opción de eliminar productos. Recién una vez que confirma el carrito se le pide que inicie sesión para poder realizar la transacción, en el caso de no tener sesión se le da al usuario la posibilidad de crear una. Al iniciar sesión al usuario se le redirige automáticamente a la página de compra.

Finalmente se confirma su compra y se le pide al usuario que valorice sus productos.

Venta

La última sección es la que le permite al usuario vender productos. Para eso tiene que tener o crear una cuenta especial de empresa. Si es primera vez que el usuario vende algo se le pide que cree un perfil de empresa, con foto referencial y datos específicos.

Para que el usuario pueda vender cómodamente la aplicación le ordena sus productos en listas ubicadas en su perfil, puede acceder a todos sus productos, sus ventas, y productos previamente eliminados. En mis productos el vendedor puede agregar productos directamente y como requisito para la venta se le pide como mínimo una foto además del resto de los datos básicos.

La aplicación además le permite al vendedor revisar sus ventas, mostrándole desde su última venta cuál es el producto que vendió y cuánto ganó

Barra Superior

Aparte de las secciones iniciales el usuario tiene siempre a mano la barra superior que le permite ir al inicio directamente a través del logo, le muestra un menú que despliega todas las secciones y sub-secciones así el usuario puede cambiarse de sección sin necesidad de reabrir la aplicación, tiene un buscador para que el usuario busque productos directamente sin la necesidad de navegar por toda la aplicación, y por último tiene la opción de apretar la sección de ayuda donde puede acceder a todo lo relacionado con la historia de la app, cómo usarla y el contacto.

Barra Inferior

En el borde de abajo el usuario encuentra la barra inferior, que le permite devolverse a pasos anteriores con la flecha; tiene un acceso directo al mapa donde el usuario puede encontrar solo las verdulerías o emprendimientos cercanos a él, el mapa también le permite filtrar por cercanía o valoraciones para personalizar la búsqueda; puede ver sus productos guardados en la carpeta favoritos, de esta manera no tiene que buscarlos cada vez que quiere comprar; y finalmente puede acceder a su perfil, en su perfil puede encontrar todas sus carpetas que son las mismas para vendedor y comprador, pues el usuario puede ser ambos.

Lo más importante es que desde su perfil puede acceder a todos los datos de sus últimas transferencias, incluyendo una copia de los comprobantes de pago y puede acceder a sus últimas compras donde se le da la posibilidad de valorizar los productos que compró.

Maqueta Funcional

Luego de terminar las maquetas se procede a armar el segundo prototipo funcional, esta vez ocupando Adobe XD que a diferencia de InVision permite ocupar una mayor cantidad de pantallas.

En Adobe XD se preparan las maquetas principales para someter el prototipo a una Prueba de Usabilidad.

Hecho para pantalla de iPhone 6


Secuencia de Pantallas

Con el prototipo listo, se graban los videos correspondientes a las acciones principales que se pueden realizar en la aplicación, a saber; Informarse, Comprar, Vender y las Barras inferior y superior.

Error en widget youtube: Unable to load template 'wiki:youtube'

Segunda secuencia de Pantallas

Error en widget youtube: Unable to load template 'wiki:youtube'

Prueba de Usabilidad

Luego de pensar en los objetivos de la aplicación y las dudas presentes se separa la prueba en 7 tareas:

  1. Primera Tarea: Comprar Naranjas
  2. Segunda Tarea: Vender un Producto
  3. Tercera Tarea: Volver al Inicio
  4. Cuarta Tarea: Informarse sobre la Vitamina C
  5. Quinta Tarea: Ir al Mapa
  6. Sexta Tarea: Ir al Carrito
  7. Séptima Tarea: Ir a Favoritos

Se le hace la prueba a 2 usuarios, al primer usuario se le exigen las 7 tareas y al segundo usuario las primeras 5.

Error en widget youtube: Unable to load template 'wiki:youtube'



Sugerencias y Conclusiones Obtenidas

  • El botón para vender un producto es poco claro

Se concluye que la prueba que resultó más difícil para los usuarios fue la de vender un producto; los usuarios llegan bien hasta la sección Mis Productos pero al momento de vender se pierden tratando de buscar el botón para agregar.

Por otro lado el touch programado en las listas de Alimentación y Frutas quedó muy centralizado y poco sensible, los usuarios tuvieron que apretar muchas veces para que funcionara.


Cambios en Maquetas

Se decide cambiar la presentación de la carpeta Mi Perfil, se hace una para el usuario que es comprador y otra para el usuario que es vendedor. Se hace lo mismo con la barra inferior, pues los accesos directos de interés cambian dependiendo del tipo de usuario.

La nueva barra inferior del usuario que vende le permite acceder directamente a vender un producto y a sus notificaciones, además de las opciones que también existen para el comprador, que son el acceso al mapa, al perfil, y la opción de volver a la página anterior.

Video de Presentación

Para terminar de presentar la aplicación se realiza un video que desarrolla de manera completa una viñeta para uno de los Arquetipos.

¿Cómo es el personaje?

Fructuoso Falcone tiene problemas de sobrepeso y un trabajo que le quita mucho tiempo

¿Cómo se construye el video?

Primero se revisa la historia del personaje, a partir de eso se escriben los diálogos del narrador y del personaje. Se toman todos los diálogos y se dividen en grupos para que correspondan a distintas viñetas.

A continuación entonces se dibujan las viñetas para los diálogos pensando en las acciones clave que realiza Fructuoso antes, durante y después de usar la aplicación. ¿Qué lo lleva a ocupar la app?, ¿cómo ocupa la app?.

Finalmente se graban los audios para poner sobre las imágenes en el video.

Desarrollo del Video de Presentación

Primera Parte

Fructuoso se informa acerca de de la Vitamina C en la sección de Beneficios donde además puede ver los alimentos que contienen esta vitamina

Segunda Parte

Fructuoso se redirige a la sección de compras para comprar comprar los productos que seleccionó, donde todo lo que tiene que hacer es buscarlos y agregarlos al carrito.

Parte Final

Fructuoso revisa su carrito, compra sus productos y recibe su comprobante de compra.


Primera Propuesta

Maquetas

Aparte de las maquetas clave previamente hechas, se agregan algunas especiales para el video y otras se modifican y se le agrega por ejemplo los datos de Fructuoso. Estas maquetas se ponen en la viñeta que tiene dibujada la mano de Fructuoso sosteniendo su celular.

Viñetas

Se exponen los dibujos realizados de las acciones de Fructuoso, desde que llega a su casa después del trabajo y utiliza la aplicación, hasta que el repartidor llega a la casa.

calce calce

calce calce

calce calce

calce calce

Segunda Propuesta

Para la segunda propuesta de video se le agrega la historia del vendedor, de esta manera se tiene muestra ambas perspectivas de la aplicación. Se muestran los beneficios que esta brinda tanto para el comprador como para el vendedor.

La historia de Fructuoso se mantiene.

¿Cómo es el vendedor?

Pablo Domínguez es un productor de Naranjas, tiene un huerto urbano ubicado en la parte limítrofe de Viña del Mar. No tiene local propio y tampoco provee sus productos a ninguno.

¿Cómo se construye el video?

Para esta propuesta se ocupa la aplicación Animaker, así se pudo lograr mejor escenas y un mejor despliegue de la historia.

Desarrollo del Video

El video primero introduce a Pablo (vendedor), cuenta un poco su situación y la razón por la que ocupa FreshMarket. Pablo no es nuevo en la aplicación por lo que no se muestra cómo vender un producto, pero el video si muestra cómo Pablo puede ir a su perfil y revisar sus ventas.

Posteriormente se introduce a Fructuoso (comprador), se cuenta un poco de su día y las cosas que le van pasando que lo motivan a ocupar la aplicación para comprar. Se muestra todo el proceso de compra, desde que Fructuoso entra a la aplicación, hasta que valoriza sus productos después de haberlos probado.

Para ambos casos, todo lo que corresponde al uso de la aplicación se muestra a través de las maquetas. Algunas maquetas son las originales, otras fueron modificadas específicamente para el video.

Dibujoscomp.png


Presentación FreshMarket

Primera Propuesta

Error en widget youtube: Unable to load template 'wiki:youtube'

Propuesta Final


Error en widget youtube: Unable to load template 'wiki:youtube'