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.
