This is the Project Tulong website. The clients wanted it to be a one-page parallax design. They wanted to be a simple page that has a donate section, an about us section, and a blog section where they can post updates about the foundation.

What I did here is I divided the site into four sections – Donate, Our Blog, Our Story, and Ways to Help (I added this additional section and it was not on the original request); these four items are all accessible on the navigation. Since there was some space on the header, I put their social media and email links on the top right for easy access and to balance it out with the logo on the top left.

The hero banner features a large image and the hero text with the first donate button that will smooth-scroll to the Donate section. Users have the choice to donate $25, $50, $100, or $200, or they can type in a specific amount. Under the “select amount” section will be the name and email address section – they also have the choice to make the donation anonymous. Once the donate button is clicked, a confirmation pop-up will appear this will show the reference number; if they had provided an email, they will also receive a confirmation message that would also include the reference number. If they had put their name but did not provide an email, they will only get the reference number through the pop-up, but their names will be recorded backend. If they opted for an anonymous donation, they will be given a reference number through the pop-up; anonymous donors will always be anonymous, and even the organizers will not know them unless the donor shows the reference number. This will help with the tracking and recording of the donations.

The Blog section features the three latest blogs. There is a link that will take the users to the blog list page and each blog post link will open to a new page where users can read the whole blog.

The About section features the founders’ photos and their vision, mission, and story.

The last section is the Other Ways to Help where the other ways to donate are listed just in case some people did not want to donate through the website. Users can also sign up for the newsletter in this section. This section will always be present on all of the pages, so the users will always see this information even if they are not on the homepage.

Lastly, I also placed the social media and email icons on the footer, so users can access them if they are viewing the bottom of the page and they would not have to scroll up to the header to access them.

This website design is responsive and mobile-friendly and accessible on all devices.

Desktop View

Mobile View