The original site was hosted on Wordpress using an old theme. It had not been updated for years and the client was unable to edit it. I moved the domain to Webflow, due to its design superiority, and the fact a CMS was not required as content will remain mostly static - but the client can still use edit mode if required.

Animation was used frequently, most of it being on scroll; adding to the sense of movement, but kept slow as to not cause any accessibility problems. For mobile, some animations were removed to save on screen space.

The form section was built using tabs. I wanted to split the content across multiple screens instead of having one long list as the old site did, allowing the user to click back and forth if they needed to. An accordion section was used to display information to keep the page text light and minimal.

The form is fully responsive to all screen sizes and JavaScript validates input before it allows the 'next' button to be clicked. There is also a progress bar providing users instant feedback on how much they have completed, helping to encourage more completed applications. Unnecessary form fields were removed to simplify things; and fields properly programmed to allow for autofill on all devices.

The form was then linked to a Google spreadsheet via Zapier to allow for the collection of responses in an easy way for the client to manage.

The old web design and branding of HTR was originally inspired by road signage and travel. The logo incorporates tire tracks and the old site made heavy use of this theme. I wanted to stay true to this branding while refreshing it for Gen-Z applicants.

I took inspiration from current trends in bold typography, and the idea of moving forward towards a goal; animation and arrows were used to represent this sense of movement. Dynamic movement was also used on the artist section, in a perspective similar to passing traffic signs while driving.

The original design makes heavy use of the bright yellow; which can be difficult to work with, and often inaccessible, on elements such as buttons where text is smaller. For this reason I added a secondary deeper orange - almost like an amber light signifying 'get ready'. Black and white are used heavily; reflective of current web design and branding trends.

Termina Bold was chosen as the heading font for its distinction and clarity, bold to draw attention like a street sign. Poppins Medium was used for body due its simplicity and friendly roundedness.
‍

Click to view the old site below: