Charitable Organization Website
About the project and task
It is a great pleasure for us to be involved in the development of websites for charitable organizations and foundations. The Kryvyi Rih charitable organization Charitable Foundation “TIME OF CLEAN ENVIRONMENT” has gathered a large team consisting of a project manager, designer, developer and copywriter. That all is in order to create a user-friendly minimalistic site that inspires public confidence, with multilingual and payment functions.
Unique Design
A graphic designer and a web designer were involved in the project, and they were simultaneously engaged in the development of a logo and website design.
Logo
Logo redesign is a necessary decision, which projects not only a graphic image of the organization, but also the whole versatility of its activities. Since the charitable foundation covers several areas (including health, community development, social and humanitarian programs), we embodied this in the form of a four-petal flower.
The green color of the logo emphasizes the name of the charitable foundation and is associated with nature, vitality and prosperity. Rounded corners and a smooth gradient from light to dark green give the logo volume, softness and harmony.
UI/UX design
While creating UI/UX design for the charitable organization, we chose minimalism. The soft nature of the site is manifested in the roundness of not only the elements (buttons, photos and cards), but also in the letters of the Comfortaa font. Thanks to the structured and balanced functional blocks, the entire array of content is easily perceived, and each element on the site is provided with sufficient visual space. Smooth micro-animation adds life and dynamics to the site, and a calm range of colors, led by juicy green, further emphasizes the environmental friendliness, care and kindness of the organization.
WordPress development
Interactive interface
The charity website development is implemented with the world’s most popular WordPress platform. Although, it is dressed in an original design concept from our UI / UX team. So, the developer turned design layouts into a tangible interactive product thanks to the following tools:
- Grid and Flexbox are CSS layouts that provide a competent website coding that adapts to the screen size of any device.
- Swiper is a mobile touch slider.
- Locomotive Scroll is a library that provides smooth scrolling of website elements with a parallax effect. Additionally, we applied custom functions for splitting text into lines and thus dispensed with a paid plugin from the GSAP JavaScript library.
Admin panel
In the development of the software and administrative part of the site, we used several important plugins.
- ACF (Advanced Custom Fields) — for creating fields for WordPress edit screens.
- CF7 (Contact Form 7) — to manage contact forms:
- reCaptcha 3 is an anti-spam technology that we have enabled through integration with the CF7 plugin:
- WP Mail SMTP by WPForms — for submitting forms via the SMTP (Simple Mail Transfer Protocol) email forwarding standard:
- Smush — to optimize images on the site:
In addition, on the “Contacts” page, we have implemented the ability to add an interactive Google map in two ways: through the iframe code and through the Google Maps API.
As a result, we have a convenient admin panel that allows the client to easily and quickly manage the site: edit texts, upload photos, add content in different languages, etc.
Speaking of languages…
Multilinguality
The site has 3 language versions: Ukrainian, Polish and English. This decision is quite understandable: the larger the audience covered by the charitable foundation, the more donations it will be able to raise.
In this project, we have abandoned automatic translation. Yes, it costs extra money for professional translation of content, but when it comes to creating a positive image of an organization that evokes a sense of trust, reliability and involvement in a good deed, any compromises are discarded. Especially if the main tool for interacting with society is the content displayed on the site.
Technically, the multilingual feature was implemented through the Polylang plugin:
Automatic translation is carried out only within the administrative panel, invisible to users. To do this, we used another Loco Translate plugin, which is responsible for translating strings inside the WordPress admin area:
Payment system integration
To integrate the site with the LiqPay payment system, we wrote a custom function and added ACF fields for entering keys (private, public) to the site admin panel:
In addition, we have implemented the ability to select a donation for a custom amount directly in the payment form:
Text content
The only thing that speaks better than design is text. Thus, the Webnauts copywriter had the task to briefly and at the same time meaningfully tell the history of the organization, reveal its mission and main activities. In a word, to convey information in such a way that a sense of trust and reliability is transmitted through the text, in particular, how all members of the organization and volunteers of the charitable foundation are devoted to their work.
Summary
Designed on WordPress, kept in the best traditions of minimalism and filled with only the information that is important to the user, the website of the charitable organization conveys absolute confidence and reliability. The integrated payment system LiqPay with a thoughtful and concise form of payment on the first screen greatly simplifies the collection of donations. The multilingual function also significantly expands the reach of charity far beyond the borders of Ukraine, in particular, to Polish and English-speaking users.
Comments