World Youth Website
expand_moreA massive redesign project to a modern platform.
Created: 4 years ago
A massive redesign of the World Youth International website to a modern platform. I highly customised the Grav CMS software to integrate with the company database and allows office staff to manage the volunteers, programs, donations, fundraisers and sponsorships in the one area. This has opened the website up to dynamic content opportunities in all areas.
Grav CMS is a PHP based flat-file system known for its fast performance, extensibility and easy of use. I find the image processor is fantastic with dynamic image sizing and image caching.
Below are some key features from the website templates.
Banners
Banners are available on all pages and can be configured with a full width image, a colour overlay, a heading, subheading and buttons. If there is more than one active banner, the carousel engine is loaded and automatically slides between each banner.
Promotional Panels
The volunteer panels are a dedicated promotional space for programs and events. If there are more than four active panels, the carousel engine is loaded. Panels also have the option to publish on a schedule.
Infographic
Similar to the promotional panels, however these static panels wrap to a new line when they go beyond the page width. These are intended for information purposes.
Facebook Posts
The facebook module fetches the four most recent posts from the World Youth Facebook page feed. This includes an image and a truncated snippet from the post.
GDPR Privacy Consent
With the recent release of GDPR, I created a consent module. By default, no tracking scripts are loaded until consent is given, the tracking code will be allowed to run until the consent session has expired.
Homepage Enquiry Form
The enquiry form links with the marketing system Mautic. All enquiries are captured and linked with the CRM profile and allows programmed responses for frequent questions as well as notifying the office.
Footer
All in one navigation overview of the website with search and contact details.
Image Options
In the CMS, images can be uploaded in bulk via drag and drop and arranged into columns of choice. The in-built image processor automatically resizes and crops the images so they can be arranged together.
Related Pages
Programmed links relevant to the current page based on proximity. Child pages are the first priority, followed by sibling pages, then parent pages. This respects page visibility and unpublished pages.
Sidebar Block Element
Linkable block with an image and heading plus an optional profile image in the corner. These can be stacked and scheduled.
Sidebar Link Element
A change from the block option, Sidebar Lists are much shorter with an icon picker from over 300 options.
Program Options
With the integration of the company database, program options can now be dynamically generated. Each program is a HTML form that initiates the program application process.
Product Options
Another benefit of the database integration, products can now be dynamically generated based on categories, types or IDs. Products can now be managed in their own section within the admin system.
User Login
A huge upgrade from the previous system, putting more power into the user's hands.
Program Application
If no program has been supplied to the application, a product selector is required. This design is based on a price comparison to help compare program prices, lengths and dates. Once a date is selected, the application process begins. The design is intended to contrast the application form to draw a line between them.
Due to difficulties with form input in the past, I went for a very simple and basic design. The form becomes the whole focus of the page and has significantly reduced abandoned forms.
The project ran for just over a year and has been a huge leap forward for World Youth International. I thoroughly enjoyed designing and developing this website and utilising my skills in PHP, HTML, CSS, jQuery, MySQL and learning a new language Twig.