Fresh Market: Mercado de Alimentos Perecibles
| Título | Fresh Market |
|---|---|
| Tipo de Proyecto | Proyecto de Taller |
| Palabras Clave | app |
| Período | 2018-2018 |
| Asignatura | Taller de Diseño de Interacción, |
| Del Curso | Taller de Diseño de Interacción 2018 |
| Carreras | Diseñ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 |
| Profesor | Herbert 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.
Poco cuidado por la mantención de los carteles de precios. Los clientes tienen que terminar consultando personalmente.
El lugar es poco higiénico y la basura en el suelo interrumpe el tránsito de los clientes.
Pocos vendedores utilizan la publicidad como recurso para obtener clientes, aquellos que lo hacen ponen carteles únicamente sobre su puesto de ventas y no se extienden más allá.
La relación vendedor-cliente es muy personal.
Los vendedores llevan sus registros y contabilidad en cuadernos.
Todo el registro se realiza manualmente, en papeles que fácilmente pueden perderse.
Relaciones
Mapa de Empatía
Comparación de Precios
Mercado y Competencia
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
- Mercados
- Ferias
- Verdulerías
- Emprendedores
Método de Investigación: Entrevista Semi Estructurada
CLIENTES
- Dueños de Casa
- Estudiantes
- 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
Encuesta Online: Clientes
Archivo:EncuestaClientesPreguntas.pdf
Archivo:EncuestaClientesRespuestas.pdf
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
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
Hasta aquí el contenido de la primera presentación.
Archivo:Presentación Grupo Epsilon 1.pdf
Segunda Versión
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
Vendedores
Viñetas
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.
- Usabilidad
- Utilidad
- Contenidos
- Navegación
- Estética
- 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
El sistema no permite al usuario comprar si no se hace una cuenta
El sistema le indica al usuario que cometió un error y dónde se encuentra el error
Puntajes
Utilidad
Registro
El sistema se adapta. Pantalla PC
Pantalla Smartphone
El sistema avisa qué productos no hay en stock
El sistema permite acceder a las experiencias de otros usuarios
Puntajes
Contenidos
Registro
El buscador del sitio cuenta con un sistema de predicción
Existe una jerarquización de los contenidos en la página visible a través de la tipografía y la diagramación
El sistema entrega un mínimo de información acerca de los productos
Puntajes
Registro
El sistema permite una búsqueda personalizada mediante filtros
El sistema cuenta con breadcrums
El usuario sabe dónde se encuentra y cuáles fueron sus pasos anteriores
El sistema permite al usuario volver rápidamente a la parte superior de la página
Puntajes
Estética
Registro
El sitio no evita la sobrecarga de información gráfica
No se evita la publicidad innecesaria que desconcentra al usuario
El sitio utiliza iconografía universal como apoyo
Puntajes
Ayuda
Registro
El sitio cuenta con un sistema de asistencia al usuario
El sitio permite al usuario revisar su compra antes de pagar
Puntajes
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.
Sugerencias
Se abstrae una lista de sugerencias para la construcción de la app a partir de lo obtenido en los resultados del benchmark.
- Permitir al usuario navegar por el sitio sin necesidad de hacerse una cuenta
- Indicar al usuario de manera completa los errores que comete, dónde se encuentran y cómo solucionarlos
- El sistema debe ser adaptable a las diversas plataformas de uso
- Debe permitir un feedback entre los usuarios (valoraciones)
- Debe tener sistema de predicción en todos sus buscadores
- Entregar información completa acerca de los productos, el vendedor y el local de venta
- Jerarquizar contenidos para el mayor entendimiento del usuario
- Permitir al usuario personalizar su búsqueda mediante filtros
- Permitir la libertad de navegación para el usuario
- El usuario debe saber siempre dónde está y dónde estuvo
- El sitio debe tener una estética minimalista y simple sin exceso de información gráfica
- No poner publicidad extra
- Utilizar iconografía que minimice la carga de memoria del usuario
- El sitio debe contar con una completa sección de ayuda siempre accesible para el usuario
- El sitio debe contar con una completa sección de ayuda siempre accesible para el usuario
Tercera Etapa: Ideación
Primera Propuesta
Segunda Propuesta
Barras PC
Barras Smartphone
Tercera Propuesta
Mapa hecho en draw.io
.png)
Arquitectura de la Información
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.
Logo
Primera Propuesta
Segunda Propuesta
Tercera Propuesta
Propuesta Final
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.
Segunda secuencia de Pantallas
Prueba de Usabilidad
Luego de pensar en los objetivos de la aplicación y las dudas presentes se separa la prueba en 7 tareas:
- Primera Tarea: Comprar Naranjas
- Segunda Tarea: Vender un Producto
- Tercera Tarea: Volver al Inicio
- Cuarta Tarea: Informarse sobre la Vitamina C
- Quinta Tarea: Ir al Mapa
- Sexta Tarea: Ir al Carrito
- 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.
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.
Perfil Compras
Perfil Ventas
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.
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.
Presentación FreshMarket
Primera Propuesta
Propuesta Final
