<

Divorcing Legacy Systems

CallRail was in need of a full overhaul of their Wordpress marketing site, so I built and lead a team to accomplish this. We set out to create a pattern library as the basis for creating the core components of the system.

alt text

We needed to build this new system while simultaneously maintaining the old one. Because multiple departments depended on the old system, we had to do this with as little disruption as possible.

alt text

We started out using Jekyll as a proof of concept. We landed on a framework powered by VueJS for the core components. Static pages were created via Gridsome.

alt text

An inventory of content proved we needed to refocus around Google’s proven Zero Moment of Truth.

alt text

Then we set out to architect the information of the site as a whole.

alt text

We then targeted SEO principles that we could build into the project’s infrastructure.

alt text

The data flows had been neglected and needed streamlining for various departments to make informed decisions.

alt text

We needed our feedback loop to be iterative and fast while looping in all the necessary stakeholders.

alt text

We laid out the various controls, blocks, and patterns based on current design iterations.

alt text

This gave birth to a system of layers.

alt text

The system needed to fit the way that users use the internet–starting broad and moving to more specific. A user typically scans until they find something more long form they want to dive into.

alt text

We mapped out tasks and put them into prospective roadmaps.

alt text

alt text

We designed a system for data flows to be symbiotic between the product and marketing departments.

alt text

We implemented a reverse proxy to split the traffic between the old and new systems.

alt text

I was asked to coordinate various other data flow issues during my time at CallRail.

alt text

alt text

Once these systems were mature, it was easy to bring rough concepts into reality in a very short period of time.

alt text

alt text

alt text

alt text

From old and busted

alt text

To new and 🤘

alt text

The result was a system that could skip 90% of the design and development process. The system enables a junior developer to accomplish performant responsive web pages based off of rough sketches, and deploy them into production with great ease. Checkout callrail.com to see how these sketches became real live internet.