Skip links

How I refreshed Avanzar NGO’s brand identity and website design from afar, driven by the client’s enthusiasm and a creative approach to a no-budget project.

Collaborating with the Avanzar NGO team, I revitalized their brand and website after a decade of inactivity. With no budget but a strong drive, we aimed to create a polished, professional look to attract potential investors, donors, and volunteers.

Client

Avanzar

Role

UI /UX designer

Date

2021

Problem

Avanzar needed to redesign its website in order to get more donations, deals with companies, and volunteers since most of the deals were made personally by contacting the organization by phone, at some events, or through the physical office.

They needed a way to expand their network and find financial partners. Like most little NGOs Avanzar needed volunteer work from different expertise areas such as Graphic designers, UX/UI designers, photographers, and developers. So I offered as a volunteer to redesign Avanzar’s image, and website working aside with a development volunteer.

Avanzar Web design

My solution

Is important to create a connection with the audience through a website with solid and verifiable information to consolidate the purpose of Avanzar. To create easy access to the donation and contact process. So in that way, Avanzar will win credibility and visibility among the potential investors.

Avanzar website design
AVANZAR

PROCESS

DISCOVER

Research and Context

DEFINE

Analysis and Conception.

IDEATE

Brainstorming, Information and Arquitecture.

DESIGN

Build product gathering all insights.

TESTING

Checking usability of the product.

Buyer Persona

Buyer persona was created based on interviews with a group of professionals in the field of management of social events and their experience with NGOs.

Buyer Persona for Avanzar web design

Customer Journey

A worker from a big company is looking for NGOs to collaborate with.

Customer Journey for Avanzar website

Design System

The last update of Avanzar’s brand was about 10 years ago. To optimal results for the website, it was necessary to redesign the logo and create a design system to improve its presence on all platforms. Also, this design was the foundation for the UI design of the website.

Logo Avanzar-Branding
Colour Palette Avanzar
Colour Palette Avanzar 2
Colour Palette Avanzar 3
Tipograpy Avanzar web design
Tipography Avanzar web design 2

Photography Guide

Since Avanzar does not have a photographer for covering events and workshops, I designed a photography guide for the staff to be able to take photos for the website.

Avanzar photo_2
Avanzar web design_3
Avanzar photo_4
Avanzar web design_1

Wireframes

Explore
Drag