<

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.

Keep it chill for the kids

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.

ZMOT

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

Architecture

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

SEO

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

Data flow

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

Systematic Iteration

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

Pattern library

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

Legos and Lincoln logs

This gave birth to a system of layers.

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.

Information Architecture

Broad to specific

Roadmaps

We mapped out tasks and put them into prospective roadmaps.

Data flows

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

Lil ninja move

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

Unwravel that ball of yarn

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

From UX drawings to code

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

Landing Pages

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

Learn Pages

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

Blog Redesign

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

Events Pages

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

From old and busted

To new and 🤘

Results

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.