Scan or pay: una guía paso a paso para el proceso de diseño de una aplicación financiera.
Como todos los años llega el momento de hacer la declaración de la renta y veo a mi alrededor que todos mis conocidos entran en pánico. Nadie entiende cómo tiene que presentarla, que papeles necesita, no entienden que documentos necesitan y es un peligro porque si no lo hacemos bien nos ponen una multa o dejamos de desgrabar cosas que nos harían pagar mucho menos.
Así que nuestro problema a tratar es:
“la incomprensión de los documentos financieros y las consecuencia que esto nos trae”
Para encontrar una solución a nuestro problem statement empezamos el proceso de design thinking.
Empezamos con encuestas (31) y entrevistas (5) a diferentes usuarios y descubrimos que al 84,5% les frustra profundamente hacer este tipo de gestiones. Entre los encuestados, profundizamos más en cuáles eran los motivos de esa frustración y lo acotamos a 3 principales.
Los resultados de mi encuesta sugirieron que había varios tipos de usuarios con diversas necesidades. Dos de las personas presentaron casos extremos, ya que se basaron en ciertas necesidades de algunos de los participantes. Por lo tanto, me concentré en la persona más común.
Tras aplicar diversas herramientas en nuestro ux research, que son:
Lean UX · User Journey · User scenario · Empathy map · DAFO · Moscow
Decidimos desarrollar una aplicación que permite escanear documentos, gracias a la base de datos, detecta las partes más conflictivas y te da información sobre ellas, te dice las consecuencias que podrías tener si no se tramitan bien y puedes crear alertas y guardar tus documentos en la misma.
Este sería el Userflow principal de este MVP:
Una vez definido el userflow hicimos el Lo-fi y los primeros testeos para empezar a darle forma a nuestra arquitectura de la información y empezar a definir la interfaz.
Resultado de los testeos:
- repensamos el UX writing por no ser lo suficientemente reconocible para el usuario.
- Cambiamos la pantalla de mi oficina por contener demasiada información.
- Decidimos y redistribuimos los iconos de la tapbar.
Corregidos los cambios de los primeros testeos procedimos a realizar los wireframes del Mid-fi.
Volvimos a realizar testeos con el prototipo Mid-fi y estos fueron los resultados:
- Diseñamos de nuevo el botón de la información de las penalizaciones para darle más relevancia y distinguirlo del buscador.
- Cambiamos el diseño esqueumórfico del portadocumentos por otro más actual y que tuviera más sentido.
- Replanteamos también el ux writing de la pantalla informativa de la información de las penalizaciones.
UI
Empezamos el proceso de crear la interfaz con el moodboard
Nuestras brand attributes son: Joven, moderno e innovador. Las hemos establecido utilizando la herramienta del test de 20 segundos. Hemos mostrado el moodboard a 30 usuarios y ese ha sido el resultado.
En el proceso de diseño de UI hemos tomado dos decisiones importantes:
- Vamos a aventurarnos en el Dark mode porque nuestra función principal el el escaneo y visualización de documentos y estos documentos suelen ser blancos así que necesitamos una elección cromática que nos permita una óptima legibilidad.
- Vamos a utilizar el recurso de los círculos durante todas las pantallas. los círculos que aparecen en nuestra pantalla principal una vez escaneado el documento aparecerán como recurso y forma recurrente para crear una cohesión en el producto. Se han convertido en identidad de marca y crean una coherencia desde el logo hasta los recursos estéticos.
Con estas decisiones tomadas hemos creado una Style tile con los elementos principales de diseño que luego desarrollaremos en una Style guide más completa.
Con todas las decisiones de UI tomadas procedimos a hacer el prototipo Hi-fi.
A continuación veremos los tres flujos principales que resuelven los problemas detectados en en el UX research.
Escaneo de documentos
Como vemos, partimos de la primera pantalla de escáner donde Scan or pay detectara las partes que los usuarios consideran más complicadas y mediante tooltips nos proporciona la información de qué significa cada una. Tenemos un botón de información adicional que nos dice los documentos que tenemos que adjuntar, las fechas límites y las penalizaciones que tendríamos de no hacerlo correctamente.
Portadocumentos y alarmas
En este segundo flujo vemos el apartado de portadocumentos donde podemos guardar los documentos escaneados y activar una alarma en el calendario para recibir un notificación y no se nos pase ningún plazo. el portadocumentos es un ayuda para organizar todos nuestros formularios en la misma app.
Descarga de plantillas y Guardado
Una vez en en la pantalla de información tenemos un buscador de plantillas. buscaríamos el documento oficial que necesitamos y tenemos la opción de descargarlo directamente en la carpeta correspondiente de nuestro portadocumentos.
Creamos una Landing page para promocionar nuestra nueva app, con los botones directos para la descarga directa.
Mayores obstáculos y cómo los hemos solucionado
Los mayores obstáculos que me he encontrado han sido:
- El desconocimiento de cómo funcionan los organismos oficiales y la falta de familiarización con el lenguaje financiero.
Solución: Enfocarme en un solo tipo de trámite e investigarlo a fondo, qué organismos lo llevan, cómo se tramita, qué cosas hacen falta… Y más adelante ir añadiendo más tramitaciones y documentos diferentes. Siendo un MVP nuestro objetivo es que este los más completo posible así que no podemos abarcarlo todo.
- La pantalla principal donde se proporciona toda la información del documento escaneado.
El problema que encontramos es que cada documento tiene un tamaño diferente y mucha información que viéndolo completo en una pantalla pequeña como la de un móvil no se iba a ver bien.
Así que, como podemos ver a continuación, la primera iteración ha sido el resultado de añadir los colores directamente al wireframe.
En la segunda iteración cambiamos el diseño de los botones para diferenciarlos como resultado de los testeos.
Y en la tercera iteración abordamos el problema del tamaño del documento. Decidimos agregar la función de hacer zoom para poder agregar más información y más completa. Como vemos se amplía el documento por el que podemos navegar para analizarlo todo y al pulsar una de las ‘dots’ se nos abre un menú emergente en el que cabe más contenido e información más precisa.
¿Qué he aprendido?
Me gustan los retos y decidí hacer una aplicación sobre un tema como las finanzas, por que es un tema con el que no estoy familiarizada pero que me parece que tiene mucho potencial a la hora de resolver problemas mediante un producto digital.
Así que he aprendido lo importante que es la investigación del tema y de la competencia. Estar enfocado 100% en el usuario porque es algo que se nos va olvidando por el camino y repetirnos el mantra de “Tu no eres tu usuario”.
Y he aprendido también (y conseguido) que se puede hacer que un producto digital de un tema tan “aburrido”, como pueden ser las finanzas, sea atractivo, sencillo e incluso divertido.
Espero que les haya gustado esta publicación (tanto como a mí haciendo la aplicación). Os dejamos el link de figma por si queréis ver más.
Y si quieres hablar sobre diseño de UX/UI, música o simplemente quieres chatear sobre cualquier cosa, puedes conectarte conmigo a través de LinkedIn
