Help by AMG Web Redesign
Help by AMG Web Redesign

Web Design · Branding · May - Jun 2024 · UI/UX Designer & Branding

The memory hammer method strengthens brand identity, with ubiquitous donation CTAs driving brand goals, a strong hierarchy and clear typography ensuring readability, creative UI components enhancing efficiency, and Micro UX ensuring visual consistency.

Uncover Brand

User Interviews & Surveys

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.

Original website: Help by AMG

Target Audience

Understand who will “pay” rather than who will come to the 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.

Initial Solutions

Lo-Fi Wireframe & Prototype

As an inclusive NGO website, Help by AMG adheres to A11Y, ensuring readability through a strong hierarchy to enhance information dissemination efficiency and build user trust.

Style Guide

Colors and fonts serve the brand identity and hierarchy.

Color Palette: Red, blue, and orange are derived from the colors of this organization's rescue backpacks, reflecting a brand image of innocence, warmth, and positivity. Red and orange are complementary colors, while blue and red create a strong contrast. Thoughtful use of these three colors can enhance the visual hierarchy of the website, making it more distinct and engaging.

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.

Final Solutions

Some Highlights

The memory hammer method strengthens brand identity, with ubiquitous donation CTAs driving brand goals, a strong hierarchy and clear typography ensuring readability, creative UI components enhancing efficiency, and Micro UX ensuring visual consistency.

The rescue backpack, as the brand symbol of Help by AMG, serves as an effective memory hammer. In the website design, I have repeatedly incorporated it throughout the site to strengthen users' memory of the brand.

The rescue backpack, as the brand symbol of Help by AMG, serves as an effective memory hammer. In the website design, I have repeatedly incorporated it throughout the site to strengthen users' memory of the brand.

The rescue backpack, as the brand symbol of Help by AMG, serves as an effective memory hammer. In the website design, I have repeatedly incorporated it throughout the site to strengthen users' memory of the brand.

The creatively designed scrollable Events Calendar UI component is visually clear, using a red background to emphasize the current event's hierarchy while displaying profile images to enhance user engagement and social appeal. The modular card design ensures a seamless reading experience across different devices.

The creatively designed scrollable Events Calendar UI component is visually clear, using a red background to emphasize the current event's hierarchy while displaying profile images to enhance user engagement and social appeal. The modular card design ensures a seamless reading experience across different devices.