Fintick | UX UI Case Study

Violeta Goldin
6 min readNov 30, 2018

--

Tickets, organización y consumo responsable 🌿

Puedes leer la versión en inglés aquí.

Introducción

Como todos sabemos, los recursos utilizados para la producción de papel son limitados y están agotándose cada día, generando un gran impacto medioambiental. Una de las formas masivas de consumo es a través de los tickets de papel emitidos en tiendas físicas.

Sabiendo que las empresas gastan millones por año en tickets de papel, y 3,2 millones de kms de tickets se imprimen anualmente solo en España, creo que es momento de buscar una solución mejor.

Metodología

Para desarrollar este proyecto utilicé la metodología de doble diamante, comenzando con una investigación y observación en la fase divergente, y estableciendo la definición del problema en la fase convergente. A continuación repetí el diamante con los procesos de ideación y prototipado en cada fase divergente y convergente correspondientemente.

A partir de un cronograma de trabajo para las siguientes tres semanas y una lista de tareas, comencé la investigación de este tema.

Observación 🔍

Desk Research

Haciendo búsquedas por internet me encontré con varias aplicaciones móviles españoles enfocadas en el ticket digital, pero la mayoría de ellas sólo presentaba la función de escaneo de tickets de papel. Esto significa que el papel sigue siendo impreso y desechado una vez que no lo necesitas.

Safari

A través de una investigación contextual descubrí que Decathlon ofrece una nueva opción al realizar una compra, de recibir el ticket por correo electrónico en vez de impreso en papel (algo que Apple viene haciendo hace bastante tiempo), pero si te tomas más de 30 segundos considerando esta nueva opción que te ofrecen, el ticket sale impreso por defecto.

También me encontré con un dato curioso acerca de la famosa empresa Eastpack, ofrecen una garantía de 30 años en sus productos. (¿Soy la única que piensa que es imposible guardar un ticket tanto tiempo?)

Cuestionarios

A través de Google Forms lanzo una lista de diez preguntas y esta la información cuantitativa que recogí, de las 99 respuestas de personas entre 16 y 55 años de edad:

  • 100% dice que se preocupa por el medio ambiente.
  • 75% utiliza el móvil frecuentemente, y el 45% lo utiliza para organizarse.
  • 99% estaría interesado en una app móvil donde tener los tickets digitales.

Entrevistas

Realicé entrevistas a cuatro personas, de distintas edades y diversos perfiles, para ver cómo interactúan con los tickets en su día a día, y para aprender sobre sus metas y frustraciones.

Para organizar toda la información recogida de las entrevistas creé un Point of View canvas, y de éste extraje los siguientes findings:

  • “Querría tener un informe de mis gastos y poder compartirlo”.
  • “Guardo todos los tickets por si quiero devolver algo, pero antes los clasifico según los pueda necesitar o no.”
  • “La información del banco es muy incompleta.”
  • “Quisiera que esté todo integrado en una misma app.”

Definición 🖊

User persona

Con toda la información recogida en la investigación cuantitativa y cualitativa creé a Carla Lopez, una mujer de 32 años que dice “Guardo todos los tickets y después clasifico cuáles me puedo tirar si no me sirven”.

User Persona

Dentro de sus objetivos se encuentran: poder compartir los movimientos y gastos, poder cambiar o devolver lo que compró, ahorrar papel y poder organizar sus tickets según tipo de gasto.Y entre sus frustraciones, no tener control sobre sus gastos en efectivo, la información limitada que le provee el banco, y tener demasiadas apps para poder organizar sus finanzas.

Customer journey

A continuación creé el viaje de Carla al supermercado, donde se enfrenta a una serie de problemas que le generan frustración, como recibir un ticket de papel para empezar.

Customer journey

Insights

De toda la información recogida definí los siguientes insights, con los que trabajaré para poder establecer el problema a continuación.

  • Necesidad de un ticket digital.
  • Necesidad de clasificación de tickets según tipo de gasto.
  • Necesidad de mayor información en movimientos bancarios
  • Necesidad de unificación de herramientas de distintas apps dirigidas al control de finanzas.

