Case study: redesigning a nonprofit website with improved visual system

Role

Logo Design, Design System Design

Timeline

Oct 2024 - Nov 2024

Tool

Figma, Affinity Designer

Case study: redesigning a nonprofit website with improved visual system

Role

Logo Design, Design System Design

Timeline

Oct 2024 - Nov 2024

Tool

Figma, Affinity Designer

Overview

In this academic project, I designed a new logo and design system that can be applied to the website and other marketing materials for the non-profit Hunger Intervention Program.

Hunger Intervention Program is a Seattle-based non-profit dedicated to food justice, because their mission to ensure food security for those in need deeply resonated with me. My focus was on creating a distinctive brand identity that makes their website more visually engaging while reflecting the organization's warm, compassionate, and community-centered values.

Original website design

Weather app image
Weather app image
Weather app image

My design direction

HIP’s key missions are to provide food for youth, seniors, and sheltered individuals in the community. These are the qualities I focused on:

Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image
Weather app image

The grid

HIP attracts a lot of volunteers in older age groups, so I chose a traditional and balanced layout to keep information centered and easy to read on the web. For physical advertisement like postcards, the layout will be kept simple to display program information.

Weather app image
Weather app image

Choosing the typographies

I chose the sans-serif typeface Poppins for both headers and body copy. Its geometric design provides high legibility and a modern, calming look.

I paired Poppins with a legible, bold yet friendly, and non-decorative serif typeface Merriweather for headlines.

Weather app image
Weather app image

Choosing the colors

Based off of my mood board, I chose the following colors to reflect the organization's focus on kindness, peace, and nutritions.

Weather app image
Weather app image

Adding graphical flairs

Soft, wavy graphical elements in the primary and supporting colors are used to divide sections, adding a welcoming vibe while maintaining professionalism. The divider for the header also includes a black line for flair.

Weather app image
Weather app image

Finding the right imagery

Brightly lit, colorful images featuring happy people and healthy food were selected to convey a sense of what people can achieve by contributing together.

Weather app image
Weather app image

Putting it all together

Below are designs utilizing the system: The website's home page, an additional page, and a physical postcard.

Weather app image
Weather app image
Weather app image