Prácticas Diseño Interfaces de Usuario 2020-21 (Tema: Experiencias y planificación de ocio)
Grupo: DIU3_AfterWork. Curso: 2020/21 Updated: 5/5/2021
Proyecto: Mira2
Descripción:
Mira2 es una aplicación móvil que ofrece rutas por miradores en la ciudad de Granada. A modo de red social, se pueden consultar aquellas personas que ya están inscritas en la actividad, pudiendo conocer gente nueva. La aplicación ofrece rutas del mes, y muchos puntos no descubiertos de la ciudad. ¿Te apuntas al siguiente paseo? ¡Descargala ya!
Logotipo:
Miembros
En esta práctica estudiamos un caso de plataforma para planificación y experiencias de ocio. Para ello, usaremos herramientas y entregables descritos en este Checklist (https://github.com/mgea/UX-DIU-Checklist)
Para comenzar a desarrollar Mira2 elegimos varias aplicaciones que competían entre si en el mercado. Entre estas aplicaciones, buscamos sus defectos y sus virtudes para poder unir las ventajas de estas plataformas.
Las plataformas que encontramos que compitiesen con Mira2 son Civitatis, GetYourGuide y Walk in Granada. Elegimos Civitatis porque es de los servicios más completos que hay para realizar actividades. Para obtener más información sobre la decisión clica aqui
Para poder identificar los posibles problemas que puedan tener las funcionalidades de Sharee, hemos hecho uso de dos personas ficticias que tienen necesidades y situaciones muy distintas, para así lograr encontrar dificultades que pudiesen tener en Civitatis y con esto poder mejorarlas en Mira2. Elegimos a Diana y Esteban. Puedes obtener más información clicando aqui
Escogimos dos experiencias de usuario que explotan bastantes funcionalidades de la plataforma para poder saber cuales son sus puntos débiles. Para ver los mapas de experiencia clica aqui
Analizamos Civitatis a fondo para tener claros sus pros y sus contras, para saber concretamente cuales son sus puntos a mejorar. Hemos encontrado varios puntos débiles que nos ayudarán a mejorar nuestro diseño de una forma muy sencilla.
- Enlace al documento: aqui
- Valoración final (numérica): 80/100
- Comentario sobre la valoración: Creemos que la puntuación total se decide en bastante medida por la parte de diseño de la interfaz y no tanto por las funciones que ofrece. Puede encontrar la valoración completa clicando aqui
Hemos agrupado las características que hemos analizado en el apartado anterior, para organizar qué cosas queremos mantener, cuales queremos mejorar y cuales debemos añadir.
Para ver el capture grid pulsa aquí
Hemos encontrado 4 aspectos relevantes, basándonos en el capture grid, y en estos nos centraremos para realizar nuestra aplicación. Para ver más información sobre esto clica aquí
Nuestro servicio se llama Mira2 e implementaremos funcionalidades que están relacionadas con:
- Chat en directo con la organización de la actividad.
- Visualización de los participantes en la actividad.
- Sistema de información de medios de transporte.
Para conocer más sobre la propuesta de valor y ver el LeanUXCanvas pulsa aquí
Hemos diseñado los pasos a seguir para 3 de las funcionalidades que diferenciarán a nuestro servicio de sus competidores. Se pueden consultar en el siguiente enlace:
Para tener claro dónde situar cada característica en nuestra aplicación hemos desarrollado el Sitemap, antes de comenzar a realizar los primeros Wireframes. Teniendo un Sitemap es mucho más sencillo realizar los bocetos.
En cuanto al labelling del servicio, nos sirve para tener claro a qué nos referimos 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é coincidair con los de la versión final del servicio, sino servir como una guía para su representación. Puede encontrar el documento clicando aquí
Para terminar esta parte, realizamos algunos bocetos de la aplicación, de acuerdo con el labelling y los taskflow que hemos realizado y respetando el mapa del sitio. Hemos diseñado los bocetos con un detalle medio-alto de las páginas principales. Para ver los bocetos clica aquí
Basándonos en las líneas de diseño de Google para aplicaciones móviles realizaremos el Prototipado y el Mockup. Google nos ofrece una guía muy detallada de diseño y su justificación se puede encontrar en material.io.
En cuanto a la tipografía, hemos escogidos dos fuentes para nuestra aplicación. En cuanto a los colores, nos hemos basado en las líneas de diseño de Google y hemos usado su herramienta. En cuanto a la iconografía, intentaremos mantener la iconografía que habíamos utilizado en el labelling de la práctica dos
La información de iconografía, colores y tipografía se pueden consultar aquí
El logotipo que hemos diseñado se compone de dos partes, la parte del icono diseñado por composición de imágenes de un ojo, de una bola del mundo y de un dibujo de la Alhambra. El logotipo se puede visualizar clicando aquí.
Algunas imágenes que nos inspiran son, el reunirse con amigos para realizar actividades al aire libre, y la variedad paisajística que se puede disfrutar desde los distintos puntos de la ciudad de Granada.
La composición de todos estos elementos se pueden observar en el moodboard.
El moodboard se puede visualizar clicando aquí
Se puede consultar el landing page aquí
Los guidelines que usaremos son los de Material Design, realizados por Google. Para conocer más información sobre el guideline escogido pulsa aquí
Los Mockup/prototipado se pueden visualizar clicando aquí
Nuestra valoración como equipo sobre lo realizado en esta práctica y los problemas que han ido surgiendo se puede consultar clicando aquí
Su proyecto se llama Tranger, es una plataforma para crear itinerarios de diferentes temáticas, y para participar en actividades, los usuarios pueden consultar las experiencias de otros clientes que ya hayan participado en los itinerarios y actividades del portal. Puede consultar la información completa aquí
Breve descripción del caso asignado con enlace a su repositorio Github
Seleccione 4 personas ficticias. Exprese las ideas de posibles situaciones conflictivas de esa persona en las propuestas evaluadas. Asigne dos a Caso A y 2 al caso B
| Usuarios | Sexo/Edad | Ocupación | Exp.TIC | Personalidad | Plataforma | TestA/B |
|---|---|---|---|---|---|---|
| 1 | H / 34 | Bombero | Media | Atletico/Activo | Web | A |
| 2 | M / 22 | Estudiante | Avanzada | Soñadora/Introvertida | Móvil | A |
| 3 | H / 56 | Pescadero | Baja | Familiar/Trabajador | Web | B |
| 4 | M / 41 | Enfermera | Baja/Media | Extrovertida/Racional | Móvil | B |
Para desarrollar el test hemos usado a las cuatro personas, las dos primeras para hacer el test A que es sobre nuestra Web, para poder así comparar mejor lo que tenía un proyecto que el otro no tuviese, o en qué ámbitos era mejor uno que otro. Por tanto el test B son las dos otras personas que valorarán la Web de nuestros compañeros del equipo PJ.
En este enlace puede encontrar el Usability Report del Caso B.
Nuestro proceso de desarrollo de diseño siguiendo metodología UX ha sido una tarea de complejidad media. Al comienzo nos encontramos con muchos dilemas de cómo queríamos enfocar la aplicación y tuvimos que tomar muchas decisiones, en cuanto a paleta de colores, tipografía, etc. La valoración de lo obtenido es muy positiva, ya que podemos comprobar que, tras realizar muchos análisis, hemos obtenido un buen diseño.