Usted esta aquí - APP Mobile

1

COMIENZO DEL PROYECTO El punto de partida del trabajo consistiรณ en la realizaciรณn de unas actividades en clase

COMIENZO DEL PROYECTO

02

COMIENZO DEL PROYECTO Usted esta aquí comenzó con una primera actividad en clase que nos proponía a pensar en grupos qué problemas nos aquejaban cotidianamente en nuestro día a día para poder empezar a generar toda una red de conexiones que nos llevarían a decantar nuestra idea general.

A continuación se realizará un repaso sobre dicha actividad y las resoluciones propuestas por nuestro equipo de trabajo.

1° Actividad: PROBLEMAS En esta primera instancia se nos alentaba a pensar diversos problemas que creyeramos solucionables a través de tecnologías digitales, más precisamente a través de la utilización de aplicaciones móviles.

¿CÚAL ES EL PROBLEMA?

¿QUIÉN LO TIENE ?

Cambios de recorrido en transportes públicos

Usuarios frecuentes de transportes públicos

Por calles cortadas, arreglos, embotellamientos

Farmacias cerradas durante la noche

Personas/ enfermos con necesidades urgentes

Por horario laboral no todas poseen guardias.

Falta de señaletica en las calles

Peatones y conductores

Porque no existen, o se han dañado o bien sustraido y no repuesto.

Cajeros sin dinero, fuera de servicio.

Personas que necesitan sacar dinero

Porque se quedan sin dinero del que se le depositan o bien no tienen mantenimiento.

¿POR QUÉ?

A partir de los problemas pensados por cada equipo debatíamos porqué pensabamos qué todos eran solucionables a través de una tecnología digital como lo son las apps. Y a partir de ello se nos proponía tomar una sola problemática para continuar con la actividad.

COMIENZO DEL PROYECTO

03

2° Actividad: ÁRBOL DE PROBLEMAS A partir de la problemática elegida anteriormente debíamos comenzar a armar un “Árbol de problemas”. Es decir, debíamos pensar más en profundidad el problema para entenderlo mejor y poder seguir avanzando.

CONSECUENCIAS

Gente que se pierde, llegadas tarde, frustración, enojo.

PROBLEMAS TRONCALES

Falta de señaletica (direcciones, paradas de transportes, indicaciones generales) en las calles de Capital Federal

CAUSAS

Carteles robados o dañados que no han sido respuestos, simple inexistencia de los mismos.

3° Actividad: MAPA DE EMPATÍA Previamente se comenzó a pensar más especificamente en la problemática elegida para poder “desmembrarla” mejor. Por lo que en esta última actividad se proponía pensar en los usuarios y en sus repercursiones a este problema elegido en las actividades anteriores.

DICE

HACE

- No encuentro la calle - Estoy perdido/a - ¿Será esta?

- No sé la altura - ¿Estaré yendo bien?

- Pregunta - Busca en algún mapa - Googlea - Busca una señaletica cerca

PIENSA

SIENTE

- Estoy perdido/a - Voy a llegar tarde - Siempre lo mismo - Podrian poner un cartel...

- Frustración - Enojo - Angustia - Resignación

2

IDEA GENERAL Las actividades previas nos permitieron decantar en una primer idea general para comenzar a pensar puntos clave de nuestros usuarios y de nuestras necesidades

IDEA GENERAL

05

IDEA GENERAL Habiendo trabajado la problemática previamente decidimos también acercarnos a personas de nuestro entorno para comentarle la problemática y tener un contacto aún mas cercano y real hacia lo que los usuarios piensan, hacen o sienten cuando se ven perjudicados.

Por lo que finalmente llegamos a concluir una primer idea general que actuaria como rectora de todo el trabajo y que, nos permitiria comenzar a acercarnos a una solución digital a la vez que seguiamos las bases del proyecto propuesto en la cursada:

“UNA APLICACIÓN QUE COMO PEATON O CONDUCTOR ME PERMITA CONOCER DE FORMA INMEDIATA MI UBICACIÓN”

INFORMACIÓN GENERAL: Esta idea rectora nos permitió dispararnos a pensar en profundidad y a comenzar a definir ciertas cuestiones que nos guiarán de aca a nuestro futuro desarrollo:

NOMBRE Y CONCEPTO:

MEDIO

“USTED ESTA AQUÍ”- La utilización de esta frase nos acerca a pensar en la idea de brindarle seguridad al usuario sobre “donde esta” en un vocabulario cercano y amable.

