Ver el código de «Fresh Market: Mercado de Alimentos Perecibles»

{{Proyecto
|Título=Fresh Market
|Tipo de Proyecto=Proyecto de Taller
|Palabras Clave=app
|Año de Inicio=2018
|Año de Término=2018
|Carreras Relacionadas=Diseño, Diseño Gráfico, Diseño Industrial
|Asignaturas Relacionadas=Taller de Diseño de Interacción,
|Cursos Relacionados=Taller de Diseño de Interacción 2018
|Profesor=Herbert Spencer, Rodolfo Pinto,
|Alumnos=Camila Benavides, Belen Varas, Consuelo de la Maza, Belen andrea Varas,
}}
=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.

<gallery>
Archivo:Appmercado1.JPG|Poco cuidado por la mantención de los carteles de precios. Los clientes tienen que terminar consultando personalmente. 
Archivo:Appmercado2.JPG|El lugar es poco higiénico y la basura en el suelo interrumpe el tránsito de los clientes. 
Archivo:Appmercado3.JPG|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á. 
Archivo:Appmercado4.JPG|La relación vendedor-cliente es muy personal. 
Archivo:Appmercado5.JPG|Los vendedores llevan sus registros y contabilidad en cuadernos.
Archivo:Appmercado6.JPG|Todo el registro se realiza manualmente, en papeles que fácilmente pueden perderse.
</gallery>

<gallery>
Archivo:Croquisappmercado1.jpg
Archivo:Croquisappmercado2.jpg
Archivo:Croquisappmercado3.jpg
</gallery>

===Relaciones===

[[Archivo:Appmercado7.png|870px|center]]


===Mapa de Empatía===

[[Archivo:Mapa de empatia .png|500px|center]]

===Comparación de Precios===
Mercado y Competencia

[[Archivo:Tablapreciosappmercado.png|700px|center]]

==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]]


[[Archivo:Appmercado8.png|700px|center]]


[[Archivo:Appmercado9.png|700px|center]]

===Encuesta Online: ''Clientes''===

[[Archivo:EncuestaClientesPreguntas.pdf]]

[[Archivo:EncuestaClientesRespuestas.pdf]]


[[Archivo:Appmercado10.png|700px|center]]

[[Archivo:Appmercado11.png|700px|center]]

==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


[[Archivo:Appmercado12.png|800px|center]]

===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====

[[Archivo:Appmercado13.png|500px|center]]

----

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

[[Archivo:Presentación_Grupo_Epsilon_1.pdf]]

----

====Segunda Versión====

[[Archivo:MÓDULO CONSU.png|800px|center]]

===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=====

[[Archivo:Personasappmercado1.jpg|500px|calce]] [[Archivo:Personasappmercado2.jpg|500px|calce]]

[[Archivo:Personasappmercado3.jpg|500px|calce]] [[Archivo:Personasappmercado4.jpg|500px|calce]]

[[Archivo:Personasappmercado5.jpg|500px|calce]] [[Archivo:Personasappmercado6.jpg|500px|calce]]

=====Vendedores=====

[[Archivo:Personasappmercado7.jpg|500px|calce]] [[Archivo:Personasappmercado8.jpg|500px|calce]]

[[Archivo:Personasappmercado9.jpg|500px|calce]]

====Viñetas====
[[Archivo:Viñeta.png|1000px|center]]

==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=====

<gallery>
Archivo:Usabilidadappmercado1.png|El sistema no permite al usuario comprar si no se hace una cuenta
Archivo:Usabilidadappmercado2.png|El sistema le indica al usuario que cometió un error y dónde se encuentra el error
Archivo:Usabilidadappmercado3.png
</gallery>

=====Puntajes=====

[[Archivo:Graficoappmercado1.png|600px|center]]

====Utilidad====

=====Registro=====

<gallery>
Archivo:Utilidadappmercado1.png|El sistema se adapta. Pantalla PC
Archivo:Utilidadappmercado2.PNG|Pantalla Smartphone
Archivo:Utilidadappmercado3.png|El sistema avisa qué productos no hay en stock
Archivo:Utilidadappmercado4.png
Archivo:Utilidadappmercado5.png|El sistema permite acceder a las experiencias de otros usuarios
</gallery>

=====Puntajes=====

[[Archivo:Graficoappmercado2.png|600px|center]]

====Contenidos====

=====Registro=====

