Legal Protection Group
Legal Protection Group is a specialist provider of Before The Event (BTE) and After The Event (ATE) Legal Protection Insurance, Legal Services, and Emergency Assistance Products. They approached me to forge a brand new responsive website for them. The site’s main aim was to details the various types of cover that LPG offer, and to give a portal for them to communicate with future customers through a blog. The company had just received a logo from their design team, and I worked closely with them to deliver their website.
I consulted with the LPG management team and settled on how best to frame the new site, and what structure was needed to deliver the content. Beginning with traditional lo-fi notebook wireframes, I moved on to a hi-fi mockup of the interactivity and the responsive adjustments.
The site was built upon WordPress and utilised the latest technologies for speeding up site delivery. I created numerous custom jQuery functions, such as the ability to fluidly columnize content as a page changes sizes. This is helpful to have the content automatically switch to the best-looking layout on device rotation. I also wanted the header to become fixed as the site scrolls so that there would be a permanent menu to follow the user.
One issue I foresaw was that the menu used a strong purple, and this purple was to be used in header tags and CTAs. As I did not want these elements to visually merge as the user scrolled over them, the natural solution was to add a lighter box-shadow beneath the menu. This, however, would overlay the hero image at the top of the page and be very obvious. So I devised a system that calculated the progress of the scroll as the user scrolls through the hero image, and applied that percentage to the opacity of the box shadow. Problem solved!