Meep, cómo aplicar procesos de UX al mundo de la movilidad

Ironhack Madrid
11 min readFeb 20, 2019

--

Acabé el bootcamp de UX/UI con la cabeza loca y con ganas de poner en práctica todo lo aprendido. Gracias a Ironhack, surgió la oportunidad de hacerlo nada más salir. Meep contactó con Ironhack preguntando por Diseñadores de UX. Una prueba de concepto más tarde, hangout con el equipo desde todas partes de España y buena sintonía. Empezaría este proyecto en el que he estado trabajando todo este año junto a mi equipo en Muak Studio.

Os cuento en qué consiste este proyecto tan ambicioso donde he echado mano de todo lo aprendido y más. Por adelantar, era todo un reto al que enfrentarse: revolucionar el mundo del transporte y abrir camino en cuanto a movilidad se refiere.

A QUÉ NOS ENFRENTÁBAMOS

Meep es una app que te permite tener todos los medios de transporte en tu bolsillo, es decir que no hace falta que te instales todas las apps de carsharing, bicis, taxis y de transporte público de tu ciudad, con tener Meep es suficiente.

Un todo en uno, como la mítica navaja suiza multiusos que, además, te permite customizar tus preferencias: si estás preocupada por la contaminación o si quieres ir siempre de la manera más cómoda posible o mejor aún, una combinación de las dos, díselo a Meep, y te dará siempre las mejores opciones. Y lo mejor de todo es que te permite hacer viajes multimodales, combinando los trayectos como mejor te venga.

Así es Meep y también es el proyecto en el que llevamos trabajando en Muak Studio desde hace prácticamente un año non-stop. Tenemos que decir que la ilusión y el esfuerzo invertidos en Meep nos ha hecho crecer como profesionales y como estudio, y lo mejor de todo es que hemos podido trabajar todo lo que sabemos hacer de manera simultánea: identidad, branding, diseño gráfico, ux, ui, web, app, vídeo, comunicación, dirección de arte, estrategia… un diseño de producto digital en toda regla. 👏👏👏👏

Hagamos el viaje juntas, os contamos todo el proceso.

PARA ARRANCAR, TOCA INVESTIGAR

Nos empapamos con un poco de contexto haciendo Research o Investigación.

La movilidad es una de las protagonistas de nuestro día a día, nos permite organizar nuestra vida económica y social en la ciudad. Hoy en día disminuir la contaminación y mejorar el tránsito de miles de personas se convierte en un gran reto. Según los datos, en 2025, el 60% de la población mundial vivirá en ciudades, ¡esto es dentro de 6 años!

Mantener la ciudad viva significa que tenemos que afrontar estos retos de la manera más responsable y sostenible posible. Imagina una ciudad sin límites. La tecnología que intenta dar solución a este problema es Mobility as a Service o MaaS (Movilidad como servicio, movilidad inteligente). MaaS es una nueva forma de entender cómo se prestan y cómo se usan los servicios de transporte, cambiando el modelo anterior de vehículo privado por el sharing #carsharing #motosharing #bikesharing y un largo etcétera.

MaaS nos puede ayudar a solucionar muchos problemas que afectan a nuestras ciudades y a responder a las necesidades de transporte del siglo XXI, pero solamente si se implementa y se ejecuta de una manera responsable.

Ahora que ya estamos en camino, vamos con Meep.

¿Cómo me muevo por la ciudad? ¿Hay atasco? ¿Está lloviendo? ¿Qué opciones tengo? ¿Cuál es la más rápida y la más económica? ¿Cuánto C02 emito en cada trayecto?

Meep te permite dar respuesta a todas estas preguntas. Es una app que te busca el mejor trayecto para llegar de un sitio a otro teniendo en cuenta tus preferencias. No tienes que rendirte a ningún transporte y cambiar libremente de uno a otro. Su punto fuerte es que tienes todos los medios de transporte de tu ciudad en una sola app. Así podrás evitar atascos, cambiar de un transporte a otro, contaminar menos… Pillar una bici al bajarte del bus para no tener que subir esa cuesta…

Detectamos que la gente en las grandes urbes se mueven de diferentes formas:

1. Basado en sus preferencias. “No me gusta andar, me da miedo la bici, soy más de Uber que de Cabify…”

2. Basado en sus circunstancias temporales. “No es lo mismo ir que volver. Puedes ir a ver a tu madre en bici y a la vuelta te vas cargada de tuppers que no puedes llevar en bici… Si salgo me vuelvo en taxi”. Entonces miras a ver qué otras opciones tienes… si coges el bus, uber, taxi, bici, car2go…”