<gallery>
Archivo:Contenidosappmercado1.png|El buscador del sitio cuenta con un sistema de predicción
Archivo:Contenidosappmercado2.png|Existe una jerarquización de los contenidos en la página visible a través de la tipografía y la diagramación
Archivo:Contenidosappmercado3.png|El sistema entrega un mínimo de información acerca de los productos
</gallery>

=====Puntajes=====

[[Archivo:Graficoappmercado3.png|600px|center]]

====Navegación====

=====Registro=====

<gallery>
Archivo:Navegacionappmercado1.png|El sistema permite una búsqueda personalizada mediante filtros
Archivo:Navegacionappmercado2.png|El sistema cuenta con breadcrums
Archivo:Navegacionappmercado3.png|El usuario sabe dónde se encuentra y cuáles fueron sus pasos anteriores
Archivo:Navegacionappmercado4.png|El sistema permite al usuario volver rápidamente a la parte superior de la página
</gallery>

=====Puntajes=====

[[Archivo:Graficoappmercado4.png|600px|center]]

====Estética====

=====Registro=====

<gallery>
Archivo:Esteticaappmercado1.png|El sitio '''no''' evita la sobrecarga de información gráfica
Archivo:Esteticaappmercado2.png|No se evita la publicidad innecesaria que desconcentra al usuario
Archivo:Esteticaappmercado3.png|El sitio utiliza iconografía universal como apoyo
</gallery>

=====Puntajes=====

[[Archivo:Graficoappmercado5.png|600px|center]]

====Ayuda====

=====Registro=====

<gallery>
Archivo:Ayudaappmercado1.png|El sitio cuenta con un sistema de asistencia al usuario
Archivo:Ayudaappmercado2.png|El sitio permite al usuario revisar su compra antes de pagar
</gallery>

=====Puntajes=====

[[Archivo:Graficoappmercado6.png|600px|center]]

====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.

[[Archivo:Graficoappmercado7.png|600px|center]]

===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''=

==Mapa de Navegación==

===Primera Propuesta===

[[Archivo:Mapadenavegacionapp1.png|1000px|center]]

----

[[Archivo:Mapadenavegacionapp2.png|550px|center]]
----

===Segunda Propuesta===

[[Archivo:Mapa de navegacion1.png|1000px|center]]
----
[[Archivo:Mapa de navegacion2.png|550px|center]]

====Barras PC====

[[Archivo:Barrasappcomputador.png|700px|center]]

====Barras Smartphone====

[[Archivo:Barras CEL.png|550px|center]]

===Tercera Propuesta===
''Mapa hecho en draw.io'' 

[[Archivo:Mapa de Navegación .png|1100px|center]]
----
[[Archivo:Mapa de Clases (1).png|700px|center]]

==Arquitectura de la Información==

[[Archivo:PaperFreshMarket.pdf]]

===Wireframes===

====Beneficios====
<gallery>
Archivo:Wireframeapp1.jpg
Archivo:Wireframeapp2.jpg
Archivo:Wireframeapp3.jpg
Archivo:Wireframeapp4.jpg
</gallery>

====Compra====
<gallery>
Archivo:Wireframeapp1.jpg
Archivo:Wireframeapp5.jpg
Archivo:Wireframeapp6.jpg
Archivo:Wireframeapp7.jpg
Archivo:Wireframeapp8.jpg
Archivo:Wireframeapp9.jpg
Archivo:Wireframeapp10.jpg
Archivo:Wireframeapp11.jpg
</gallery>

====Venta====
<gallery>
Archivo:Wireframeapp1.jpg
Archivo:Wireframeapp12.jpg
Archivo:Wireframeapp13.jpg
Archivo:Wireframeapp14.jpg
Archivo:Wireframeapp15.jpg
Archivo:Wireframeapp16.jpg]
</gallery>

====Sesión====
<gallery>
Archivo:Wireframeapp17.jpg
Archivo:Wireframeapp15.jpg
</gallery>

==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===

<gallery>
Archivo:Logoapp1.png|Primera Propuesta
Archivo:Logoapp2.png|Segunda Propuesta
Archivo:Logoapp3.png|Tercera Propuesta
Archivo:Logoapp4.png|Propuesta Final
</gallery>

===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. 

<gallery>
Archivo:MaquetaFM1.jpg
Archivo:MaquetaFM2.jpg
Archivo:MaquetaFM3.jpg
Archivo:MaquetaFM5.jpg
Archivo:Maquetavitamina2.jpg
</gallery>

====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. 

