¡Muy buenas a todos!

A continuación presento mi propuesta de valor, sketch y prototipo de interacción obtenidos del resultado de trabajos anteriores y del análisis de briefing, escenarios y users journeys.

Desarrollo escenario:

Sara es una chica introvertida que trabaja en una escuela de danza contemporánea en las afueras de Madrid y que vive en el centro con su mejor amiga que es sordo-muda. Son amantes de la música, el cine y las nuevas tecnologías. Este mes se celebra uno de los festivales favoritos de las dos pero no saben si asistir al festival de forma presencial o virtual.

Al llegar del trabajo Sara se descarga la app en el smartphone y descubre el apartado “agenda” donde comprueba que puede asistir a la charla de uno de sus directores de cine favoritos, Javier Sánchez, por lo que reserva la entrada a un evento virtual. Para sorpresa de las dos en el apartado de “venta de entradas” descubren que todos los eventos virtuales están adaptados para personas que tienen algún tipo de discapacidad tanto visual como auditiva. En el caso de personas con problemas de visibilidad se ha adaptado el espacio presencial con carriles específicos para ellos, así como espacios más amplios para poder ir acompañados de sus amigos caninos o de su bastón de guía y para las personas que tengan problemas auditivos cuentan con subtítulos en todos los eventos, así como carteles y personas especializadas que irán guiándolos en todo momento.

¡Es justo lo que necesitaban! Sara debido a su introversión no tiene que desplazarse y lo mejor de todo es que puede disfrutar de la compañía de su mejor amiga y que ésta lo disfrute al 100% debido a su condición, por ello reservan 2 entradas para el evento de Javier Sánchez. Para finalizar el pago puede ser a través de tarjeta bancaria o bizum, escogen bizum que es el método de pago más rápido que hay hasta el momento, solo tiene que añadir su número de teléfono y ¡listo!

Flujo de interacción:

Sketch del flujo de interacción:

El prototipo de baja fidelidad (wireframe) puede ser testeado en el siguiente enlace.

Hola,
Presento el prototipo de mi versión de la app In-Edit. He creado 4 recorridos basado en los 4 escenarios empleados durante el proyecto:

Escenario 1: https://xd.adobe.com/view/45bc4ef8-2ed1-4fa6-b8d4-09d3e2882958-10ef/

Escenario 2: https://xd.adobe.com/view/53e515a2-3b69-4cfd-94fe-c72c0715b339-06b6/

Escenario 2b: https://xd.adobe.com/view/bccb0edd-aa0a-4734-9b48-43475ebf265a-e998/

Escenario 2c: https://xd.adobe.com/view/33c51a0b-4a5a-49c8-8bbb-c9c10e3bd14b-6696/

Escenario 3: https://xd.adobe.com/view/c50cf4e4-fc06-4799-bc05-9558c1585847-905f/

Escenario 4: https://xd.adobe.com/view/1dc5feaa-f247-4683-91e7-5aa1424c557e-4896/

Han sido creados con la herramienta Adobe XD.

Hola a todos,

para la entrega de esta Pec debíamos hacer un prototipado de bajo nivel de la aplicación inEdit.

Mi prototipo fue el resultado de las Pecs anteriores ya que sin ellas no podría haber llegado a este resultado. La organización de la información no fue de manera azarosa sino que fue el resultado primero de definir el perfil de usuario de nuestra aplicación, en nuestro caso teníamos un perfil de creador y uno de usuario.

A partir de estos perfiles desarrollamos 4 user journeys con 4 escenarios diferentes y es sobre estos 4 escenarios sobre los que trabajamos.

A partir de estos escenarios realizamos un card sorting para definir un arbol de contenidos, que veremos reflejado en la aplicación, y desarrollamos los diagramas de flujo.

Todo este trabajo nos ha permitido realizar una aplicación intuitiva donde el usuario puede encontrar la información de manera sencilla.

Quise resumir un poco este trabajo en un Value Position Canvas que os adjunto aquí:

