Skip to content

Latest commit

 

History

History
189 lines (103 loc) · 9.8 KB

README.md

File metadata and controls

189 lines (103 loc) · 9.8 KB

DIU20

Prácticas Diseño Interfaces de Usuario 2019-20 (Economía Colaborativa)

Grupo: DIU2_SVPJ. Curso: 2019/20

Proyecto: Experiencia de compartir alojamiento

Descripción: Plataformas que te permiten compartir compañeros (para un piso de estudiantes), desplazarte a otros lugares de forma alternativas (sofá) y muy económicas (alternativas a una transacción económica). Algunos ejemplos son Badi, Couchsurfing, CompartetuPiso, etc. (https://mejores.app/las-apps-que-tienes-que-conocer-si-compartes-piso/)

Logotipo:

Miembros

  • 👤 Sergio Vela Pelegrina :octocat: GitHub
  • 👤 Pablo Jesús Jiménez Ortiz :octocat: GitHub

En esta práctica estudiaremos un caso de plataforma de economía colaborativa y realizaremos una propuesta para su diseño Web/movil. Utilizaremos herramientas y entregables descritos en el siguiente CheckList (https://github.com/mgea/UX-DIU-Checklist)

Qué es economia colaborativa: Martínez-Polo, J. (2019). El fenómeno del consumo colaborativo: del intercambio de bienes y servicios a la economía de las plataformas, Sphera Publica, 1(19), 24-46. http://sphera.ucam.edu/index.php/sphera-01/article/view/363/14141434

Proceso de Diseño

Paso 1. UX Desk Research & Analisis

Método UX 1.a Competitive Analysis

La plataforma elegida para el estudio será pisocompartido. La interfaz de dicha página es muy intuitiva, ofrece un diseño responsive, viéndose de manera adecuada en todo momento. Además, la navegación es agradable por los colores usados. También ofrece la posibilidad de ponerte en contacto de manera directa con Whatsapp desde la propia Web, cosa que no ofrecen la mayoria de portales de la competencia. Sin embargo, vemos suficientes lagunas en esta web, que serán analizadas a lo largo de estas prácticas. Algunas de ellas son por ejemplo, la falta de información acerca de la accesibilidad a los edificios para personas minusválidas o tener en cuenta el transporte público a la hora de elegir piso.

Método UX 1.b Persona

Las personas seleccionadas son Germán y Eva.

Método UX 1.c User Journey Map

La experiencia de Germán, se ha escogido para reflejar el problema que puede suponer el no tener un chat online para mantenerte en contacto con los administradores de la web.

En cuanto a Eva, hemos querido reflejar el problema de poder tener búsquedas por comunidad autónoma en la página.

Método UX 1.d Usability Review

Calificación final obtenida de 72 sobre 100.


Se recuerda que en esta ficha tenemos un pequeño resumen de la práctica. El resultado final con todos los detalles los encontramos en P1.


Paso 2. UX Design

Método UX 2.a Feedback Capture Grid

En esta primera parte construiremos una malla receptora de información o capture grid, que consiste en elaborar un cuadrante con 4 apartados: aspectos positivos, críticas constructivas, preguntas de los usuarios e ideas de mejora.

También incluiremos las propuestas de valor de nuestra aplicación.

Destacan varias funcionalidades en nuestra aplicación. Las más innovadoras y por tanto, aquellas que implementaremos son:

  • La inclusión de un recorrido mediante realidad virtual a través de las viviendas mediante botones
  • Un chat en directo, a través del cual nos podremos comunicar con los administradores en tiempo real gracias a un menú desplegable de mensajes a modo de guía para el usuario
  • Mecanismos de interacción novedosos como la posibilidad de comunicarte por Whatsapp directamente con el dueño de la vivienda mediante un icono que abrirá una conversación automáticamente
  • También será posible valorar y comentar las viviendas así como hacer un seguimiento del historial de uso de las mismas

Método UX 2.b Tasks & Sitemap

A continuación, se realiza una matriz de tareas/usuarios, la cual se compone de una lista de tareas en filas y los perfiles de los usuarios en las columnas. Se indicará para cada caso su frecuencia de uso (Low/Moderate/High).

Se creará también el sitemap, que propone una organización lógica de la navegación.

En nuestro caso, consideramos más adecuada la matriz de tareas pues permite visualizar fácil e intuitivamente qué funcionalidades serán más importantes para unos usuarios u otros, permitiendo de un vistazo diferenciar la frecuencia de uso que le dará cada uno.

Método UX 2.c Labelling

Dentro de las ideas innovadoras se engloban el chat online, que permitirá una comunicación fluida con el personal de soporte. El tour virtual, que de manera novedosa muestra la vivienda al usuario mediante realidad virtual o valorar/comentar, para que los próximos usuarios sepan de experiencias anteriores. Por último, también se podrá ver el historial de uso para saber si un piso ha sido alquilado más o menos veces.

Método UX 2.d Wireframes

Los bocetos de la interfaz de la página.


Se recuerda que en esta ficha tenemos un pequeño resumen de la práctica. El resultado final con todos los detalles los encontramos en P2.


Paso 3. SVPJ UX-Case Study

Método UX 3.a ¿Como se cuenta un UX-Case Study?

Con la lectura de MuseMap, hemos podido ver cómo los métodos utilizados de diseño en esta práctica y en anteriores se lleva a cabo en proyectos reales. También hemos conocido otros nuevos métodos como la priorización de funciones o el empathy map.

En definitiva, a la hora de abordar el diseño de cualquier aplicación, sería ideal ver proyectos de otra gente, con el fin de obtener más ideas y aprender de la experiencia de ellos.

Método UX 3.b Logotipo

Para el diseño del logotipo, hemos utilizado la página freelogodesign la cual permite crear logos de manera sencilla. El inconveniente es que la versión gratuita no te permite modificar la resolución del logo, por lo que en nuestro caso, es de 200x200px en formato png.

Si quisiéramos usar dicha imagen como cabecera de twitter, facebook o cualquier red social, la deberíamos de adaptar, ya que de no ser así, no se vería correctamente. La deberíamos de hacer más "rectangular" o apaisada con el fin de que se apropie mejor al formato de las cabeceras.

Método UX 3.c Guidelines

Método UX 3.d Video

El enlace al vídeo resumen se encuentra aquí.


Se recuerda que en esta ficha tenemos un pequeño resumen de la práctica. El resultado final con todos los detalles los encontramos en P3.


Paso 4. Evaluación

Método UX 4.a Casos asignados

En esta práctica, tendremos la perspectiva de evaluador o "cliente de producto". Lo que quiere decir que evaluaremos o comentaremos las partes de diseño de nuestros compañeros, así como sugeriremos mejoras y expresararemos dudas con respecto a partes de los bocetos u otros entregables.

Los compañeros a evaluar son:

Método UX 4.b User Testing

Para la realización de las pruebas de usuario, se ha escogido a nuestro persona ficticia Eva que, como sabemos, es una persona a la que le gusta pasar mucho tiempo con su familia y amigos. Este es el motivo por el cual puede resultar más crítica juzgando una aplicación de compartición como hemos mencionado anteriormente.

En general, los problemas surgen con la falta de implementar aplicaciones en varios idiomas, así como pocas opciones filtrando resultados. Por ejemplo, a la hora de seleccionar hotel, que no se pueda seleccionar el número de habitaciones deseadas o la cantidad de personas que van a viajar.

Método UX 4.c Ranking

Antes de nada, es apropiado comentar que valoramos y respetamos mucho el trabajo de nuestros compañeros.

En general, un punto importante que nos ha dificultado el análisis de sus prácticas ha sido la desorganización con los READMEs. Hay veces en los que la práctica se explica en el readme general, otras en el readme de la práctica en concreto, etc. Por otra parte, los vídeos que se realizaron en la Práctica 3 son atractivos en general, aunque a veces no destacan las funcionalidades distintivas de las aplicaciones.

No obstante, este análisis nos ha servido para aprender otros puntos de vista en cuanto a diseñar, así como conocer aplicaciones que hasta la fecha no sabíamos que existían, como es el caso de las aplicaciones para compartir experiencia o viajes.


Se recuerda que en esta ficha tenemos un pequeño resumen de la práctica. El resultado final con todos los detalles los encontramos en P4.