FFI Website

User-friendly website redesign with a focus on imagery and the wide reaching efforts of this fantastic Bay Area nonprofit

Web Design

Friends Foundation International (FFI) was in dire need of an update for their dated and somewhat confusing website. I mocked up the initial design in Photoshop, then implemented it in WordPress so they would be able to update and edit the site themselves.

Screenshot of the top of the Friends Foundation International homepage
Screenshot of the Friends Fondation International Purpose page

I utilized FFI's own photos from years worth of various projects. These powerful images can be found throughout the website, providing a view of the people and places involved with each project. The majority of photos are paired with captions to specify location and background info.

One of the most illuminating features on this website is an interactive map showing the location of every project FFI has been involved with. When a user selects a map marker, a tooltip appears displaying the city and country where the cause took place, along with a link to an individual project page where more information and photos are displayed. On each project page, a focus on imagery allows viewers to develop a connection with the people and places involved.

Screenshot of the map section of the Friends Fondation International website homepage

To avoid a confusing website navigation, I utilized a one-page design for the homepage. Clicking a navigation link automatically scrolls to the desired section where the user can find exactly what they're looking for.

Project page of Friends Foundation International website

Responsive web design is a must these days – the Friends Foundation International website looks and functions just as great on a smartphone as it does on a tablet or desktop screen. See it for yourself at friendsfoundationinternational.org

Laptop, tablet and smartphone displaying responsive Friends Foundation International website