Contenido

MIGRI APP DE MIGRACION CON UI/UX


https://miro.medium.com/v2/resize:fit:700/1*yw_DsNRIw0_fNk2X_AaSog.png

Migri, una aplicación que facilita los trámites burocráticos para las personas migrantes [UX Case Study]

  • 🤔 Un planteamiento de un problema
  • 💼 Un gran equipo: Alejandra Azpurua, Joan Carreras, Matías Oyarzún y Marta Landín (yo)
  • 📅 4 meses de desarrollo del proyecto
  • ✏️ Herramientas: Figma, Miro, Typeform, Condens, Google Trends, Lookback, FeatherIcons, Pablo Stanley Illustrations, lápiz y papel.
  • 🗒 Técnicas: Entrevistas, Empathy Map, Desk Research, Benchmark, Customer Journey, Encuestas, User Persona, User Story Mapping, Site Map, Userflows, Wireframes, Prototipo y User Testing.
  • 🚀 Emoción y motivación infinitas

Resumen

En el 2022 me embarqué en un viaje con Nuclio Digital School en el que tuvimos que desarrollar un proyecto UX/UI desde cero.

Utilizando la metodología de Design Thinking comenzamos esta travesía donde pusimos en práctica diferentes técnicas.

https://miro.medium.com/v2/resize:fit:700/0*ZFji2rS5_XRUAWnx

Fase 1: Empatización

Para empezar, hicimos una sesión de brainstorming y un mindmap para elegir un tema. De todos los propuestos el elegido fue la Migración.

1.1. Entrevistas

En la primera fase, hicimos una investigación para entender mejor este tema.

Para esto realizamos 15 entrevistas semiestructuradas con 30 preguntas cada una.

De las entrevistas pudimos obtener varios insights que nos ayudaron a definir el problema:

https://miro.medium.com/v2/resize:fit:700/0*vMQoL2YMj3O8Q6fg

1.2. Empathy Map

La mayoría de las personas que encuentran una barrera con los trámites burocráticos son personas no europeas que vienen buscando una mejor calidad de vida, nuevas oportunidades, mayor seguridad o refugio. Además de todos estos obstáculos se encuentran con un abandono administrativo que les hace sentirse solos lejos de sus familias y que provocan problemas de salud mental como la ansiedad o la depresión.

https://miro.medium.com/v2/resize:fit:700/0*m4dGLxOQVb8YwJ0L

1.3. Desk Research

En nuestro desk research nos dimos cuenta que sólo desde el 2013 más de 6 millones de personas han migrado a España, que más de 55 mil personas (3 veces las personas que caben en el Palau Sant Jordi) han declarado haber necesitado apoyo para realizar sus procesos migratorios y más de un 1 millón y medio han pasado por procesos migratorios.

https://miro.medium.com/v2/resize:fit:700/0*EFvQnQIec5p6MHf8

1.4. Benchmark

Como parte de nuestra investigación analizamos nuestros potenciales competidores directos en el mercado para descubrir cuáles son sus mejores prácticas y de esta manera, priorizar e identificar aquellas carencias en recursos o soluciones para resolver el mismo problema.

https://miro.medium.com/v2/resize:fit:700/0*kqI_HDdq1Cwh06oZ

1.5. Customer Journey

Con el User journey podemos analizar cómo nuestra User Persona se enfrenta a todo el proceso migratorio desde que decide migrar hasta que obtiene sus documentos legales. De esta manera podemos identificar oportunidades para resolver los mayores puntos de dolor durante el proceso.

https://miro.medium.com/v2/resize:fit:700/0*8MxVYEw1NRy14Dnd

Fase 2: Definición

2.1. Validación de Insights

Posteriormente realizamos una encuesta con 10 preguntas en la que participaron 82 personas y validamos nuestros insights: las personas migrantes quieren que la obtención de sus documentos legales sea más accesible, ágil y sin barreras informativas o de lenguaje técnico.

2.2. Problem Statement

“Existe una falta de claridad y poca accesibilidad a información sobre los trámites burocráticos para obtener los documentos legales de las personas migrantes”

2.3. User Persona

Para seguir con nuestro proceso de empatización dentro de la metodología de Design Thinking, definimos una User Persona con sus motivaciones y frustraciones.

https://miro.medium.com/v2/resize:fit:700/0*ZxTPFb6EvWRDFc_z

Fase 3: Ideación

3.1. User Story Mapping y MVP

Con la ayuda del User Story Map vamos creando las “historias de usuarios” y de esta manera pasar a definir las potenciales features que pueden conformar nuestro producto.

https://miro.medium.com/v2/resize:fit:700/0*F20khboqbeKCIoAc

Después, priorizamos las features identificando cuales son las imprescindibles que dan solución al problema planteado para crear un producto mínimo viable: MVP.

https://miro.medium.com/v2/resize:fit:700/0*nHqoa5EEQtzlr-ss

3.2. Site Map

Una vez llegados a este punto, construimos nuestro Site Map para organizar la arquitectura de la información que conformará el esqueleto principal de nuestro producto. En la fase de validación y testeo, nuestra AI iteró cambiando ligeramente.

https://miro.medium.com/v2/resize:fit:700/0*yFdQM6S9DcL3ikv5

Iteración Site Map

https://miro.medium.com/v2/resize:fit:700/0*ci0FfTbz2W0rxYA6

