Children’s Village
NGO Web and Application Redesign
The first individual project for the Ironhack UX / UI Design Bootcamp was to redesign a government or non- profit website or app. Children’s Villages take care of vulnerable children and youth in 134 countries, including Spain.
1. The challenge
A website with too much information at first sight, with duplicate content and no hierarchy that makes navigation di!cult and gets a confusing user who doesn’t find what he wants.
2. Research
2.1 Surveys and interviews
Surveys and interviews were decisive in obtaining information. Of the respondents:
63% collaborate with NGOs (26% as partners, 15% as donors, 15% as volunteers and 5% as sponsors)
84% would collaborate through the web
58% knew the NGO Children’s Villages but only 5% knew its web
The interviews determined that the users want information with results, transparent, clear and reliable, with super visual graphics. Make it very simple to use, with an image to transmit, make it easy and quick to achieve their goals. Here the data organized in an a!nity diagram.
2.2 Affinity Diagram
2.3 User Personas
Create 3 possible users for our web, the User Personas and I focused on Rosa the dubious to continue with the process, because among our goals is the web redesign, but also a greater conversion of online donations.
2.4 Empathy map
To get into his skin I used the empathy map.
2.5 Benchmarket
I looked for references from the scope, as charity water, rice bowls, adopt a love story, one billion nets, invisible children, acumen and from other industries like ueno, prescribe wellness, sustain natural or dropbox. Looking for inspiration in navigation, the home page, the pay process...
3. Information architecture
3.1 Sitemap
I used the sitemap to hierarchize and organize the content of the new web.
3.2 Crazy 8 - Concept Sketching
Once these points were established, I used crazy 8 to get as many solutions as possible.
Thus I came to the Concept Sketching of the main pages, where elements were deleted and hierarchized and others relocated, resulting in a more current and readable page, with less information in the first layer, more orderly and easier to read.
4. Design
4.1 Moodboard
The moodboard seeks to achieve a cozy, warm and homey atmosphere, with rounded shapes and complementary colors with existing blue that came from the corporate image. Very clean typography, Work Sans and San Francisco .SF NS Text
And from here I get the color palette and the typographical fonts for the mockup.
4.2 Wireframing
I also work the web app version with the donation process, this is a first version that later evolved.
4. 2 Prototype
And this is the end result of the prototype mobile version. And here you can see the mobile and desktop version of the remodeled SOS Children’s Villages.
