Landing Page Redesign 

Overview

Due to the coronavirus pandemic, Feeding America estimates that over 50,000 people will experience food insecurity. This number juxtaposed with the estimated 80 billion tons of food that is wasted annually in the United States inspired a search for a solution that would combat both problems.

When I was a student at UC Davis, I remember passing a community fridge on my bike rides to class. The fridge was set up off campus and was open to anyone who needed food or wanted to share extra items they no longer needed. With this memory, I decided to conduct a Google search to check if there were other community fridges and if there was a database where each location was housed.

This search led me to www.freedge.org. On their site, they have information about what a community fridge is, detailed guides on how to create a community fridge, and an extensive database logging community fridges globally. I was inspired by their mission and decided to redesign their landing page in order to practice my UI skills.

Goals

1. Create a visually appealing landing page that highlights the mission of the website.

2. Improve the overall organization of the landing page to make important information easier to locate.

Original Landing Page

Artboard 1.png
Artboard 3.png
Artboard 2.png
Artboard 4.png

Process

Research

To begin this redesign process, I decided to conduct a comparative analysis of other websites with similar mission statements. On my initial viewing of the site, I noticed they had a section dedicated to sponsor organizations, so I began my comparative analysis there. When I looked at these sites, I noticed their landing pages had clean visual design, with a tricolor color scheme, an image that related to the organization in the heading, their mission statement, and global or community impact. The other sites, also had a donation button next to their navigation bar that stood out from the rest of the page. As I broadened my research to other non-profit organizations, I noticed a similar theme.

Taking Inventory

When I scrolled through Freedge.org's landing page, I found that there was a lot of  information packed onto one page that could be reorganized into unique pages and relocated into the navigation bar. This was information such as individual locations and the team of people who worked on the project. I also found that some of the text and titles on the original landing page were difficult to read. I also found the landing page needed a donate button that stood out from the rest of the buttons, as well as a way to highlight their community impact.

The critiques I focused on for my redesign were:

•shortening the landing page

•reorganizing the information in an engaging way

•highlighting global impact

•editing the navigation bar

•making the "donate" button more visible

Design Decisions and Reflections

I decided to simplify the background, but use the tomatoes from the original design as a guide for choosing the color scheme. I chose to use a white background with red as the primary accent color and yellow and green as secondary accent colors. For the header, I created a collage with images that were used in a slide show on the original page. I also moved their motto, "Give. Take. Share." to the header to emphasize their mission. In order to keep the design sleek and simple, I opted for the font Freehand, a sans-serif that was easy to read. Finally, to make the donation button stand out I removed it from the navigation bar and created a separate button with rounded corners and colored it green.

This site is a great resource, however I believe a revamp of the mobile version of the site or an app would be most beneficial when keeping accessibility in mind. Computers are not a common household item and more people rely on their cell phones to find information. If a website is not mobile friendly, it limits who has access to the information presented. In the future, I would love to work on an app dedicated to reducing food waste and improving food security for people around the world.

Tools Used

For this redesign I used Figma to map out the landing page and Photoshop to make adjustments.

Redesigned Landing Page

Landing Page (2).png
Landing Page Menu Active (3).png