đź“ŁPostmark has been acquired by ActiveCampaign
x

Designing a status page for Beanstalk

Since the early days of Beanstalk we have been using our Twitter account for status updates and maintenance notices, but it became obvious that a separate status page was needed for better communication. Twitter is a great way to learn about problems or maintenance, but only for people who check it all the time. People who are not on Twitter or don’t follow us have to check our Twitter stream which can be cluttered with replies or retweets and not clearly display the current status of our services.

Design

With this problem in mind I designed a status page to help people understand what’s going on with Beanstalk at any time:

My goal was to make it really simple to get rid of any distraction. We use special headers for moments when we have issues or have a maintenance in progress:

Days without incidents

We thought that it would be interesting to count the days since the last incident, so this number is always there right below “All services are operating normally” message. We are really motivated to keep this number as high as we can!

It's simple jQuery which calculates the days since the last update and replaces the default message:

var state = $('#updates article:first .status');
var latestState = (state.length > 0) ? $(state).html().toLowerCase() : 'ok';

$('header section').hide();

if (latestState == 'problem') $('header section.status-problem').show();
else if (latestState == 'maintenance') $('header section.status-maintenance').show();
else $('header section.status-ok').show();

The status page is linked from many places on our landing site and within the application. Make sure to subscribe to RSS or email notifications or follow us on Twitter to get latest system updates in time.

Great Communication Earns Trust

One of the most common pieces of positive feedback we get from Beanstalk customers is how responsive we are to support and communication - but that doesn't mean we can't always be looking for ways to improve! We know that being clear communicators, not just when things are going wrong, helps people trust us and love our products even more.

This simple status page will help us build and keep the trust of our customers, hopefully you can use some of these techniques to do the same thing for your product status pages!