Aviso publicitario tipo “Print Ad” y aplicación movil disponible para su descarga en el Play Store, de dispositivos Android.

OBJETIVO

INTERACCIÓN

Nuestro próposito es brindar a los usuarios seguridad sobre su ubicación asi como también brindarles toda la información necesaria al momento de estar fuera de casa.

A través de un código QR, ubicado en el Print Ad, se invita al usuario a descargar la aplicación al mismo tiempo que se le propone una actividad lúdica e interactiva entre el propio aviso y la aplicación desarrollada.

TARGET

TECNOLOGÍA

Jóvenes y Adultos rondando los 15-45 años. Frecuentes transeguntes y conductores de la ciudad.

La aplicación al ser pensada originalmente para Android, podrá ser programada con el SDK del mismo.

3

BENCHMARKING Previo a comenzar el desarrollo propio de la app se comenzรณ por investigar apps del mercado actual.

BENCHMARKING

07

BENCHMARKING Antes de comenzar a diseñar y pensar en nuestra aplicación decidimos buscar las aplicaciones que se encuentran actualmente en el mercado y que se relacionan a nuestra propuesta para analizarlas y poder recuperar las mejores práticas.

A continuación analizaremos las app Waze, Google Maps y Here Maps, con el objeto de obtener al final de este benchmarking un diagnóstico que nos permita comenzar a pensar especificamente en Usted esta Aquí.

Waze

Waze es una aplicación social de tránsito automotor en tiempo real y navegación asistida por GPS desarrollada por Waze Mobile.3 El 11 de junio 2013, Google completó la adquisición de Waze en $966 millones de dólares.4

INTERFAZ Maneja una interfaz con una paleta cromática clara que aplica colores blancos y celestes en diversos tonos.

Mientras que su iconografía se presenta con colores vividos e ilustraciones aniñadas que añaden a la aplicación una simpática poco característica en un tema tan pesado como es el tránsito en la ciudad.

DESCRIPCIÓN Waze inicia con una breve descripción de lo que ofrece a los usuarios y permite ingresar sin iniciar sesión o creando una cuenta.

La pantalla principal de la app es un mapa que por geolocalización nos enseña nuestros alrededores donde podremos comenzar a interactuar.

Además del mapa tendremos en la parte inferior un “acceso directo” que nos permitirá agregar información de tránsito, y el icono de la lupa nos remite al menú/ perfil con más opciones para configurar.

BENCHMARKING

08

OPCIONES Aquí observamos la pantalla que nos permite agregar informacion de tránsito catalogada según diversas clasificaciones (Policia, Tráfico, Accidente, Peligro, etc).

Su iconografia nos permite su fácil reconocimiento y lo convierte en un proceso simple y hasta divertido.

Una vez seleccionada la categoria se requieren ciertos datos a completar para brindar mas informacion acerca

del tránsito a nuestro alrededor.

Es importante saber que Waze trabaja con “niveles o jerarquías” que clasifican a los usuarios y limitan sus acciones. Por ejemplo un “Waze bebé” al momento de iniciar la app no puede subir informacion en la categoria Policia.

Categorias

Categoria Tráfico desplegado

BENCHMARKING

09

ALERTAS Y COMENTARIOS Respetando la iconografía que vimos previamente podemos ver como aparecen las alertas en el mapa graficadas y como en la parte superior un lightbox que nos especifica los detalles del aviso y del autor. Posibilitándonos además las opciones de comentar o “gustar” el aviso.

MENU Y AJUSTES El menú de Waze es bastante expeditivo y sencillo. Ofrece las opciones justas y necesarias para la navegación de la app. Entre ellas permite establecer direcciones de Casa/Trabajo para asi crear rutas; permite ver los favoritos seleccionados y los Viajes Planeados ya que además de recibir información del tránsito Waze permite crear rutas de viaje.

Se destacan los Ajustes de la aplicación, ya que se dividen en “Rápidos” y “Avanzados” abriendo un abanico de posibilidades a la hora de customizar la aplicación.

Menú

Ajustes generales

Configuración Avanzada

BENCHMARKING

Google Maps

10

Google Maps es un servidor de aplicaciones de mapas en la web que pertenece a Alphabet Inc. Ofrece imágenes de mapas desplazables, así como fotografías por satélite del mundo e incluso la ruta entre diferentes ubicaciones o imágenes a pie