Vimos que los usuarios necesitan poder consultar todos los medios de transporte a su alrededor, no más de 350m (no nos gusta movernos demasiado) y queremos saberlo todo, queremos la información rápidamente, lo más detallada y actualizada posible para encontrar la mejor manera de llegar de un sitio a otro. La forma de ir puede ser la más rápida, la más barata, la más eco o la que mejor se ajuste a tus circunstancias (los tuppers).

¿Cuáles son esas preferencias?

  • La más rápida
  • La más barata
  • La más eco

Estas eran las maneras más comunes a la hora de decidir cómo hacer un viaje. Pero Meep va un paso más allá y decide crear una nueva opción:

Forma Meeper, la que más se ajusta a tus preferencias personales sean cuales sean, que podrás determinar en tu Área de Usuario.

CREAMOS LA IDENTIDAD

Paralelamente, la Identidad Corporativa de Meep fue una de las patas a trabajar mientras estábamos a tope con la aplicación. No fue para nada el inicio del proyecto, pero al menos, os lo vamos a contar de manera organizada.

MEEP tenía que ser algo actual, tecnológico, de formas amables, con colores inspirados en el correcaminos. De ahí el nombre (Meep, meep!).

Moodboard

Con todo esto en mente. Surgió la personalidad de Meep.

COLOR. Correcaminos

TEXTURA. Texturas lisas y limpias

FORMA. Formas amables, blanditas, cambiantes, esquinas redondeadas

TIPOGRAFÍA. Coherencia con la forma, redondeada, amable, legible.

TONO. Fresco y desenfadado. Con un toque de humor, pero sencillo y funcional.

DIGITAL. Funcionalidad ante todo. (Fintonic, SkedGo…)

EMPATIZANDO CON LOS USUARIOS

Luego viene la gran pregunta.. ¿Quiénes son nuestros users? Los user persona, son esos arquetipos que creamos para ayudarnos a ponernos en la piel de los usuarios. Estos datos están basados en investigaciones, info y material que recopilamos y que trabajándola así, nos ayuda a empatizar más con los diferentes usuarios. Os presentamos a:

Ahora mismo nos hemos centrado en Madrid, para ver bien ese “ecosistema” en una sola ciudad, pero tenemos más ciudades en marcha: Málaga, Malta, Lisboa…

BENCHMARK Y BEST PRACTICE

Evidentemente antes de ponernos a diseñar, hacemos un benchmark sobre las apps ya existentes en el mundo de la movilidad. Vemos que hay tropecientas apps relacionadas como pueden ser: Waze, Moovel, Chipi, Moovit, Cabify, Free2move, Car2go, Bicimad…muchas de ellas que tendremos que integrar como proveedores dentro de la app. Nos quedamos con los puntos fuertes guardados en el tintero.

UX EN ESTADO PURO

Nos ponemos a elaborar el Diagrama de Flujo de todos los contenidos que va a tener la app.

Esto va variando a medida que avanza el proyecto y los diferentes intereses que tiene una ciudad, otra, un consorcio, inversores… Estamos continuamente rediseñando este flujo. Imprescindible para situarse en el proyecto y hacerse una idea del volumen de trabajo que va a tener. Este es el de hace unos meses… ¡ahora es el triple!

Con el Diagrama de flujo, trazamos los principales caminos que el usuario va a hacer de la app. Los “happy paths” y los no tan felices, claro.

1. Uno, es el MODO INFORMATIVO, donde, desde tu ubicación, puedes explorar qué transportes tienes a tu alrededor. Sería para usuarios que se encuentran en un punto concreto y quieren explorar qué hay disponible cerca de su ubicación ¿¿qué estaciones de metro, tótems, cabify… tengo cerca??

2. El segundo, el MODO BÚSQUEDA, donde el usuario ya mete un punto A y un punto B y quiere buscar la mejor manera para llegar basado en sus circunstancias.

Vemos similitudes y diferencias de ambos casos, y lanzamos muchos, muchísimos bocetos. Surgen dudas… ¿Cómo clasificar los transportes? ¿Por categorías de transportes? ¿Por soluciones? ¿Cuáles? ¿Cómo las vamos a mostrar para no abrumar al usuario con tanta información?¿Cuántas soluciones damos?

Tras muchos bocetos llegamos a la conclusión de que cada modo (informativo y búsqueda), tienen diferentes maneras de uso. Informativo lo vamos a organizar por categorías para que sea más fácil de explorar en el momento. Y los resultados de la búsqueda por soluciones: meep, más rápida, más barata y más eco respondiendo así a las necesidades concretas de los usuarios.