Espero que se vea reflejado todo el trabajo de los últimos meses en él.

A continuación os adjunto el link del prototipado y una serie de vídeos donde explico cada uno de los 4 escenarios prototipados.

Link a figma: https://www.figma.com/proto/L4TTYTngcQjbe0sLdaZTxb/Untitled?page-id=18%3A1097&node-id=18%3A1695&viewport=385%2C423%2C0.63&scaling=scale-down&starting-point-node-id=18%3A1098&show-proto-sidebar=1

Link a vídeo del escenario 1: https://youtu.be/tLmN782dFks

Link al vídeo del escenario 2: https://youtu.be/qBlXK0Ano7A

Link al vídeo del escenario 3: https://youtu.be/0Cdg3KWF6yU

Link al vídeo del escenario 4: https://youtu.be/W4evZnCw4Bo

¡Muchas gracias por leerme!

El festival IN-EDIT, es un festival de cine especializado en cine documental musical más importantes de la escena, es un punto de encuentro entre el sector audiovisual y el sector musical.

Esta App tiene que servir como punto de encuentro entre el público y los directores, fomentando la comunicación entre ambos.

Principales objetivos y requerimientos de la plataforma son:

• • Crear debates e intercambio entre directores y público en todo el mundo.
  • Incluir In-EditTV dentro de la app (In-EditConnect
  • Charlas y debates en streaming
  • Contacto entre directores y público
  • Incluir una agenda del festival y de los eventos que se realicen todo en año.
  • Permitir la interacción entre estos dos perfiles, no solamente durante los días del festival, sino a lo largo del año.
  • Motivar debates e intercambio de pensamiento entre público y directores.
  • Crear comunidad
  •  Dar visibilidad a creadores emergentes y ser accesibles.

Después de las fases  de investigación, definición, evaluación y generación del diseño de la aplicación In-Edit, se han desarrollado los siguientes prototipos nombrados en Figma.

Sketching

A partir del árbol de contenidos y de los flujos de interacción se realizó un sketching de las pantallas.

Flujos

Escenario 1: Participar en un evento

Participa en un evento

Escenario2: Comprar Entradas para un evento

Comprar las entradas para eventos

Escenario 3: Registrarse en la plataforma

Registro en la App

Escenario 4: Crear un evento y presentar un documental

Presenta un documental

Navegación Libre

Festival INEDIT

El Festival INEDIT es uno de los festivales especializados en cine más importantes del mundo, tiene base en Barcelona y cuenta con sedes en países como Brasil, Chile, Alemania, Países Bajos, Grecia, México, Argentina y muchos más.

Nos a encargado el desarrollo de una app, la cual sirva como plataforma para que sus usuarios tengan una experiencia digital del festival desde cualquier parte del mundo. Además que se convierta en el punto de encuentro entre directores, creadores emergentes y amantes del cine.

Principales objetivos y requerimientos de la plataforma son:

– Crear debates e intercambio entre directores y público en todo el mundo.

– Incluir In-EditTV dentro de la app (In-EditConnect), este es un espacio para visualizar documentales.

– Incluir una tienda en la app, donde los usuarios pueden adquirir y reservar entradas.

– Incluir una agenda del festival y de los eventos que se realicen todo en año.

– Dar visibilidad a creadores emergentes y ser accesibles.

En base a estas característica y luego de un análisis de la informacion encontrada, poniendo enfasis en la interacci´n cebtrada en el usuario empezamos con el sketching:

Luego procedimos a realizar el,prtotipo de bajo nivel y sus respectivos flujos:

1 Flujo: Javier Sánchez.

Escenario: Javier quiere conocer y crear debate con sus seguidores y otros colegas del sector.

Link video: https://youtube.com/shorts/u4lSufzwuX4?feature=share

2 Flujo: Los seguidores de Javier alrededor del mundo.

Escenario: Javier tiene muchos seguidores en el extranjero que quisieran ver el documental ese día online.

Link video: https://youtube.com/shorts/KTO94nyMKSI?feature=share

3 Flujo: Sara Simon.

Escenario: Sara está triste porque no podrá asistir al evento presencial. Podrá ver el festival desde su casa.

Link video: https://youtube.com/shorts/YMufszoZlLc?feature=share

4 Flujo: Sara Simon.

Escenario: Sara es introvertida y no se siente cómoda con la interacción con directores de manera digital.

Link video: https://youtube.com/shorts/4Etmo_7fu2M?feature=share

Enlace del prototipo interactivo:
https://www.figma.com/proto/9rGAeRl5RwqlJbFWBonjil/Festival-In-Edit?page-id=0%3A1&node-id=1%3A3844&viewport=1807%2C91%2C0.16&scaling=min-zoom&starting-point-node-id=1%3A3844

Propuesta de valor:

Realizamos un análisis de las principales ventajas y desventajas de nuestro sistema, para poder definir la propuesta de valor y poder proponer característica que mejoren el servicio de la app.

Las propuesta de valor más importantes son:

– Crear una sección del festival libre de pago para las personas de bajos recursos.

– Realizar descuentos a los grupos vulnerables y estudiantes para ser más inclusivos.

– Incrementar la actividad e interacción de Media desde la app.

PROTOTIPADO Y SÍNTESIS DEL PROYECTO

Para terminar con el proyecto llevado a cabo meticulosamente a partir de cada una de las entregas en las PECs, se ha realizado la revisión de cada una de estas partes para finalmente llegar a la construcción de un prototipo interactivo de baja fidelidad eficiente. En resumen y conclusión durante el desarrollo del proyecto se ha aportado valor al producto a partir de determinados aspectos importantes.

Tras la investigación y el trabo llevado a cabo para el desarrollo de la aplicación, se han identificado una serie de puntos fuertes mediante el proyecto que han aportado valor al producto ofrecido, posicionándolo en un buen puesto en el mercado. Además, se ha trabajado con modelos de personas construidos de manera estricta según los potenciales usuarios y por lo tanto, se ha recopilado información rigurosa de los diferentes métodos empleados para que el diseño de la aplicación resulte exitoso.

• Por un lado, se han identificado errores antes del lanzamiento del prototipo que ha minimizado tiempos y costes gracias al trabajo realizado en el card sorting, donde se ha experimentado con usuarios reales que han dado n punto de vista acertado frente a la construcción de un árbol de contenidos intuitivo y eficiente.

• Además, con la construcción de los escenarios de uso y los diagramas de flujo se han identificado determinados puntos claves a la hora de la construcción del prototipo como la necesidad de poder entrar con una cuenta de Google o ofrecer métodos de pago variados. Además también se han identificado pain points del usuario como la dificultad que puede conllevar crear un evento o asistir a él, con una solución que permite crean un evento de manera sencilla en treinta segundos, rellenando únicamente campos como el título, el tema y la fecha y hora; de la misma manera se ofrece al usuario la oportunidad de entrar a los debates de manera escrita u oral a partir de un click en un botón.

• Por último, la aplicación ofrece un espacio personal al usuario (Tu perfil) donde puede guardar y visualizar tanto sus eventos creados como a los que asistirá tanto en calendario como a modo de lista (Agenda), así como las compras de entradas realizadas. Esto le permitirá organizarse mejor para poder asistir a todos sus eventos favoritos ofrecidos por el festival.

En este enlace, se puede entrar de manera abierta al prototipo de interacción de baja fidelidad construido para poner a prueba el producto.

Espero que hayáis podido disfrutar tanto como yo como del proceso como del resultado final. ¡Muchas gracias!

¡Hola a todos!

En esta PEC debíamos desarrollar el flujo de interacción para cada uno de los 4 escenarios que habíamos definido en la PEC anterior.

Además de esto, debíamos analizar dos aplicaciones que tuvieran algo que ver con In-edit, la aplicación que estamos desarrollando.

En mi caso yo escogí Ticketmaster e Instagram, sé que de buenas a primeras no parece tener mucha relación. Pero, no encontré o no se me ocurrió, ninguna aplicación similar a In-edit por lo que escogí las dos caras de la aplicación. Por un lado, Ticketmaster nos va a permitir analizar el flujo de compra de entradas que podría tener nuestro usuario para adquirir entradas para el festival. Y, por otro, Instagram nos va a dar la experiencia que tienen nuestros creadores a la hora de subir contenido a la aplicación.

El análisis de estas dos aplicaciones por separado nos va a permitir sacar unas conclusiones y fusionarlas para ver qué resultado podría resultar mejor para nuestra propia app.

Lo primero que os voy a adjuntar son los flujos de trabajo de ambas aplicaciones:

Como vemos el flujo de interacción no tiene nada que ver la una con la otra, más allá del inicio de sesión.

A continuación os adjuntaré a modo resumen las conclusiones extraídas del análisis heurístico desarrollado en la PEC.

1. Visibilidad del estado del sistema. 

Ambas aplicaciones muestran en todo momento al usuario en qué parte de la aplicación se encuentran. Esto se trata de una buena práctica ya que permite que el usuario no se sienta perdido dentro de la aplicación.

2. Adecuación entre el sistema y el mundo real. 

El uso del lenguaje es similar al usado en la vida real.

Un punto a tener en cuenta en el sistema es el uso de iconos por parte de Instagram, esto puede tratarse de una mala práctica si no se tiene en cuenta el aprendizaje y los conocimientos del usuario ya que podría generar confusión.

3. Libertad y control por parte del usuario.

Ambas aplicaciones permiten revertir las acciones llevadas a cabo por el usuario, Ticketmaster permite eliminar cosas del carrito de la compra e Instagram permite desde eliminar publicaciones hasta mensajes privados.

4. Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores. 

Este es quizás el punto que las aplicaciones tienen más flojo, ambas señalizan los errores pero no dan mucha información al respecto de cómo solucionarlo. Por lo que el usuario nunca llega a saber qué es lo que falló dentro de la aplicación.

5. Reconocimiento antes que recuerdo.

El reconocer antes que recordar facilita mucho la experiencia de usuario. Por ejemplo, el usuario ya está familiarizado con la plataforma de compra de entradas de Ticketmaster porque recuerda a otras páginas similares y en Instagram, el uso de iconos facilmente reconocibles por el usuario permiten que no le genere un gran esfuerzo utilizar la aplicación.

Como punto en contra diría que el más que usa instagram resulta confuso para subir contenido.

6. Diseño estético y minimalista.

Ambas aplicaciones tienen una guía de diseño marcada que recuerda al usuario siempre que se encuentra dentro de la misma aplicación. Por otro lado el uso de publicidad o de información añadida siempre se hace siguiendo la misma maquetación por lo que el usuario no siente «ruido visual» al entrar en estas páginas.

Como conclusión podemos decir que aunque se traten de páginas que en un primer momento no tienen nada que ver, siguen las mismas leyes y tienen las mismas características que permiten que el usuario tenga una experiencia satisfactorias. Analizarlas me pareció interesante para ver cuáles de ellas podemos incluir en el desarrollo de nuestra propia aplicación.

¡Gracias por leer!

Las 2 apps seleccionadas son Prime Video y Vimeo.

1. Reproducción de un contenido en Prime Video

Queremos investigar cual es el flujo de navegación que nos plantea esta app a la hora de encontrar y reproducir un contenido multimedia. Se ha seleccionado esta app por ser una gran plataforma de contenidos audiovisuales. Un extenso catálogo de vídeos ordenados por categorías.

El reto de este tipo de apps, es clasificar de manera ordenada los contenidos y facilitar la búsqueda de los mismos. También se debe tener en cuenta aspectos que faciliten la “estancia” del usuario dentro de la app como por ejemplo la opción de seguir viendo. Son pequeñas experiencias de usuario que marcan la diferencia entre un producto o servicio excepcional o del montón.

Quizás antepongan el interés de vender un servicio extra a facilitarle al usuario las opciones que realmente necesita.

Opción 1

Opción 2

Diagrama de flujo app Prime Video

2. Crear un evento en vídeo en directo desde Vimeo

Queremos investigar cual es el flujo de navagación que nos plantea esta app a la hora de crear un vídeo en directo. La razón por la que se ha seleccionado esta app es por ser una de las principales plataformas de creación de vídeos junto con Youtube. Posee la función de emisión en directo, uno de los prerequisitos marcados en nuestra app in-edit.

Tiene además muchas opciones para gestionar el contenido multimedia como dejar en oculto para varolación, colaboración en línea, herramientas para la edición de vídeos, distintos grados y roles a la hora de compartir, etc.

Es un buen ejemplo para aplicar a nuestro perfil de “Director” de nuestra app.

Una vez que estamos emitiendo en directo, se activan muchas de las opciones que hemos especificado en los prerrequisitos.

Diagrama de flujo app Prime Video

Conclusiones del análisis

A la hora de buscar 2 aplicaciones que nos ayudaran a indagar y sacar información para nuestro proyecto In-Edit No era tan interesante analizar la parte de red social como la de la funcionalidad de encontrar o crear un contenido audiovisual.

En ambos casos son 2 grandes plataformas con millones de usuarios en las que, como hemos visto, es casi imposible encontrar errores. Aparte de que se aplican todos los principios de usabilidad de Jakob Nielsen  y otros del diseño, destacan por la síntesis de menús. Concentran en uno o dos pequeños grupos de menús todas las funcionalidades posibles; prescindiendo en ambos casos de la hamburguesa.

· Estética y diseño minimalista:
Iconos bien resultos, alta legibilidad, ritmo vertical en los espacios, alto contraste, gerarquías en los tamaños de fuente, etc.
· Consistencia y estándares:
Iconografía estandar, ubicación de logos correcta, desplazamiento de contenido en vertical, ordenación del contenido por tarjetas o por filas, símbolo “más” dentro de una caprpeta para añadir nueva, llamada a la acción principal en color relleno y secundarios en linea… etc.
· Visibilidad del estado del sistema:
En prime hay barras de estado avanzando cuando se descaga un contenido, en vimeo aparecen barras de estado de la subida del vídeo…
· Control y libertad del usuario:
Antes de borrar un vídeo en Vimeo te recuerda si de verdad lo quieres hacer o en prime antes de terminar el proceso de compra te pregunta por ultima vez si estás de acuerdo.

Tras realizar un recorrido con capturas analizando cada detalle, se ha aplicado también una tabla de análisis general tal y como establece la técnica del Benchmarking. En dicha tabla hay muchísimas coincidencias entre estas 2 grandes apps.

Las aplicaciones en su versión móvil, ayudan a comprender mejor las funcionalidades que debe tener una app. De hecho, una buena praxis es diseñar primero para la versión movil y después la de escritorio y no al revés.

Este espacio reducido, nos exige un ejercicio mayor de síntesis y esforzarnos en crear una navegación clara e intuitiva.

Fuentes consultadas (Bibliografía):

·Jiménez, L. y González, P. (2021). Herramientas UOC, “Cuaderno de Arquitectura de la Información”. UOC
·Design Toolkit. Herramientas UOC, “Benchmarking”. UOC
·Design Toolkit. Herramientas UOC, “Evaluación heurística”. UOC
·Allas Miguelsanz, B. “Los 10 principios de usabilidad de Jakob Nielsen: be user friendly”, Fuente: https://profile.es/blog/los-10-principios-de-usabilidad-web-de-jakob-nielsen/ [Fecha de consulta: 12 de Diciembre de 2022].