GoFundra - UI/UX aplicación Web

Construir una herramienta presupuestaria para ayudar a las organizaciones sin ánimo de lucro

diseño aplicación web go fundra ivan vidal

Fundra es una plataforma diseñada para ayudar a las organizaciones sin ánimo de lucro a aumentar sus donaciones mediante la transparencia financiera.

Con Fundra, podrás conocer con detalle en qué se invierte tu dinero.

Definiendo el problema

La mayoría de las plataformas no ofrecen detalles sobre el destino de sus fondos. Fue necesario crear una herramienta presupuestaria para poder ofrecer este servicio al usuario.

El desafío

El director general de Fundra se puso en contacto conmigo para diseñar una herramienta de presupuestación basada en programas. Que ayudara a las organizaciones a conocer con detalle en qué gastan todos sus gastos e ingresos.
El objetivo era crear una herramienta sencilla para que los usuarios pudieran incluir toda la información relevante sobre los gastos e ingresos de sus programas, de forma sencilla y atractiva. Tenía que ser una experiencia personalizada basada en los datos de cada programa.

Análisis

Analizar el contenido mediante un flujo de trabajo

Tras una charla inicial vía Slack, recibí un Breafing de rendimiento y una herramienta en formato Excel.

El primer trabajo fue analizar el funcionamiento de la herramienta, a través de un complejo archivo de Excel. Tuve que definir las partes que iba a tener la herramienta y el contenido de cada una.

Así que decidí crear un flujo de contenidos donde se indicaran las diferentes partes que tendría la herramienta y qué contenido deberíamos incluir en cada una de ellas. De esta forma, pude trabajar con el equipo de Fundra de forma detallada las diferentes partes de la herramienta.

"La idea era crear un recorrido visual, en el que el usuario fuera incluyendo la documentación necesaria, en cada paso, de forma sencilla y atractiva."

Después de varios días de análisis en profundidad y de recibir los comentarios del equipo de Fundra, generé el primer esqueleto de la futura herramienta.

userflow case study fundra aplicación web

He dividido la herramienta en seis partes. En las cinco primeras partes el usuario debería incluir información relevante sobre el programa y en el último paso recibiría una visión general de todas sus finanzas. En esta fase, identifiqué varias partes que necesitarían un análisis individualizado debido a su complejidad, como la pantalla de visión general final y el método de atribución.

Identificando las partes grandes

Tras el análisis de contenido, tuve que generar la estructura. En primer lugar, suelo identificar los componentes más importantes para poder diseñar varias propuestas y elegir la más adecuada. Así puedo jugar con estos componentes y diseñar varias propuestas y elegir la más adecuada.

Componentes identificados

1. Un indicador de los pasos de la herramienta y de dónde se encuentra el cliente.
2- Sección para incluir la información necesaria en cada paso.
3- Sección para editar la información introducida.
4- Botones de avance y retroceso.

Propuestas de arquitectura de la información

Con esto creé varias propuestas de arquitectura con sus ventajas e inconvenientes. Nos permitiría trabajar la arquitectura de la herramienta con el cliente y ver cuál era la opción más adecuada.

propuestas de arquitectura de la información

1. Layout vertical

En esta propuesta opté por un diseño clásico de proceso en modo vertical. El usuario tendría que desplazarse siempre para descubrir toda la información relevante. La ventaja sería que se adaptaría a casi todos los anchos de pantalla sin tener que recurrir a un diseño ajustable.

Estudié la opción de tener un pequeño resumen de los datos introducidos en los pasos anteriores. Posteriormente, descartaría esta opción por la cantidad que nos ocuparía en la pantalla.

2. Menu lateral

Aparece una propuesta con menú lateral, que el usuario podría ocultar. No funcionaría tanto como un proceso sino como un menú con opciones para rellenar. La ventaja es que el usuario puede editar el contenido después. Sería como un panel de configuración, con el tablero de instrumentos con toda la información.

3. Layout horizontal (propuesta seleccionada)

Una propuesta centrada tanto en el contenido como en el proceso. Organiza el contenido en dos partes: una zona izquierda para introducir la información necesaria y la zona derecha como resumen de los datos que estamos introduciendo. El usuario podrá editar los datos introducidos en cualquier momento.

Con esta propuesta también se ha estudiado que la barra de proceso indique sólo el porcentaje del proceso realizado, en lugar de los pasos a realizar. Estaría en la parte inferior de la pantalla.

barra proceso

La propuesta tres era la más adecuada para lo que necesitábamos.

Tras varios comentarios con el equipo de Fundra, llegamos a la conclusión de que necesitábamos una propuesta que se centrara en el proceso e indicara claramente el número de pasos necesarios.

Debido a la complejidad de los datos, también debería ser posible modificar los datos introducidos al instante.

Elegimos la propuesta tres como una de las más completas y equilibradas, por lo mencionado anteriormente.

Wireframes

Baja fidelidad

Utilizo el método del boceto en todos mis procesos de diseño casi desde el principio. Me ayuda a conceptualizar e incluso a validar con el cliente más rápidamente. No son limpios. Pero la idea es iterar rápido.

wireframes low fidelity

Alta fidelidad

Teniendo claro el contenido, los pasos y la estructura de la herramienta, comencé a dibujar los primeros wireframes de alta fidelidad.

Para mí, ésta es una de las fases más relevantes de la creación de un producto. Permite pulir el resultado final y obtener un feedback de calidad sin tener que invertir tiempo en el diseño. Tras una prueba con usuarios potenciales, finalizamos nuestros wireframes de alta calidad.

wireframes alta fidelidad

Diseño

Teniendo unos wireframes matizados y con el contenido fijado, sólo quedaba pintar.

El equipo de diseño de Fundra ya tenía unas pequeñas pautas de diseño. Pero no era un sistema de diseño consolidado, todavía se estaba creando. Esto me permitía generar nuevos componentes en función de las necesidades.

Así que mi trabajo consistía en identificar correctamente los componentes y adaptarlos a mis wireframes.

diseño aplicación web

Prototipo

Como parte final, creé un prototipo con Invision, que permitió al equipo de fundraising realizar las pruebas pertinentes con nuestros usuarios potenciales.

Después, realicé pequeños cambios basados en la retroalimentación que obtuve en las pruebas y terminamos esta fase.

No puedo publicar el prototipo completo de Invision porque todavía está en desarrollo, pero he hecho una pequeña animación para que podáis sentir el producto final.

animacion prototipo

Conclusiones y aprendizajes

Ahora, la herramienta está en proceso de desarrollo y estamos analizando empezar a diseñar la página de aterrizaje del producto.

Las primeras pruebas realizadas con el equipo de fundra han sido bastante positivas y nuestros usuarios finales están asimilando la herramienta perfectamente.

En conclusión, trabajar en un sector en el que no lo había hecho antes ha sido complicado, sobre todo en el análisis de contenidos y la comprensión de la herramienta. Pero ha sido gratificante poder sacar adelante el proyecto

Contacta conmigo para hablar de una posible colaboración. Estoy disponible para trabajos freelance.

flecha boton