Case study

Footprint Possibilities

A non-profit supporting families, youth and individuals with resources, educational programs and community initiatives.

Let's talk about your projectVisit the website (opens in a new tab)
Industry
Non-profit
Based in
St. Petersburg, Florida (USA)
What we built
Website
Website
footprintpossibilities.org (opens in a new tab)
The Footprint Possibilities website on desktop
The Footprint Possibilities website on a smartphone

Before and after

So much to tell.

The previous website already presented the mission, the projects and the ways to give. What stayed in the background was the heart of Footprint: its projects in the field, meant to be seen before being read.

  • A classic layout, with green bands
  • Projects told in long blocks of text
  • Pages in English
The new home page: “Together, we build possibilities.” with cards for the impact, the headquarters and a photo from the field
The home page of Footprint Possibilities' old website: “Do a lot with a little” over a photo of two girls in a classroom
BeforeAfter

Drag the line to compare before and after.

The goal

Show where every donation goes.

Rebuild the website from scratch, with the projects at its heart and a clear path: understanding the mission, trusting it, choosing how to help. In English, Spanish and Italian.

  1. 01

    Restyling

    A new design, made of leaves, green waves and photos from the field.

  2. 02

    Projects in plain sight

    Each project with its status, year, video or documents.

  3. 03

    Three languages

    English, Spanish and Italian, switched with a click on the flags.

What we built

From need to donation.

The mission at a glance.

On the home page a mosaic of cards presents the impact, the headquarters and a photo from the field. Then the story unfolds: the need, the reasons to trust, the partner universities and the three steps of every donation.

The Footprint Possibilities home page: the opening mosaic, then “Bridging the Gap Between Need and Opportunity”, the reasons to choose it, the partner universities and “How It Works”

The projects, one by one.

On the Projects page each project, from Ghana to Panama, has its own card: status and year, a video or documents to open, and what has been done, point by point. At the top, a carousel of photos from the field.

  • Ghana, the school
  • Photos from the field
  • Panama, Lake Gatún

Every dollar counts.

The Donations page shows what each amount is for: 10 dollars contribute to hygiene pads for girls, 25 to fifteen children's books, 250 to a laptop for studying. At the bottom, the impact figures count up.

The Donations page: “Some Ideas to Do Something Useful”, the options from 10 to 250 dollars, the monthly donation and the “Your Impact in Numbers” counters

Three languages, one click.

English, Spanish and Italian, with the flags in the bottom right corner. The story of each project changes language too, not just the menus.

  • Home page, in Italian
  • A project, in Spanish
  • How it works, in Spanish

Built with

  • GSAP
  • Next.js
  • Tailwind CSS
  • i18next

The website

Page by page.

Open an image to see it full size.

  • Home page, the videos
  • Home page, trust
  • Home page, contacts
  • Projects page
  • Projects, fieldwork
  • Donations, the options
  • Join Us page
  • Join Us, the community
  • Join Us, volunteering

Next project

Back to projects

Case study

PhoneHub

Phones and repairs, E-commerce

A phone store in Naples: smartphones, accessories and spare parts to buy online, repairs at the counter.

See the project: PhoneHub
The PhoneHub website on desktop
The PhoneHub website on a smartphone

Your project could be next.

Tell us how your website works today and what isn't working. We'll start from there, with no commitment.

Let's talk