PrecisionLender

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.

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.

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).

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.

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.

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.