<gallery>
Archivo:MaquetaFM1.jpg
Archivo:MaquetaFM6.jpg
Archivo:MaquetaFM4.jpg
Archivo:MaquetaFM7.jpg
Archivo:Maquetafiltros.jpg
Archivo:MaquetaFM8.jpg
Archivo:MaquetaFM9.jpg
Archivo:MaquetaFM31.jpg
Archivo:MaquetaFM10.jpg
Archivo:MaquetaFM12.jpg
Archivo:MaquetaFM29.jpg
Archivo:MaquetaFM11.jpg
Archivo:MaquetaFM13.jpg
Archivo:MaquetaFM30.jpg
Archivo:MaquetaFM32.jpg
</gallery>

====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ó''
<gallery>
Archivo:MaquetaFM1.jpg
Archivo:MaquetaFM14.jpg
Archivo:MaquetaFM15.jpg
Archivo:MaquetaFM16.jpg
Archivo:MaquetaFM17.jpg
Archivo:MaquetaFM20.jpg
 
Archivo:MaquetaFM18.jpg
Archivo:MaquetaFM19.jpg
Archivo:Maquetamisventas.jpg
</gallery>

====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. 

<gallery>
Archivo:MaquetaFM21.jpg
Archivo:MaquetaFM23.jpg
Archivo:MaquetaFM22.jpg
</gallery>

====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ó.  
<gallery>
Archivo:MaquetaFM24.jpg
Archivo:MaquetaFM25.jpg 
Archivo:MaquetaFM26.jpg
Archivo:MaquetaFM17.jpg
Archivo:MaquetaFM27.jpg
Archivo:MaquetaFM28.jpg
</gallery>

==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''. 

{{#widget:youtube|id=Mg3sq6Ww3xs}}
----
====Segunda secuencia de Pantallas====
{{#widget:youtube|id=cH96Uyrwxq4}}

==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. 

{{#widget:youtube|id=iSne9b6nFgM}}


----

'''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. 

<gallery>
Archivo:Maquetaperfilcomprador.jpg|Perfil Compras
Archivo:Maquetaperfilvendedor.jpg|Perfil Ventas
</gallery>

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.
<gallery>
[[Archivo:Videofreshmarket1.jpg|150px|calce]] [[Archivo:Videofreshmarket2.jpg|150px|calce]] [[Archivo:Videofreshmarket3.jpg|150px|calce]] [[Archivo:Videofreshmarket4.jpg|150px|calce]][[Archivo:Videofreshmarket5.jpg|150px|calce]] [[Archivo:Videofreshmarket6.jpg|150px|calce]][[Archivo:Videofreshmarket7.jpg|150px|calce]] 

[[Archivo:Videofreshmarket8.jpg|150px|calce]] [[Archivo:Videofreshmarket9.jpg|150px|calce]] [[Archivo:Videofreshmarket10.jpg|150px|calce]] [[Archivo:Videofreshmarket11.jpg|150px|calce]] [[Archivo:Videofreshmarket12.jpg|150px|calce]] [[Archivo:Videofreshmarket13.jpg|150px|calce]] [[Archivo:Videofreshmarket14.jpg|150px|calce]]

[[Archivo:Videofreshmarket15.jpg|150px|calce]] [[Archivo:Videofreshmarket16.jpg|150px|calce]][[Archivo:Videofreshmarket18.jpg|150px|calce]] [[Archivo:Videofreshmarket17.2.jpg|150px|calce]][[Archivo:Videofreshmarket19.jpg|150px|calce]] [[Archivo:Videofreshmarket20.jpg|150px|calce]][[Archivo:Videofreshmarket21.jpg|150px|calce]]


</gallery>

====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. 

[[Archivo:Viñetafreshmarket1.jpg|350px|calce]] [[Archivo:Viñetafreshmarket2.jpg|350px|calce]] 

[[Archivo:Viñetafreshmarket3.jpg|350px|calce]] [[Archivo:Viñetafreshmarket4.jpg|350px|calce]]

[[Archivo:Viñetafreshmarket5.jpg|350px|calce]] [[Archivo:Viñetafreshmarket6.jpg|350px|calce]]

[[Archivo:Viñetafreshmarket7.jpg|350px|calce]] [[Archivo:Viñetafreshmarket8.jpg|350px|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.

[[Archivo:Dibujoscomp.png|700px]]


====Presentación FreshMarket====
''Primera Propuesta''

{{#widget:youtube|id=bAG94MYjOZw}}

''Propuesta Final''


{{#widget:youtube|id=8ZOnJsmwoPE}}