A timely reunion

In 2018, I got to know Una Gota de Salud, a foundation that provides healthcare assistance in vulnerable communities in the northwest of Córdoba. The foundation is usually joined by people from the healthcare field (doctors, dentists, nutritionists, etc.), who offer their services to those who have no other access to medical care. I participated as a volunteer organizing donation boxes and lending a hand in general, since it wasn’t strictly necessary to be a health student or professional to do certain tasks. However, those who were part of that field gladly shared their vocation, happy to combine it with helping others.

Several years later, I reached out to the foundation again, and I was a bit saddened to learn that they weren’t organizing as many trips as before. Between 2008 and 2020, a group of around 40 people had traveled almost every month to remote areas of the province to offer their help, but after the pandemic, both staff and volunteer drivers—who made transportation possible—became scarce. As a result, the frequency of the trips dropped significantly. At that point, already working as a developer and with some experience in marketing, I offered to help from a perspective that, this time, was much closer to my vocation: creating a website and a marketing campaign to help recruit volunteers and receive donations.

Research and UX

The initial challenge was figuring out how to design an effective website for this kind of organization. I needed to understand what information was typically included, how many pages were used, what type of content each one had, etc. Then I’d have to tailor it to La Gota’s case, to know what information to ask from the founders and why. So, I spent some time researching similar sites and, most importantly, followed some videos from The Website Architect, where the design decisions behind several sites of this kind were thoroughly explained. In the end, the site I used as a reference was Ekal Canada, developed by the same YouTuber, and from there I designed a UX targeting four well-defined profiles:

In the end, I proposed a structure of seven pages that would allow visitors to deeply understand the organization and its activities, while also including several calls to action to quickly guide users toward ways to help. The idea was for the site to cater to both the most curious and the most impatient visitors who didn’t need to read much before taking action:

• Home: The main page would offer a quick intro to who the people behind La Gota are, what they do, and what they need to keep helping. It would include several links to secondary pages where everything is explained in more detail. The goal was to craft a simple and persuasive narrative that built trust and inspired people to get involved.

• Who we are: A page focused on La Gota’s background. This part aimed to give the organization credibility and build an initial sense of trust for those unfamiliar with it.

• What we do: A detailed breakdown of the foundation’s activities. This page would explain the areas of support (clinical, pediatrics, dentistry, etc.), helping each type of professional or student recognize how they could contribute based on their own expertise.

• Ways to give: This page explains the three main ways to contribute. One is through volunteering (whether or not you're in the health field), another by offering transportation (the most critical need), and lastly by making donations (medicine, food, etc.).

• Donations: Even though donations were mentioned on the previous page, they deserved a dedicated section for accessibility reasons: many people would search for the word “donations” directly in the navigation bar, as it’s the most common way to help.

• Contact: A typical contact page. As with the previous case, even though this option appears in other parts of the site, it still needed its own page for accessibility reasons.

• Volunteering: A form to sign up as part of La Gota. This would be the final page for a good reason: as the last item in the navigation bar, it allowed for a highlighted button labeled “Volunteering” to act as a strong call to action. After all, this was the main goal of the whole project.

• Home: The main page would offer a quick intro to who the people behind La Gota are, what they do, and what they need to keep helping. It would include several links to secondary pages where everything is explained in more detail. The goal was to craft a simple and persuasive narrative that built trust and inspired people to get involved.

  

• Who we are: A page focused on La Gota’s background. This part aimed to give the organization credibility and build an initial sense of trust for those unfamiliar with it.

  

• What we do: A detailed breakdown of the foundation’s activities. This page would explain the areas of support (clinical, pediatrics, dentistry, etc.), helping each type of professional or student recognize how they could contribute based on their own expertise.

  

• Ways to give: This page explains the three main ways to contribute. One is through volunteering (whether or not you're in the health field), another by offering transportation (the most critical need), and lastly by making donations (medicine, food, etc.).

  

• Donations: Even though donations were mentioned on the previous page, they deserved a dedicated section for accessibility reasons: many people would search for the word “donations” directly in the navigation bar, as it’s the most common way to help.

  

• Contact: A typical contact page. As with the previous case, even though this option appears in other parts of the site, it still needed its own page for accessibility reasons.

  

• Volunteering: A form to sign up as part of La Gota. This would be the final page for a good reason: as the last item in the navigation bar, it allowed for a highlighted button labeled “Volunteering” to act as a strong call to action. After all, this was the main goal of the whole project.

  

Resources and copywriting

One basic resource I needed was the foundation’s logo to include in the site header. However, La Gota didn’t have a graphic brand—only a photo montage they used on their vehicles to be recognized during trips. While this had been their “logo” until now, it was actually a banner that worked decently for trips and social media but wasn’t functional for other uses. So, I decided to create a proper graphic brand based on that image, and I think the adaptation turned out well:

The copywriting required more specific research, now focused on La Gota’s history and activities. Luckily, I could draw useful parallels with sites like Ekal Canada. For example, Una Gota de Salud had “areas of support”, which allowed me to create the classic card section with links to secondary pages where each area was explained in more detail. The challenge was that those paragraphs didn’t exist yet, so I had to dig into interviews with the organization’s founder and follow up with ongoing questions to piece everything together.

The foundation constantly posted photos of their activities on their Facebook page, so I had plenty of material to choose from depending on the story I wanted to tell. I also found a couple of well-produced videos on YouTube that gave life to the hero section of the homepage. Both images and videos required some editing with Photoshop, Premiere Pro and some AI to bring to life the concept I had in mind: a layout built on image grids and parallax sections:

UI and web development

This project was the perfect opportunity to try out a technology I’d been meaning to explore for a while: Astro. It was a great fit since the site was entirely static, which is exactly what Astro is known for. For styling, I used Tailwind and avoided any UI libraries, as I wanted native code even for forms, dropdowns, and floating messages. The only third-party code I used was the EmailJS library, so the founders could receive messages from the contact, donation, and volunteer forms.

Even for basic projects, I always like to add a creative touch—something challenging that still follows web design best practices while giving the project its own spark. In this case, it was a full-screen photo marquee that starts large and then resizes and moves as the user scrolls. It’s an effect I’d wanted to try ever since I saw how the Wennect site was built. Sadly, it can only be appreciated on desktop (on mobile, due to the lack of horizontal space, the marquee becomes an infinite photo slider).

The marketing campaign

Now that the foundation has a robust site, it’s time to make the most of it. Since there isn’t a bank account to receive online donations at the moment, it wasn’t necessary to develop a page for that purpose. However, the website is versatile enough to be adapted to different projects. One of them is a marketing campaign with flyers I designed to promote the page, encourage physical donations, and recruit more people. The idea is to distribute these flyers mainly in educational institutions to reach students pursuing careers in the healthcare field. This is all quite new, so I hope to share some results soon. Wish me luck!