International NGO fighting poverty and social injustice.
Institucional Website
UX / UI and Research
ActionAid Brasil
Established in 1972, ActionAid is an international organization that fights for social justice, gender equality and against the spreading of poverty in the world. In Brazil since 1999, the NGO has worked with local organizations to benefit people from over 2,400 communities, with more than 300,000 persons contemplated. Now ActionAid is active in 45 countries, reaching more than 15 million people all over the world.
The NGO depends on donations, but their website was not successful in converting institutional content into contributions. My challenge was to redesign their website so to explore texts and images in a more efficient way. I focused on creating a unique, user-friendly and responsive interface for each and every device - desktop, tablet and mobile -, allowing potential donators to better experience the organization’s values.
The analytical data from ActionAid’s Brazilian website displayed that donors were mostly elderly, and they used to access content from the desktop platform. It made me realise the structure was neither efficient for the desktop version, nor responsive for other platforms: it required a more user-friendly and better organised way to convey relevant content and engage in opportunities to donate.
I navigated all of the 46 ActionAid websites around the world, so to focus on the 6 most efficient in terms of donations. Still, there were points to be improved in all of them, so I looked for similar organizations, such as Médecins Sans Frontières, Ford Foundation, and Ellen McArthur, to name some. It revealed successful websites offered concise and user-targeted content associated with donation sections, calling visitors to action.
The best examples from my benchmarking were shared, in a 4-hour card-sorting workshop, with representatives of 6 very distinct areas of the NGO. The 6 people taking part in that workshop were then divided in 3 groups, facing the challenge to rethink the platform. Our aim was to come up with a structure that would better address all of their demands, considering those 6 areas.
In the end, the 3 structures were presented and analysed by the whole group. A more comprehensive view of all areas and their corresponding needs and pains made it possible to identify what indeed was fundamental to build the new platform structure. Finally, we found a common solution contemplating in one model everyone’s demands.
The structure was divided in 6 major categories, namely: “Who we are”; “Implementing change”; “Campaigns”; “Keep updated”; “Donations”; and “Contacts”.
The first category basically offered institutional content, describing the NGO, activities and fund-raising sources. The second, stories of people who had been aided by donations, and how their lives have been improved. The third section brought campaigns currently taking place in the country, within the causes embraced by the NGO. Then, a category would offer the latest news about their work and publications. And lastly, two very important sections: one describing the 3 possible ways of donating (occasionally, regularly, or by “adopting” a child) and another one with all the channels to contact ActionAid.
With the content provided by ActionAid - a great volume and variety of photographs of high quality, documents, maps -, it was clear that the best strategy would be to build a high-fidelity structure for the wireframe. That would save time for the whole process and help us visualise how their content would behave in association with images.
A wireframe with real content allowed me to test, from the onset, visual as well as textual elements, and find out how they would respond to different platforms. I could test fonts in real size, that later would be applied to titles and blocks of paragraphs; and photographs or maps the NGO actually used and certainly needed to be applied in certain sections, in specific spots.
