Axcient Downtime Calculator

A web application to help IT professionals understand the cost of downtime for their business.

My Role

Web Design and Development

The project

Through customer interviews, our team found that understanding the cost of a potential IT outage is one of the key factors in helping our sales team start conversations with potential customers. I reimagined our downtime calculator web application to increase accessibility and ease of use for all users.

The downtime calculator was previously just a spreadsheet with inputted formulas that sales reps used on calls with potential customers. Although it was a powerful tool over the phone, there were several challenges with using this method:

  1. The application wasn't self-service

    They had to attend a full sales call and have a representative walk them through the complete process before they could see their cost of downtime and the value that our product brought.

  2. Potential clients couldn't find or discover the application

    Users had to be introduced to the concept of “cost of downtime” through a sales representative, thought leadership, or industry analysts. Because education and thought leadership are key in creating sales in Axcient’s industry, keeping the downtime calculator as a private tool only for sales people was like withholding key information from the IT community.

Early stages

I decided to build the downtime calculator into an interactive web application that would live on our corporate website. This would allow discovery of the tool through SEO, organic search, and sharing of the application’s URL. Because it would live on the website and users would be discovering it organically, the application needed to be self-service and intuitive to allow users to calculate their own cost of downtime without additional guidance.

The application needed several text fields that allowed the user to input information that mirrored the spreadsheet version that our sales reps used. Once the information was inputted, we would have to display the information using dynamically generated charts and graphs. This would allow the user to digest the information quickly by making it comparative, and also would help create awe and impact by providing a greater value than the user expected.

early sketches of the calculator

Designing the website

I created mockup designs of potential designs for the calculator based on the 12-column grid that was currently employed across our website.

Pie charts were selected as the best way to display data because each area of loss would represent 100% of a given value. This could help users quickly identify what areas were creating the highest cost in each category.

I decided to use a tabbed system to display detailed information about each category that needed to be shown, so that users could dive deeper into some of the metrics that were used to calculate the values displayed. In the deep dive, they would have the option to edit values to see how this could change their ROI, allowing them to truly understand some of the adverse effects that even a small outage could cause.

Summary screen
Productivity mockup
revenue mockup

Web app development and iteration

I implemented on our website using Highcharts.js to create the dynamic charts.

After launching, we have continued to iterate and improve the application based on analytics and customer feedback. One of the major changes since launching was to ungate the calculator - users originally couldn't interact with the web app without inputting their contact information for lead generation. We decided to “unlock” the application and move the form fill to the end of the process, adding a “Save as PDF” button that would prompt the user to input their information to save their data and share with their colleagues. This flow has resulted in higher usage of the calculator.

Save results as PDF
live site
live data visualizations