PrecisionLender

Craft CMS Greenhouse API Wistia API Instagram API

The Project

PrecisionLender builds software that empowers commercial bankers with actionable insights and coaching. They came to me with a plan to completely redesign their main company website.

Their existing website was fairly disconnected from their digital content and marketing efforts, and was in serious need of an aesthetic refresh to raise the company's overall brand and image.

PrecisionLender's internal design team carefully planned out the new website's information architecture and content, then produced all visual website designs in Sketch. I worked with them to come up with a development and deployment plan that met all of their business goals and technical requirements.

New website designs

Front-End Development

The first order of business was to code out all page designs from the provided Sketch file. This consisted of 18 unique templates and several global elements with a variety of states. I carefully produced each template as fully responsive and mobile friendly HTML documents.

Throughout the entire process of converting the flat designs to interactive HTML templates, I was checking my work in all of the major web browsers for consistency, functionality, and usability.

Sketch file containing all templates

Interactivity & Animation

During the front-end development stage, I coded out a few custom interactive elements based on animated mockups from the lead designer (hover over or tap these images to animate).

Core Values animation
Core Values animation
Core Values animation
Core Values animation
Interactive diagram
Interactive diagram

Content Management System

Next up, CMS integration. One of the benefits of Craft CMS is that you bring your own template code. Craft doesn't force a single template or line of HTML on you. What this means is that I can take the HTML templates I just produced and start adding CMS functionality to them.

Craft CMS editor view

I built out each major section of the website in Craft CMS and hooked in the appropriate template. I then created custom fields within Craft CMS to match each piece of content that needed to be editable across all templates.

I also created groups of editable fields so that sub-templates could be combined and rearranged, giving the editor the ability to create a variety of unique page layouts depending on their needs.

Finally, I made all global website elements editable within Craft CMS. This gives the editor the ability to add links to the website's navigation, change the text in the footer, edit the SEO metadata on all pages, and much more.

Third-Party Integrations

PrecisionLender relies on several third-party apps and platforms to handle different aspects of their business. For example, they post career opportunities on Greenhouse.io, host all of their videos and webinar content on Wistia, and use Pardot to create and share web forms.

Third-party integrations

Greenhouse.io

I utilized the Greenhouse API to pull all of PrecisionLender's open positions into the new Craft CMS website.

We decided to first let visitors choose a career category (i.e. Product Development), then select a job title within that category (i.e. Software Engineer), and finally they are presented with the full job posting and application form.

All of this data lives on and is managed within Greenhouse, but is seamlessly integrated into their website.

Wistia

By default, embedding Wistia videos into a web page can dramatically increase how long it takes that page to load for the visitor. Your Google PageSpeed Insights score can also take a significant hit, which hurts your website's search engine ranking.

To get around this, I wrote a custom script that works with Craft CMS to display a video placeholder image with a "Play" button over it, rather than loading the Wistia player at all. Once the visitor clicks on the image or "Play" button, the script generates and embeds a Wistia video player in the same exact location and begins playing the video.

This decreased web page loading and rendering times and significantly improved the website's performance and SEO score.

Instagram

PrecisionLender wanted to create a slideshow of recent photos from Instagram on the Culture page of their new website. I used the Instagram API to automatically fetch the five most recent photos from their Instagram account on an hourly basis.

Performance & SEO

Performance is something I consider throughout the entire development process, but I always do a full audit and optimization phase directly before and immediately after deploying the website to the production server.

In the case of PrecisionLender's new website, I took several steps to improve the page load speed, particularly on mobile:

  • Combined all CSS files into a single compressed file (automatically via Gulp)
  • Combined all JavaScript files into a single compressed file (automatically via Gulp)
  • Prevented third-party scripts and resources from loading until the web page itself had rendered
  • Setup the appropriate image resizing and cropping for all user-uploaded images across every page and template
  • Implemented Craft CMS template caching to significantly reduce repeat database queries
  • Setup gzip compression and asset caching on the web server

In terms of SEO, I built out every page on the website with the ability to customize the exact metadata for that page. All of the HTML templates are structured in a standards-compliant way and every page adjusts all the way down to small mobile screens, with appropriately sized text and buttons for accessibility.

Security & Deployment

Because PrecisionLender has relationships with several major banks and provides services and software to financial institutions, they take security very seriously.

To start off, I implemented two-factor authentication on the main Craft CMS admin panel login. This requires users to not only have a correct username/password combination, but also to have access to that user's cell phone.

Next, I changed the Craft CMS login address from the default (company.com/admin) to something unique and secret. This prevents malicious scripts (bots) from hammering on the front door with login attempts.

I also created different user access levels for everyone who would be signing into Craft CMS. Depending on your access level, you can only touch certain pieces of content on the website, whereas higher level users can manipulate more advanced settings and even add new users.

Server Setup

The hosting provider we chose provides real-time security monitoring, automatic backups, server updates, and much more. This added one more layer of reassurance on top of everything else and will save the company a lot of time in the long run.

I created three distinct web server environments: Development, Staging, and Production. As a third-party contractor, I have absolutely no access to the Production web server where the live website and database reside.

Deployment Process

I push my code to the Development server where I can test my changes safely. Then, I push my changes to the Staging web server so PrecisionLender can review. Finally, once they've reviewed and approved my changes, someone on their team pushes it up to the Production web server.

Project Summary

After about 10 weeks of work and collaboration, we launched a great new website that gives the team at PrecisionLender absolute control over their digital brand, content, marketing efforts, and hiring initiatives.

The website loads fast and feels snappy to navigate. They can create beautiful and unique landing pages with ease. They have full control of the URLs across the whole website.

Most importantly, PrecisionLender's new website inspires confidence and trust in potential new customers and future employees, and gives these visitors access to all kinds of great resources.

Visit the website

Let's chat about your project

I help agencies, design studios, and in-house marketing teams take their website projects through development to successful launches.

Start a conversation