GoFundra - UI/UX Web application

Build a Budget Tool to help non-profit organisations

diseño aplicación web go fundra ivan vidal

Fundra is a platform designed to help nonprofit organizations increase their donations through financial transparency. With Fundra, you will be able to know in detail where your money is invested.

Defining the problem

Most platforms do not provide details on the destination of their funds. It was necessary to create a budgetary tool to be able to offer this service to the user.

The challenge

Fundra's CEO contacted me to design a program-based budgeting tool. It would help organizations know in detail what they spend all their expenses and revenues on. The goal was to create a simple tool for users to include all the relevant information about their program expenses and revenues in a simple and attractive way.
It had to be a customized experience based on each program's data.

Analysis

Analyze content through a workflow

After an initial chat via Slack, I received a performance breafing and a tool in Excel format. The first job was to analyze the performance of the tool, through a complex Excel file. I had to define the parts that the tool was going to have and the content of each one. So I decided to create a content flow where the different parts of the tool would be indicated and what content we should include in each of them. In this way, I was able to work with the Fundra team in detail the different parts of the tool.

"The idea was to create a visual tour, in which the user would include the necessary documentation at each step, in a simple and attractive way."

After several days of in-depth analysis and feedback from the Fundra team, I generated the first skeleton of the future tool.

userflow case study fundra aplicación web

I have divided the tool into six parts. In the first five parts the user should include relevant information about the program and in the last step he would receive an overview of all his finances.

In this phase, I identified several parts that would need individualized analysis due to their complexity, such as the final overview screen and the attribution method.

Identifying large parts

After the content analysis, I had to generate the structure. First, I usually identify the most important components so that I can design several proposals and choose the most suitable one.
Then I can play with these components and design several proposals and choose the most suitable one.

Identified components

1- An indicator of the steps of the tool and where the client is located. 2- Section to include the necessary information in each step. 3- Section to edit the information entered. 4- Forward and backward buttons.

Information architecture proposals

With this I created several architecture proposals with their advantages and disadvantages. It would allow us to work on the architecture of the tool with the client and see which was the most suitable option.

propuestas de arquitectura de la información

1. Disposición vertical

In this proposal I opted for a classic vertical process design. The user would always have to scroll to discover all relevant information. The advantage would be that it would adapt to almost all screen widths without having to resort to an adjustable layout.

I studied the option of having a small summary of the data entered in the previous steps. Subsequently, I would discard this option because of the amount it would take up on the screen.

2. Side menu

A proposal appears with a side menu, which the user could hide. It would not work so much as a process but as a menu with options to fill in. The advantage is that the user can edit the content afterwards. It would be like a configuration panel, with the dashboard with all the information.

3. Layout horizontal (propuesta seleccionada)

A proposal focused on both content and process. It organizes the content in two parts: a left zone to enter the necessary information and the right zone as a summary of the data we are entering. The user can edit the data entered at any time. With this proposal it has also been studied that the process bar would indicate only the percentage of the process performed, instead of the steps to be performed. It would be at the bottom of the screen.

barra proceso

Proposal three was the best fit for what we needed.

After several discussions with the Fundra team, we came to the conclusion that we needed a proposal that focused on the process and clearly indicated the number of steps required. Due to the complexity of the data, it should also be possible to modify the data entered instantly. We chose proposal three as one of the most complete and balanced proposals, for the reasons mentioned above.

Wireframes

Low fidelity

I use the sketch method in all my design processes almost from the beginning. It helps me conceptualize and even validate with the client more quickly. They are not clean. But the idea is to iterate fast.

wireframes low fidelity

High fidelity

Having clear the content, the steps and the structure of the tool, I started to draw the first high fidelity wireframes.

For me, this is one of the most relevant phases in the creation of a product. It allows me to polish the final result and get quality feedback without having to invest time in the design.

After a test with potential users, I finalized our high quality wireframes.

wireframes alta fidelidad

Design

With the wireframes mapped out and the content set, the only thing left to do was to paint.

Fundra's design team already had some small design guidelines. But it was not a consolidated design system, it was still being created. This allowed me to generate new components as needed.

So my job was to correctly identify the components and adapt them to my wireframes.

diseño aplicación web

Prototype

As a final part, I created a prototype with Invision, which allowed the fundraising team to test it with our potential users.

Then, I made small changes based on the feedback I got from the testing and we finished this phase.

I can't publish the full Invision prototype because it is still under development, but I have made a small animation so you can get a feel for the final product.

animacion prototipo

Conclusions and learnings

Now, the tool is in development process and we are analyzing to start designing the landing page of the product.


The first tests carried out with the fundra team have been quite positive and our end users are assimilating the tool perfectly.


In conclusion, working in a sector in which I had not done it before has been complicated, especially in the content analysis and understanding of the tool. But it has been gratifying to be able to move the project forward.

Let me know if you want to talk about potential collaboration. I´m available for freelance work.

flecha boton