Help by AMG Web Redesign

Ensuring alignment with this NGO's brand tone while maximizing consideration for clear Calls to Action (CTAs) in the design process. Employing design to facilitate both the organization's self-understanding and its understanding of its clients.

My Role

Identity & Branding, UX Designer

Project

Personal project

Year

Apr - July 2023

Help by AMG

1 Brand
Discovery

HELP by AMG is an organization founded by a group of young people who aim to give back to the community by assisting at-risk and homeless youth in Suffolk County, Massachusetts. They trek around the streets of Suffolk County like backpackers, carrying brightly colored care packages symbolizing youth and hope, and distributing them to at-risk and homeless youth.

2 Target Audience of This Website

01 Primary (50%) - Donate, Volunteer, Purchase merchandise

Youth, from Massachusetts, who are socially responsible, compassionate, and have some financial resources and time to support their philanthropic endeavors. Have experience and skills in social services, possibly in counseling, medical assistance, etc.

02 Secondary (30%) - Get in touch

The staff of NGOs and governmental organizations with influence in their organizations are forceful and helpful, willing to act as a bridge for organizational communication and cooperation. Able to provide financial, technical, and service resources.

03 Tertiary (20%) - Cooperation, Donation

Business owners are enthusiastic, wealthy, and able to provide substantial material support in exchange for a good reputation and brand awareness. Preferably the business owners of food and bottled water factories, clothing and backpack factories, convenience store chains, or supermarkets.

3 Wireframes Examples

Home Page

Placement of testimonials at the top of the homepage to inspire the audience to quickly resonate to buy charity items or donate.

Intersperse the home page with two quick forms to get more audience contact information.

About Us

Break down quick donations into three steps to ease the cognitive load and accelerate audience donations.

Nonprofit Shop

Encourage audiences to buy with an inflammatory tagline placed under the header.

Information Architecture:

Discounted products-popular products-product categories- product details.

4 Style Guide

Color Palette

#ee4859

It is commonly used in design and branding to convey energy, and passion.

#fda03d

It is often associated with warmth, energy, and enthusiasm.

#538ae9

It is often associated with qualities such as trust, stability, and serenity.

Red, blue, orange. Red and orange are complementary colors, and blue and red are contrasting colors. The reasonable use of these three colors can make the visual level of the website more distinct. In addition, the high saturation of these three colors reflects a lively brand image and meets the aesthetic preference of the main target audience.

Fonts & Buttons

I chose Avenir as the font for the site, using black, roman, and oblique formats. This font has a more rounded outline, which can complement the gentle and friendly brand image. Secondly, it matches well with my rounded design elements. Furthermore, as a commonly used font, it will take less time to load and enhance the usability of the website.

5 Final Design

Home Page

Actively appearing buttons guarantee the possibility of conversions after each piece of content.

Creative testimonial makes the page more interesting and makes the audience more willing to browse.

The latest activity guarantees SEO and the ability to retain an audience who browse to the low end but do not have any action.

Programs

A sliding calendar display with avatars of users who have joined the programs creates the impression that our projects are numerous and popular, making them more willing to participate.

The same typography makes the project presentation clearer and more grouped.

Nonprofit Shop