INTERFAZ La interfaz de Google Maps, va de la mano a toda la identidad conocida de Google. Trabajando con el blanco como color principal y añadiendo detalles en tonalidades azules y celestes. Hace importante uso de iconografía y presenta un diseño muy limpio y ordenado.

DESCRIPCIÓN Google Maps trabaja con geolocalización, por lo que inicia (en caso de no tenerlo activado) con un lightbox requiriendo su activación. Su pantalla principal la compone el mapa casi en su totalidad. En la parte superior encontraremos el menu “hamburguesa” acompañado de un buscador.

Mientras que en la parte inferior derecha encontraremos dos botones: El de ubicación que permite ubicarnos en el momento que nos encontramos actualmente y el dirección que nos permite encontrar una ruta de camino entre dos direcciones.

Inicio de app

BENCHMARKING

MENU Google Maps, ofrece un menu con múltiples opciones ofreciendo una experiencia muy completa en lo que respecta a ubicación.

Entre las posibilidades que podemos encontrar en la app se encuentran: la posibilidad de almacenar direcciones, generar opiniones y puntuaciones sobre los lugares visitados y obtener distintas informaciones con respecto al tráfico de alrededores.

LUGARES Como mencionamos previamente google trabaja con direcciones almacenadas por decisión del usuario.

Para ello ofrece dos posibilidades “Casa” y “Trabajo” para definirlas.

Asi mismo podremos encontrar también los ultimos lugares que visitamos acompañados de la fecha aproximada de visita en caso de que deseemos utilizar sus ubicaciones para alguna búsqueda en particular.

11

BENCHMARKING

12

COMENTARIOS La aplicación nos ofrece la posibilidad de “contribuir” con puntuaciones y comentarios acerca de lugares populares o bien lugares que hayamos visitado con el objeto de contruir una guia de popularidad y comentarios de cada lugar visitado.

INFORMACIÓN Por último, una de las funciones mas importantes de Google Maps es brindarnos información acerca del tránsito. Sin embargo no se queda solamente en esa funcionalidad sino que tambien nos ofrece la posibilidad de ver rutas en donde podremos manejarnos en biciclea (bicisendas) a la vez que también nos identifica las direcciones en las que se encuentran las estaciones de todos los subtes y trenes brindando por ende información sobre tranporte público.

A continuación podremos ver los tres mapas con informaciones distintas. El primero trabajando con colores nos indica el estado de tránsito, siendo el rojo el pesado, naranja el medio y verde el normal. En el segundo podremos ver marcadas con celestes las estaciones cercas de la Linea A, mientras que en la tercer captura podremos observar marcadas con flechas las bicisendas que se encuentran cercanas al punto de geolocalización tomado.

Tránsito

Transporte

Bicisendas

BENCHMARKING

Here WeGo

13

Here WeGo es una aplicación que ofrece un servicio de ubicación generalizado.

Permite conocer las distintas rutas para llegar a los distintos lugares deseados.

Como complemento posee la guía por voz que indica si el usuario está yendo por un lugar equivocado, y a su vez, si las condiciones cambian recibirá actualizaciones en directo y desviaciones recomendadas.

INTERFAZ La interfaz de Here WeGo presenta una estética cuidada con un diseño amplio y limpio. Predominan los colores oscuros, lo cual constrastan con sus iconos de colores fuertes y llamativos. Tiene una buena utilización de blancos y una grilla bien marcada. Por lo cual es sencillo entender la información.

INTERACCIÓN Desde un comienzo, la aplicación invita al usuario a interactuar y le indica al mismo dónde debe clickear.

Utiliza una gran variedad de íconos de público conocimiento para que la interacción sea simple y sencilla.

Con la aplicación se puede: - Elegir entre las rutas para auto, bicicleta, taxi, transporte público, club de autos compartidos y más.

- Comparar todas las opciones por distancia, velocidad o precio para tomar la mejor decisión.

- Encuentrar el camino con la guía visual y auditiva paso a paso para el modo de transporte que se prefiera.

- Obtener actualizaciones en directo para evitar el tráfico y las incidencias con el transporte público.

- Utilizar los mapas sin conexión de datos del celular.

RECURSO DE UBICACIÓN

BENCHMARKING

14

-Menú hamburguesa con lista de opciones.

-Secciones importantes con iconografía en color.

-Utilización de ubicación del gps, para conocer posición del usuario.

-Menú oculto con la posiblidad de ver caracterísiticas específicas de la posición del usuario.

