Skip to content

Prácticas Diseño Interfaces de Usuario 2019-20

License

Notifications You must be signed in to change notification settings

romanlarrosa/DIU20

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DIU20

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

Grupo: DIU2_OrtegayGasset Curso: 2019/20

Proyecto: Sharee

Descripción: Sharee es una aplicación movil desde la cual podrás publicar o buscar piso para compartir. Guarda tus anuncios favoritos y las búsquedas que suelas hacer habitualmente, y mira lo que antiguos compañeros piensan de tu casero o sus inquilinos!

Logotipo:

Miembros


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

Proceso de Diseño

El punto de partida para empezar a diseñar Sharee fue elegir la aplicación que consideraramos más competitiva en el mercado, buscar sus puntos críticos e intentar solucionarlos, y proporcionar un diseño más amigable e intuitivo para marcar una diferencia.

Paso 1. UX Desk Research & Analisis

Método UX 1.a Competitive Analysis

Los servicios que encontramos contra los que Sharee competiría son Habitoom, Stuckers y Badi. Elegimos Badi porque nos parece el mas completo contra el que competir. Más información sobre la decisión aqui

Método UX 1.b Persona

Para poder identificar posibles problemas de cara a las funcionalidades de Sharee, hicimos uso de dos personas ficticias con necesidades y situaciones diferentes para ver qué dificultades encontraban en Badi que pudiésemos mejorar en Sharee. Elegimos a Ashley y a Guillermo, puedes encontrar más información sobre ellos aqui

Método UX 1.c User Journey Map

Escogimos las dos experiencias que rigen las funcionalidades más basicas sobre las que se construye Badi para encontrar puntos críticos muy señalables. Puedes ver los mapas de experiencia aqui

Método UX 1.d Usability Review

Analizamos Badi a fondo para tener claros sus puntos fuertes y saber concretamente cuales son sus puntos a mejorar. Para nuestra sorpresa encontramos diversos puntos débiles que nos ayudarían a mejorar nuestro diseño de una forma muy sencilla.

  • Enlace al documento: aqui
  • Valoración final: 83/100
  • Comentario sobre la valoración: Aunque es una nota alta, no estamos muy de acuerdo con el método de puntuación. Puedes encontrar nuestra valoración completa aqui

Paso 2. UX Design

Método UX 2.a Feedback Capture Grid

Decidimos agrupar las características analizadas en el Usability Review para organizar claramente qué cosas queriamos mantener, cuales mejorar, y cuales añadir. Puedes ver el capture grid de estos aspectos aqui.

Basándonos en el capture grid, encontramos 3 funcionalidades clave en las que centrarnos. Puedes conocer más acerca de esto aqui.

Método UX 2.b Tasks & Sitemap

Desarrollamos el mapa de nuestra aplicación para tener claro dónde situar cada característica antes de comenzar con los primeros bocetos. De esta manera, realizar los bocetos es mucho más sencillo porque tenemos un mapa desde el que guiarnos:

Diseñamos también los pasos a seguir para las nuevas funcionalidades que añadiremos a nuestro proyecto. Las hemos agrupado en 5 Task Flows:

Método UX 2.c Labelling

Entonces realizamos el labelling de nuestro servicio para tener claro desde el principio a qué nos referíamos con cada término y cómo iba a ser su representación iconográfica en la aplicación. Estos iconos no tienen por qué coincidir con los de la versión final del servicio, sino servir de guía para su representación. Puedes encontrar el documento aqui

Método UX 2.d Wireframes

Entonces realizamos los primeros bocetos de la aplicación, siguiendo el labelling y los taskflow realizados anteriormente, respetando el mapa del sitio. Obtenemos un diseño con detalle medio de las nuevas funcionalidades. Puedes ver los bocetos aqui

Paso 3. OrtegayGasset UX-Case Study

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

Analizamos una experiencia de UX-Case Study de un proyecto ya finalizado. De ella extraemos nuevos métodos que podríamos haber puesto en prática y una forma de organizar nuestro repositorio que resulte más atractiva y explicativa sobre nuestro proyecto. Puedes encontrar nuestro análisis completo aquí.

Método UX 3.b Logotipo

Para el diseño del logotipo de sharee se ha utilizado Illustrator, una herramienta de edición de archivos vectoriales. Siguiendo los requerimientos para logos de Google para la Google Play, el siguiente logo tiene una resolución de 512x512px y un formato PNG.

Para usar el logo en distintas plataformas habría que tener versiones en diferentes resoluciones, algo sencillo teniendo en cuenta que la versión original está vectorizada y que puede generarse un archivo de cualquier resolución. La forma de usar las distintas resoluciones para RRSS u otro tipo de aplicaciones del logo deberían ir especificadas en el manual del diseño aportado por el diseñador gráfico que hemos contratado para el proyecto.

Método UX 3.c Guidelines

Es necesario seguir unas guidelines actuales, documentadas y justificadas. Consideramos que reutilizar las buenas prácticas de diseñadores ayudará a que nuestro servicio se vea actualizado y acorde a las tendencias actuales, además de ahorrarnos tiempo en las decisiones de diseño que ya han sido resueltas por otros diseñadores. Puedes acceder a nuestra propuesta de diseño del proyecto aquí. Un resumen de nuestras decisiones puede concretarse en el siguiente styleguide:

Método UX 3.d Video

Este video documenta y resume nuestra propuesta de servicio. Más información aqui

Paso 4. Evaluación

Método UX 4.a Casos asignados

Caso 1: Aplicación donde se publican imágenes y videos de los viajes de los usuarios, pudiéndose crear chats para conocerse o viajar en grupo: Web

Hoja de evaluacion

Conclusiones

Caso 2: Bladi es una aplicación de alquiler de pisos y control de gastos de convivencia: Web

Hoja de evaluacion

Conclusiones

Caso 3: CoNect es una aplicación de actividades de ocio donde se priorizan los sistemas de valoraciones y la sencillez para publicar o ver actividades: Web

Hoja de evaluacion

Conclusiones

Método UX 4.b User Testing

Seleccionamos a nuestra persona ficticia Ashley Miles. Para consultar los problemas que le surgen durante el uso de los servicios haz click aqui

Método UX. 4.c Ranking

Ranking de los casos evaluados

  1. DIU2_Plata: 80
  2. DIU3_MAP: 75
  3. DIU1_PAPAYA: 59

Puedes encontrar más detalles aquí

La lección que sacamos tras el análisis de estos casos de estudio es la importancia de documentar de manera clara, transparente y ordenada los disintos aspectos de una propuesta de proyecto de cara a atraer al mayor número de usuarios e interesados posible.

Paso 5. Evaluación de Accesibilidad

Método UX 5.a Accesibility evaluation Report

Indica qué pretendes evaluar (de accesibilidad) y qué resultados has obtenido + Valoración personal

Evaluación de la Accesibilidad (con simuladores o verificación de WACG)

Conclusión final / Valoración de las prácticas

(90-150 palabras) Opinión del proceso de desarrollo de diseño siguiendo metodología UX y valoración (positiva /negativa) de los resultados obtenidos

About

Prácticas Diseño Interfaces de Usuario 2019-20

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 47.1%
  • HTML 37.5%
  • CSS 15.4%