Gracias a estas técnicas, conseguimos tener una idea más clara del producto que vamos a desarrollar:

  • Será una App Móvil freemium, esto facilitará al usuario consultar cualquier información, estado del trámite, cita o requisito en cualquier momento.
  • Se seleccionará el país de origen, esto ayudará a que los requisitos de los trámites se ajusten al usuario ya que estos cambian dependiendo del lugar de procedencia.
  • Habrá planes de pago, donde el usuario podrá elegir el que mejor se adapte a sus necesidades en el caso que necesite contactar con un asesor o abogado.
  • El usuario tendrá la opción de acceder a la información de cada trámite de forma gratuita y si quiere comenzar un trámite, deberá registrarse gratuitamente para evitar un porcentaje menor de tasa de abandono desde el inicio.
  • Habrá una sección de trámites destacados que lo conformarán aquellos trámites más comunes como el NIE o el Padrón, ya que son unos de los principales documentos legales que se solicitan para realizar la mayoría de los trámites.
  • Con el sesgo cognitivo de Zigarniff effect, el usuario podrá hacer un seguimiento de sus trámites en todo momento y retomarlos en el lugar donde los habías dejado.
  • Habrá una sección de comunidad mediada donde los usuarios podrán intercambiar sus experiencias con otros usuarios respecto a los trámites legales.

3.3. Userflows

Con nuestra idea de producto en mente, realizamos los principales flujos de usuarios como el del registro y la selección de un trámite, que también sufrieron alguna iteración después de la fase de validación y testeo.

Flujo principal

https://miro.medium.com/v2/resize:fit:700/0*W3BPqYjQM2FyPNPb

Iteración Flujo principal

https://miro.medium.com/v2/resize:fit:700/0*2t-TTtUT323NEXu3

Fase 4: Prototipar

4.1. Wireframes

Realizamos wireframes de pantallas en Media Fidelidad (Mi-Fi) incluyendo todos aquellos elementos que consideramos necesarios de cada uno de los flows de nuestro MVP.

https://miro.medium.com/v2/resize:fit:700/0*2b1E3C9-KNX7Ja7J

4.2. Branding, Styleguide y wireframes Hi-Fi

Después definimos el branding de nuestro producto pensando en un logo cercano donde las “i” pudieran recordar a personas con la intención de que el usuario pudiera sentirse identificado.

https://miro.medium.com/v2/resize:fit:700/0*rOEmSiZuFCIWRvnm

Un reto fue la búsqueda de nuestra imagen ya que, la migración es un tema bastante delicado y serio por lo que buscábamos transmitir cercanía y confianza con un estilo desenfadado teniendo cuidado de no caer en banalizar el producto y su contenido evitando ser tedioso o aburrido.

Utilizamos un kit de ilustraciones de Pablo Stanley que encajaban muy bien con el tono que queríamos utilizar.

Nos decidimos por un Surface Color blanco para que la App fuera lo más clara posible, ya que, había varios elementos que podían hacer que el contenido fuera abrumador con tanta información y de esta manera no dificultara la lectura.

Como color primario elegimos el morado #8965F6 y el verde #03C0C0 como color secundario. Por último, como fuente, utilizamos Rubik.

https://miro.medium.com/v2/resize:fit:700/0*FYp6Ciw7tFRoVAcx

La definición de nuestra Styleguide nos ayudó a establecer los elementos de nuestro Sistema de Diseño para ir conformando poco a poco las pantallas de nuestros prototipos de Alta Fidelidad (Hi-Fi).

https://miro.medium.com/v2/resize:fit:700/0*wbBOVoPyQVulMLA_

https://miro.medium.com/v2/resize:fit:700/0*StogYM4CnLZ3SLJV

Fase 5: Testear

5.1. User Testing

Realizamos un User testing presencial con 3 usuarios potenciales escogidas entre personas migrantes entre 18 y 55 años hispanohablantes.

Obtuvimos un feedback muy valioso que nos ayudó mucho para realizar aquellos ajustes en nuestra última iteración (por el momento…).

https://miro.medium.com/v2/resize:fit:700/0*iluqGuawWNqb5R0P

https://miro.medium.com/v2/resize:fit:700/0*BoMLf8eyLje0_QrP

https://miro.medium.com/v2/resize:fit:700/0*LBVCxwvB_Nj-EF3O

https://miro.medium.com/v2/resize:fit:700/0*V7aWH9TM4cKT6LT7

https://miro.medium.com/v2/resize:fit:700/0*V0N6zNIuQ4F32A4t

https://miro.medium.com/v2/resize:fit:700/0*uqK6QveHbPJ2-WqM

https://miro.medium.com/v2/resize:fit:700/0*YipcxQF_0zD4vh8h

Cabe destacar, que también obtuvimos feedback muy positivo de parte de los usuarios.

https://miro.medium.com/v2/resize:fit:700/0*JHFGxVaOnBQyYRxi

5.2. Prototipo completo

LEARNINGS

  • Es muy complicado realizar una App donde su contenido está basado en bases de datos de administraciones públicas del gobierno ya que por privacidad es imposible cruzar datos.
  • Es muy importante utilizar un lenguaje menos técnico y más accesible, esto genera más confianza y cercanía en el usuario dando la sensación de una atención más humana.
  • Como bien dice el sesgo de Jakob’s law, los usuarios están hartos de interactuar con otras aplicaciones que no son las tuyas a diario por lo que es importante no reinventar la rueda ya que puede generar confusión.
  • Es importante inspirar confianza a los usuarios, de esta manera, les darás la seguridad que necesitan para que interactúen con tu App sin miedo.

Disfrutamos mucho con este proyecto y estamos muy contentos de haber diseñado una solución que se pueda traducir en un producto que pueda ayudar a muchas personas en este proceso tan difícil que es migrar.

¡Muchas gracias por leer!