-Posibilidad de logueo para cuestiones específicas, sino no es necesario.

-Posibilidad de registro por facebook o por la aplicación.

-Confirmación de los datos por mail.

BENCHMARKING

-Posibilidad de informar ante cualquier problema de la aplicación.

-Utilización del gps para buscar rutas según especificaciones propias.

15

-Posibilidad de elegir diferentes rutas y compartir las mismas con otros usuarios.

CONCLUSIONES A partir de lo analizado en las aplicaciones previamente detalladas definimos ciertos puntos que no interesarán para aplicar en Usted está Aquí: -No nos limitaremos a solo brindar la ubicación del usuario sino también a ofrecerle información adicional que le sea útil a la persona que se encuentra en la calle o que se encuentra a punto de salir hacia otro destino.

- Permitiremos el logueo tanto por la creación de cuenta como por redes sociales ( facebook y gmail) - Uso de geolocalización y de mapas.

- Utilización de iconografía para colaborar con la usabilidad y claridad.

-Posibilidad de almacenamiento de direcciones y avisos importantes para el usuario y las necesidades de este - Uso de colores plenos, y llamativos que permitan crear un átmosfera moderna y entretenida para tratar una temática que suele ser manipulada de formas mas sobrias y frias.

4

MECĂ NICA Desarrollado el benchmarking y antes de comenzar a diseĂąar es necesario desarrollar la mecĂĄnica del proceso.

MECÁNICA

17

MECÁNICA Definir la mecánica del juego nos permite aclarar el panorama de contenidos y funcionalidad con el objeto de contruir un buen flujo de información.

PRINT AD Asi como la consigna original lo indica el Print Ad debe servir como puente para la aplicación.

Sin embargo en nuestro proyecto decidimos que, además de ser puente para descargar la app a través del código QR, sea parte de la interactividad que deseamos proponer en la aplicación móvil.

El print Ad por su parte se presupone que será un aviso que podrá ser publicado en revistas de interés general como La Nación, Viva, o Caras. Deberán ser medios de comunicación de amplio consumo en la Capital que será en donde en primer lugar actuará la aplicación.

INTERACCIÓN APP- AVISO El aviso contendrá un código QR que permitirá a través de su escaneo la redirección hacia el Play Store (Android) para descargar la aplicación.

Una vez descargada la aplicación automáticamente se activará el “Testeo”.

El Testeo es justamente la interacción entre app y aviso, podrá ser omitido y en ese caso se cargará el menu de la app directamente o bien en caso de no ser omitido la consigna para el usuario es posicionarse encima del anuncio y encontrar haciendo “tap” 5 avisos distintos en menos de 15’’.

Cualquiera sea el caso (ganar, perder) el testeo automáticamente redirige a la aplicación en si misma.

APLICACIÓN La aplicación tendrá un menu principal que constará de 3 acciones: Donde estoy, Mapa y Actualizaciones. Donde estoy permitirá a través del uso de RA identificar la ubicación actual al apuntar la camará hacia donde deseamos ubicarnos y hacer tap. Mapa por su parte nos ofrece un mapa de nuestros alrededores donde podremos visualizar información sobre el tránsito, accidentes y cortes. Actualizaciones por su lado nos permite unirnos a un “chat” en el que usuarios de la app suben actualizaciones recientes.

Adémas de estas funcionalidades, la app permite configurar el perfil, administrar la configuración, tener una lista de favoritos, asi como buscar direcciones especificas para observar el estado de tránsito a sus alrededores.

MECÁNICA

18

FLOW/ DIAGRAMA Ya realizado el benchmarking para analizar cuestiones funcionales y esteticas procederemos a realizar un diagrama de flujo que nos permitirá previo el diseño clarificar el funcionamiento de nuestra aplicación.

Capturar QR del aviso

Play Store Android

Testeo RA con Print Ad

Tap 5 avisos

omitir

Descargar

gana o pierde

MENU PRINCIPAL

DONDE ESTOY

MAPA

ABRIR APP

Menu secundario

ACTUALIZACIONES

Tutorial

Ver contenido

Ver actualizaciones

Tap RA ubicación

Favear aviso

Subir comentario

BUSCAR

PERFIL

Ingresar búsqueda

Editar lugares almacenados

MARCADORES Visualiza avisos favoritos

CONFIGURACION Editar idioma Editar unidad de expresión Editar sonido Editar uso de datos

