Leopardshark: A redesign and front-end framework processing billions of dollars.

The owners and original authors of a successful CRM in the insurance space approached me about modernizing their application. Working in-house over the next 10 months we created a new look and feel along with an API based front-end. The CRM had built long relationships with their clients and wanted a smooth transition for existing, heavily used features. The application moved billions of dollars annually so the need to maintain and improve functionality was significant.

A new tech stack

The client knew they wanted to implement an API to improve interface performance and open the possibility of extending the application to other platforms. We chose taffy and vue.js to interface with their legacy ColdFusion code. I divided the application into reusable widgets and managed a team tasked with rebuilding the front-end with API powered vue.js widgets.

User Research

I put google analytics in place early into the project and worked extensively with the client’s customer support team. These insights helped us to understand where and how the end users were most heavily using the application. Armed with insights we developed a transition plan that eased users of a work-heavy application through the transition.

A utility for developers

The larger in-house development team was responsible for maintaining and extending the application while responding to incoming client requests. To keep the site looking and feeling modern I wrote a theme framework, Leopardshark, as a resource for the client’s developers. Built with SCSS and javascript, the front end framework gives developers utilities they need to build interface according to spec.

Competitor analysis

An indepth analysis of companies in the same and adjacent space helped everyone understand the interface landscape. These insights helped us to understand which features we most needed to maintain a competitive edge and which features of our application already were winning. Armed with insights we could focus on developing the highest value features.

A Dynamic Theme

Leopardshark leveraging CSS/SCSS features and functions the Leopardshark framework can accommodate global color themes by simply defining new color tables. Font scaling is handled through a global variable that enables the site to be legible across its wide userbase. Each widget is designed to fluidly fill its container, making modular layouts possible.

Changing Methodology

The client’s development team is growing which requires new development processes to be put in place. I helped to set up a kanban to track new features as they moved from design through to release and put a Gantt chart in place to help keep development on track. The new API/Vue.js framework required that developers work collaboratively in feature pods, so we worked to extend the client’s code release pathway to accommodate more collaborative development.