Los resultados a su vez son diferentes: en el modo info, lo ves en un mapa con markers aislados. Primamos cantidad de markers y de transportes, siempre filtrados por categorías, eso sí (es vital que se vea el mapa y no quede sepultado), y en búsqueda, la mejor solución te sale seleccionada por defecto para poder comprarla inmediatamente. Puedes explorar las otras soluciones, tanto dentro de la misma opción o de una a otra categoría. Dentro de cada categoría: Meeper, Rápida, Económica o Barata. Habrá alrededor de 5–8 soluciones, no más.

Además a la hora de buscar, siempre podrás añadir preferencias temporales de si viajes solo o acompañado, hora de salida, etc..

La categoría Meeper, es muy especial, es el punto fuerte de la app, donde desde tu perfil configuras qué transportes quieres usar en base a tu realidad y los resultados se cargarán en base a ella. Por ejemplo, quiero andar lo mínimo posible, no quiero usar bici porque me da miedo conducir por Madrid, no quiero usar transportes que necesiten carnet de conducir porque no tengo… así tus resultados serán lo más afines posibles evitando ese “ruido” en las soluciones.

A PINTAR | UI

Con todo esto, nos lanzamos de lleno al UI, recuperamos el moodboard y nos ponemos a pintar pantallas en Sketch.

Además de poder consultarlo, a través de Meep se puede realizar la compra, que te irá avisando a medida que el trayecto “On the Go” avanza. Te llegarán notificaciones push de cambio de transporte o información relevante para el viaje como pueden ser billetes (¡se acabaron los billetes físicos!). Puedes realizar todas las acciones propias de cada app dentro de Meep y cancelar o informar de incidencias al proveedor de servicios.

Para ello, creamos la barra Real Time, donde puedes consultar el trayecto en tiempo real y encontrar los tickets necesarios para coger el transporte elegido en todo momento. Hay muchas más funcionalidades, pero estas son las más importantes que os contamos.

A medida que el proyecto avanza y trabajamos en equipo tanto en el diseño como en el desarrollo, nos surge la necesidad de tener un orden interno para construir esa coherencia. Creamos el Sistema de Diseño para que los diseñadores UX y los Desarrolladores de Android e iOS podamos trabajar más cómodamente.

Exportamos los diseños en Zeplin para que ellos los puedan ver de manera ágil y certera y conectamos todas las tecnologías que usamos a través de Slack (Trello, Drive, Sketch, Zeplin…).

PROTOTIPADO Y TESTEO

Mientras se va desarrollando el back-end, montamos los prototipos para hacer pruebas internas, testeo con usuarios reales, presentaciones a inversores o acudir a eventos.

Hacemos testeo tanto a usuarios de iOS como Android para tener una muestra real. Preparamos concienzudamente la entrevista, con su ratito de mini entrevista para conocer los hábitos de cómo se mueven los usuarios por la ciudad, entrar en calor y plantear los objetivos o “tasks” que queremos ver si se cumplen.

Como veis, agotamos prácticamente la batería de los ordenadores, jaja

Aquí nuestros betatesters:

Sacamos en claro muchas “oportunidades de diseño” gracias a los patrones que detectamos y nos preparamos para atacarlas en los siguientes sprints.

Las buenas noticias no tardan en llegar y nos dicen que Meep ha sido seleccionado para el SOL Lisboa, el South Summit o el Product Hackers Awards. Todo un logro que nos dan más ganas de seguir mejorando.

Os dejamos el vídeo donde se ve la app y explicamos todo lo que puedes hacer con ella:

Paralelamente, vamos trabajando desde Muak Studio el resto de necesidades que conlleva sacar un producto nuevo a la luz: tarjetas, presentaciones corporativas, la web, la estrategia de comunicación, stands para eventos varios, redes sociales…

Aún no hemos lanzado la app en Madrid, pero si vives en Málaga, Lisboa o Malta, ¡ya puedes ser un Meeper!

Esperamos que os haya parecido interesante. ¡Resumir un año de trabajo es complicado! Todos los comentarios, sugerencias, críticas etc, serán muy bienvenidas. Y si te ha gustado, compartir es amar.

--

--

Ironhack Madrid

Ironhack is a global #techschool with campuses in Miami, Madrid, Barcelona, Paris, Mexico and Berlin. We offer courses in #WebDev and #UXUIDesign. Contact us!