Funcionalidad principal de la aplicación

CERRAR SESIÓN

5

WIREFRAMES Comenzamos a definir estructuras básicas y grupos de contenido para poder diseñar en el próximo paso.

WIREFRAMES

WIREFRAMES Para mejorar la claridad y comenzar a pensar en criterios de usabilidad es que desarrollamos los wireframes como instancia previa al diseĂąo final.

WIREFRAME DEL AVISO

LOGO

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at gravida tellus, vitae tristique quam. Phasellus nunc mauris, volutpat at tortor at, pretium consequat enim. Ut auctor scelerisque velit et vehicula. Duis ac vulputate ante. Nullam sodales liber

MAPA

DESCARGĂ LA APP Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at gravida tellus, vitae tristique quam. Phasellus nunc mauris.

20

WIREFRAMES

WIREFRAMES DE LA APP Inicio de la aplicaciรณn, Nuevo registro y/o Inicio de sesiรณn.

Inicio del testeo (interaccion con aviso y realidad aumentada)

21

WIREFRAMES

22

Menu hamburguesa desplegado y menu principal. Inicio de tutorial DONDE ESTOY

Tutorial DONDE ESTOY y pantalla de RA para hacer tap y ubicarse.

WIREFRAMES

Pantalla selección Mapa y visualización del mapa con tap desplegado.

Pantalla selección Actualizaciones y chat de usuarios con últimos comentarios

23

WIREFRAMES

Pantallas del menu secundario (hamburguesa)

Pantallas de Configuraciรณn y lightbox.

24

6

DISEÑO FINAL Habiendo diseñado las estructuras básicas y los contenidos procedimos a desarrollar el diseño final.

DISEÑO

26

DISEÑO A continuación mostraremos el diseño final tanto del aviso que se colocará en la revista como de la aplicación completa.

DISEÑO DEL AVISO

ANIMATE A ENCONTRAR LOS AVISOs

Cansado de perderte, de no encontrar la carteles, de estancarte en el tráfico pesado de nuesta ciudad. Conocé USTED ESTA AQUI la nueva app para la ciudad para vos.

DESCARGÁ la app Descarga la app con el codigo qr posiciona la camara sobre la ciudad haz un tap sobre la pantalla y encuentra los avisos

www.ustedestáaquí.com

DISEÑO

DISEÑO DE LA APP Inicio de la aplicación, Nuevo registro y/o Inicio de sesión.

Inicio del testeo (interaccion con aviso y realidad aumentada)

27

DISEĂ‘O

28

Menu hamburguesa desplegado y menu principal. Inicio de tutorial DONDE ESTOY

Tutorial DONDE ESTOY y pantalla de RA para hacer tap y ubicarse.

DISEÑO

Pantalla selección Mapa y visualización del mapa con tap desplegado.

Pantalla selección Actualizaciones y chat de usuarios con últimos comentarios

29

DISEร O

Pantallas del menu secundario (hamburguesa)

Pantallas de Configuraciรณn y lightbox.

30

7

CONCLUSIÓN

CONCLUSIÓN

32

CONCLUSIÓN Como cierre del proyecto desarrollaremos un video promocional con el objeto de mostrar los beneficios del uso de nuestra aplicación.

Por supuesto aún no se encuentra desarrollada sino que será un video a modo referencial pero nuestro objeto es remarcar la utilidad de Usted está aquí.

Si bien es cada vez mayor la presencia de competencia en el mercado, dado que a la vez es cada vez mas “fácil y accesible” el desarrollo de aplicaciones, creemos que nuestro diferencial recae en la tecnología de Realidad Aumentada que incluimos dado que hasta ahora no ha sido visto en otras aplicaciones relacionadas.

Creemos que la inclusión de dicha tecnología a la vez de servir de diferencial, sirve de incentivo y de diversión para el usuario. Como notamos al principio del proyecto mucho de lo que lo usuarios sienten ante la falta de señaletica o problemas de tránsito generales se acerca a sentimientos como frustración, enojo y resignación, por lo que creemos que esta tecnologiá quizás mas “lúdica” puede servir a revertir parte de estos sentimientos comunes.

Por último creemos que además de ser consumidores de infomación, los usuarios también son capaces de ser creadores de información y convertirse en prosumidores, por este motivo es también que apostamos a ellos como generadores de información y parte esencial de nuestro trabajo.

Iara Albarracin, Carla Martinez y AyelĂŠn Moretto