Definición de problema

Partiendo de la formulación de preguntas en formato de How Might We procedo a definir el problema:

Creación de servicio de digitalización de tickets, sincronizado en tiempo real con la información del banco, y app móvil para clasificación y organización de gastos.

Ideación 💡

Basándome en la definición del problema comienzo a generar posibles ideas para resolverlo, y las escribo en post-its. Luego, las organizo según las jerarquías de importancia en un MoSCoW, y luego en un In&Out canvas para terminar de definir cuáles deberán ser descartadas por completo.

Benchmarking

Después de definir las funciones que van a ser implementadas en la solución, realizo una comparativa con mi nueva competencia directa, aplicaciones móviles de bancos y otras apps fintech actualmente en el mercado.

Benchmarking enfocado

La única app que cubre la mayoría de las funcionalidades presentadas para mi propuesta es Fintonic, excepto por la función de ticket digital que ninguna de las apps comparadas lo cubre.

Mapa de sitio

Para poder definir las jerarquías de las funciones realicé un mapa de sitio, el cual también me ayudó a comprender el viaje del usuario dentro de la app. Luego, creé el diagrama de flujo de la app.

Luego de un splash screen y un on boarding, el usuario tendría las opciones de iniciar sesión o registrarse. En este caso, el usuario debería sincronizar la cuenta bancaria.

Extracto del diagrama de flujo

Una vez que el usuario se encuentra dentro de la app, encontraría en el feed la información bancaria y la información del ticket de cada gasto, la opción de escanear un código QR en el caso de que hiciera un pago en efectivo, y las categorías para clasificar y organizar sus tickets y gastos.

Prototipo 🔧

Wireframes

Comencé la fase de prototipado creando wireframes en baja fidelidad basándome en las jerarquías de las funciones y el diagrama de flujo definido previamente. Una vez definida la estructura de la app, procedí a realizar el wireframe mid en Sketch, donde comencé a seleccionar algunos elementos como la tipografía.

Guía de estilo

Partiendo de un moodboard inspiracional seleccioné una paleta de colores para la app basándome en colores pop art, y así generar una relación más amable entre el usuario y el contenido presentado.

Guía de estilo

Seleccioné un estilo plano para los botones, variando su color dependiendo de su importancia y contenido. También realicé dieciséis iconos de trazo para representar diferentes áreas de contenido, y versiones de los iconos sólidos para representar ubicación dentro de la app.

Funciones

Finalmente, os presento Fintick, una combinación entre fintech y tickets digitales que viene a dar un fin al uso de tickets de papel.

Pantallas del prototipo
  • Sincronización en tiempo real: los usuarios tendrán la posibilidad de ver el feed de su cuenta bancaria en tiempo real, a la vez que tendrán acceso a la información de la compra, una visualización simple del ticket con los items de compra, y una visualización detallada con la información completa de la empresa, información de pago, etc.
  • Ticket digital: los usuarios tendrán la opción de generar un nuevo ticket. En el caso de pagar en efectivo, podrán escanear el código QR del comercio, luego podrán asociarlo a una cuenta bancaria si así lo quisieran y clasificarlo acorde a su categoría.
  • Categorías: los usuarios podrán clasificar sus gastos con etiquetas # simulando folksonomías. Así, podrán tener la posibilidad de generar informes basados en su clasificación personal y luego compartirlos.
Animación creada con Protopie

Fases futuras

Para generar un verdadero MVP, debería dedicar más tiempo a la investigación de APIs bancarias, y softwares para los comercios. También debería incorporar una opción de color AAA, debido a que los colores elegidos no tienen un nivel de contraste admitido. Luego, debería testar con usuarios el prototipo, y poder iterar el diseño. Por último, crear una landing page para promocionar la app y poder realizar métricas de conversión.

--

--