Lokring Website

Project Description

A custom-coded website with unique features and integrations.

Project Goals

To update the online presence of Lokring and its distributors, creating a WordPress site with easier editing capabilities and connecting it to their more data-driven products catalog, which uses a different platform and was created by another firm using the same design.

Challenges

The site required a complex, custom-coded distributor selection tool integrated with WordPress’ capabilities. Clicking on a location needed to add the distributor name by the logo in the top left of the page and their phone number and contact link on the top right of the page, as well as redirect the user to information about that specific distributor.

Creative Strategy

The homepage design was created in Photoshop by my co-worker. She handed the file over to me, and I created a site that matched it. The most fun came in designing the little interactions that a Photoshop file doesn’t usually show. For Lokring’s homepage, I added some hover effects for product links and button arrows that provide a slight, non-disruptive animation. I also programmed a feature which displays expanded information for the Industry/Market images upon hover. Once the homepage design was completed and approved, I created a couple of the main pages on the site using that same look and feel before we handed the project over to the client, who had asked to populate the remaining pages.

Results

The distributor selection tool was a difficult challenge which I was happy to tackle. After all the brainstorming and testing, the final version works as the client intended. The homepage also reflects my co-worker’s design quite accurately. It is clean and uses striking imagery while breaking down the most important information for the client. The new site is a major improvement over the old version and has been working well since!

My Role

I created a custom-coded WordPress template using HTML, CSS, JavaScript, and PHP. This allowed me to match the provided design as closely as possible. I added the images and content. I also coded a custom distributor selection tool tailored to the client’s needs. I did extensive testing on both the tool and the site, ensuring that it worked well and responsively across browsers and devices. I installed plugins as needed and determined the best structure for the content in the administrative area of the site, allowing the complex features to function with as much efficiency as possible.

View the Site*

*The site has been edited by the client, particularly to add the individual distributor pages. The home page is still largely as it was originally designed.