loader image

Longbow Group Website

Web UI

2021

Client Overview

Longbow Group is a Melbourne-based housing construction company that specializes in finance and insurance. In 2020 (prior to the COVID-19 pandemic), they contacted me through a previous lead to design and build a new website that would better align the company with Melbourne’s thriving housing market, and then handed it over to their SEO department to manage.

Project Details

I used WordPress to create Custom Post Types, Elementor as the main page builder to build templates, and Advanced Custom Fields (ACF) to manage dynamic data. The website relies on two main template files, and I used ACF to create dynamic fields that are placed within content section blocks. These section blocks are located within both template files and function dynamically depending on the data that is passed through each field.

Client:

Longbow Group (Self-Initiated)

Role:

Web Development, UI and Wordpress Development. Dynamic Content.

Skills:

UI/UX, CSS, Wordpress, Elementor, Dynamic Content, Template Build, App Build, Sketch Prototyping, Typography

Services Provided:

Strategy, User Interface Design, User Experience Design, Information Architecture

Timeframe:

Ongoing
#85c441
#474747
#f4f4f4
#248acc
Setting up WordPress, Elementor and ACF

The website consists of 21 pages in total and was built using only two main template files. To create a cohesive and functional design, I built section blocks with dynamic widgets that each had their own Advanced Custom Fields (ACF) function. To ensure data consistency without compromising the overall design, I set up conditional logic rules on each template page and was able to call upon each block as needed.

Below are some examples of the final CMS dashboard, ACF user interface, and the Elementor build.

Landing Page Hero Slider

The landing page features a full-screen call-to-action hero slider that dynamically pulls images and text using custom fields. The sliders are used to convey news and other important information related to Longbow Group.

Below are some examples of the hero slider.

One of the key requirements for the project was that the website had to be designed with a mobile-first approach.

Here are some revised examples of the preloader and service-based page that I designed and built based on the two template files.

brochure, print
Web UI