Grupo: HORAPI Curso: 2019/20
Miembros
- 👤 Diego García Aurelio
diegogaraur - 👤 Miguel Ángel Mena Barrera MenaBarrera
Para la realización del logotipo se ha usado Affinity Designer para realizar las formas del isotipo y Adobe Illustrator para finalizar todo el diseño del imagotipo (refinar el isotipo, añadir el logotipo y realizar las distintas versiones). El logotipo parte de la idea de Viajar + Vamos = Viamos, todo esto hace incapié en que está en primera persona del plural para que se destaque la inclusión, ya que la aplicación tiene como objetivo que una persona encuentre compañeros de viaje. Por otro lado, en el imagotipo se puede ver como se forma una flecha que señala a un punto o viéndolo de otra forma, como tres caminos de personas distintas que se acaban juntando para llegar a un mismo punto. El punto simboliza el destino al que se quiere llegar.
Estas imágenes estaría bien usarlas como foto de perfil de las redes sociales, pero para casos como el encabezado de Twitter sería mejor usar otro tipo de recursos ya que sino obtendríamos un perfil con el Logotipo/Imagotipo demasiado repetitivo.
MuseApp es una aplicación cuya función principal es informar a los usuarios sobre el arte urbano que hay en su entorno.
El equipo de MuseApp ha realizado un análisis que ha partido desde el supuesto hecho de que el ayuntamiento de Londres les ha contratado. El análisis del equipo de Muse App se ha basado en los siguiente puntos:
-
Brainstorming: Han supuesto cuál es su usuario objetivo y las necesidades que este puede tener.
-
Competitive Analysis: Han analizado las diferentes opciones que tienen los usuarios que podría hacerle competencia. Para ello en una tabla han comparado las diferentes aplicaciones, con el objetivo de cerciorarse de que funcionalidades son comunes (y por ello potencialmente interesantes de implementar).
-
Empathy Map: Necesario para tener en cuenta cuales son los objetivos que tendría que cumplir la app desde el punto de vista de los usuarios.
-
Entrevistas y personas: Tras el análisis anterior y las entrevista que tuvieron con personas que potencialmente podrían ser usuarios de la aplicación. Deciden crear dos personas que engloban en general los aspectos comunes de las personas entrevistadas, con el fin de hacer un análisis más acorde a la realidad.
-
Experience Map: Tras sacar objetivos y debilidades de las personas. Realizan el mapa de experiencia gracias al Journey del usuario y sus emociones. De aquí sacan los problemas para tenerlos en cuenta a la hora de diseñar el User Flow.
-
Wireframes: Tras exponer las ideas de cómo debería ser la aplicación, priorizan las funcionalidades que para elaborar los diseños de los bocetos. Realizan 2 iteraciones de bocetos a papel y otras 2 de alta definición con programas especializados en eso.
-
Sitemap: Con los bocetos obtenidos realizan el mapa de navegación de los sitios de la aplicación.
-
Guidelines: Exponen la tipografía, colores e iconografía que usará la aplicación y con estón elaboran las maquetas finales.
Nosotros como equipo estando en su lugar hubiésemos realizado un análisis bastante similar al de MuseApp. Dentro del apartado de análisis competitivo hubiésemos hecho aunque de manera superficial un usability review solo para no cometer los mismo errores que la competencia. También les falta la malla receptora para aportar sus ideas y propuestas de valor. Respecto a las cosas que no hemos utilizado nosotros, nos llama la atención la entrevista a personas, ya que se puede obtener un punto de vista más realista y quizás un Brainstorming para la generación de ideas para aportar en la propuesta de valor y mejorar las personas que inventamos.
Las principales líneas de diseño tomadas para este proyecto vienen marcadas por la propuesta de Google: Material Design, donde podemos comprobar que utilizamos varias de las directrices que google nos aporta en su página oficial.
El color principal de la aplicación de Viamos! parte del Imagotipo que es un violeta 900 de la paleta de colores Material Design y hacemos uso de una variación clara del violeta 900 que usaremos mayoritariamente para botones. También, hemos añadido un color secundario, violeta 50 para el el fondo de los mensajes recibidos de otro usuario.
Viamos! usa Nunito para su logotipo y también lo usa para la aplicación, es una tipografía redondeada y con muchos pesos a elegir, pudiéndolo aplicar para distintas cosas de la aplicación.
Los tamaños usados en la aplicación y su uso vienen marcados por la siguiente imagen:
Los iconos usados en Viamos! son los predeterminados por Material Design usando el tema Redondeados para tener una mayor coherencia con la tipografía. Aquí más información de Material Icons.
Partiendo de los bocetos, destacamos los siguientes componentes que usamos en Viamos!:
Página principal (Buscar):
- SEARCH BAR: Utilizamos una barra de busqueda que sugiere nombres de ciuades con las que va coincidiendo la escritura (omitiendo tildes y mayúsculas).
- OUTLINED BUTTON: Para visualizar los destinos guardados.
- IMAGE LIST: Lista con imágenes de los destinos más frecuentes en las búsquedas.
- BOTTOM BAR: Usamos este componente para un acceso simple al sitio de búsqueda, chats y mi perfil.
Mi perfil:
- Floating Action Button: Permanece fijo en la pantalla, usado para editar la información del perfil del usuario.
Resultado de búsqueda:
- TOP BAR WITH SEARCH BAR: Muestra el nombre del destino buscado con posibilidad de editarlo o realizar otra búsqueda. También podemos volver atrás a la página principal y filtrar la búsqueda.
- CARD LIST: Esta lista contiene los resultados de la búsqueda que coinciden con el término buscado y mostrando además las ciudades u pueblos más cercanos a dicho término. Cada Card contiene una imagen, un titulo + la distancia a la que se encuentra del usuario que está buscando (si ésta ha dado permiso de localización) y la opción de guardar el destino gracias a un icono.
Información de un destino:
- TOP BAR: Con posibilidad de volver atrás, compartir el destino en otras aplicaciones y guardarlo.
- TEXT LIST: Estas se añaden gracias al icono add.
- EXTENDED FLOATING ACTION BUTTON: Características similares al Floating Action Button.
Lista de acompañantes:
- TOP BAR: Con posibilidad de volver atrás y filtrar.
- USER LIST: Listado de otros usuarios con más compatibilidad para ir al destino indicado. Según las actividades en común en ese destino.
Perfil de un acompañante:
- TOP BAR: Con opción de ir atrás e informar acerca del usuario.
- TABS: Un tab para la lista de actividades comunes para el destino buscado y el resto que no coinciden y otro tab para la información acerca del acompañante.
- TEXT LIST: Lista de actividades del usuario.
- EXTENDED FLOATING ACTION BUTTON.
Chats:
- USER LIST: Sirviendo como lista de conversaciones (recividas, enviados, y nuevas conversaciones) (Social chat).
Conversación:
- TOP BAR: Con opción de volver atrás, ver perfil del usuario (icono de la persona) y un menú para otros ajustes (tres puntos).
- MESSAGE LIST: Mostando de un color los enviados y los recibidos (Social chat).
- TEXT FIELD WITH SEND BUTTON: Para enviar mensajes.
Para conocernos y conocer Viamos! mejor puedes ver el siguiente vídeo.
Esta práctica es la que más nos ha gustado, hemos visto las cosas que podríamos haber mejorado gracias al estudio de MuseApp. Por otro lado, hemos apredrido mejor dictar unas líneas de diseño, ya que antes de empezar la práctica no lo teníamos muy claro.