STRIPE STATUS – A CASE STUDY

A paean to the Stripe status page

When Stripe was founded in 2018, stripe.com featured just one sentence – Payment processing for developers, and a single link. Stripe have grown from this simple page to a valuation of billions and a reputation for cutting edge design – using radically simple design and software to help customers navigate complex payment flows.

The stripe status page is a great example of design in the service of clear communication, which delivers exactly what the reader needs and nothing more. Today we're going to look at the elements they chose to include on their status page, and why it works so well.

Design at Stripe

The first website at stripe wasn't much to look at, because the founders were more focussed on getting their first users up and running - helping fix bugs and even on-boarding them manually and building website integrations in the customers's office. In the years since then the organisation has grown and become a centre of excellence in design, but early on there wasn't much to see, though there was a hint of the minimalist design aesthetic to come. The very first web page was purely functional:

The brutally minimalist stripe home page just after launch in 2011

The two brothers who founded stripe in 2010 - Patrick and John Collison, didn't set out to create a great design company, they set out to fix online payments, which were badly broken at the time. So their first home page wasn't fancy, but they promised handling payments in a few lines of code – developers listened, and loved what they built.

Almost 10 years later, the stripe home page has changed beyond recognition. The company has gathered a group of talented graphic designers, and are renowned for their light touch and ergonomic designs, which take the pain out of taking payments online and have a real focus on customer experience at every part of the flow. Their home page is seen as a reference for startup landing pages, and their design language is copied by startups across the world. A long way from a couple of brothers dreaming of the internet in Dromineer, Ireland, population 118. You can see the page as it is today below:

The stripe home page at the time of writing in 2019

Stripe have become masters of paring away their public facing design until only the essential is left. For another example see their recent connect account on-boarding redesign.

The first status page

The first stripe status page at status.stripe.com was created in 2012 by Amber Feng, then an engineer in her first few weeks at Stripe – she now heads Financial Infrastructure at the billion dollar company.

You can read the announcement on the stripe blog. The status page was not responsive (responsive web design wasn't yet mainstream), but otherwise was very similar in content and style to the page we see today. It has a global indicator at top, and then a list of services with historical uptime below, and at the bottom a feed from the twitter account which was used to tweet out status updates in the event of an outage.

"We built color-coded charts that show 90-day availability in Stripe’s three core services: the site, the API, and Stripe.js. We also show the raw uptime figures, calculated over the same three-month period. To calculate the figures, we use Pingdom to monitor each service, effectively performing a complete API request in the case of the API." – Amber Feng

This first page was updated via checks from pingdom – an interesting case of avoiding building out a separate checker service when an external one was available which was good enough – this let them build the first status page quickly and see if it was something they wanted to invest more time in later. It was a small company of around 10 people and this was her first task:

"When I first joined Stripe, we were tiny–I interviewed with everyone at the company! Without the lure or credibility of Stripe’s reputation or brand, what really attracted me to the company was the team." – Amber Feng

The Stripe status page in 2012, when it was first introduced –
note the nod towards Apple's skeuomorphic design, which was then very popular

Design evolution

Since 2012, the stripe status page has evolved in small ways, while remaining remarkably recognisable from the first version in 2012. Skeuomorphic design touches have been removed to move towards the flatter style currently in favour, the areas covered have evolved a little to represent the 4 key customer facing services, and the key is a little more general (perhaps to be more truthful when summarising multiple backend services), but the key elements of the design have remained, which is a remarkable achievement given its importance and prominence. The status page still regularly shows small outages or degraded service, unlike the status pages (if they exist) of many of their competitors.

What is most remarkable is how little has changed since the original design, which is a testament to its thoughtful simplicity:

The stripe status page in 2019, at the time of writing, which has few fundamental changes from the original page.

The design is so good that competing services have been heavily inspired by it (including our own Status Page). Statuspage.io, founded in 2012, offers a very similar view, clearly inspired by the stripe design to break down status by service and show the historical uptime as green or red bars summarising status per day.

Elements of the design

The stripe status page can be broken down into four distinct parts –

• A header with global status
• A set of services with individual status history
• A key to show what the colours mean
• A twitter feed showing the latest incident responses

It doesn't contain walls of text at the top explaining what the page does and pushing the actual status offscreen on mobile phones (see the Amazon status page below for a terrible example of this), it doesn't contain hundreds of graphs of poorly understood metrics intelligible only to the developers, it just shows you what is going on with stripe today and in the last few months.

The global status

The status page starts with a global status indicator, so that the customer knows at a glance whether there are any problems. If any services are not functioning well, this status indicator will turn amber or red.

The global status of all stripe services is shown at the top

The service status

Each important service for the customer gets its own bar - each of these services probably has hundreds of services below it, and is globally distributed, but instead of cluttering the status page with these implementation details (as AWS does for example), stripe shows the customer if any of their services are having problems at the moment (which is what the customer actually came to this page to find out).

The service days show the historical uptime for a specific group of services (in this case the Stripe API)

The status is updated automatically without human intervention - taking humans out of the loop - a common complaint on other status pages like Amazon AWS is that they are simply not accurate. Often there are significant consequences to downtime (in terms of SLAs, compensation, and simply engineering teams looking bad), so there is no incentive to show all downtime and every incentive to minimise it if humans are required to make a decision about when to update the page. In addition to this, the last thing you want to think about when you're trying to deal with an incident is keeping the status page updated regularly, so it's better if at least some of the status updates are automatic so that customers can see immediately if there is a problem, before humans at your company get involved.

The status key

The status bars have a key below them to make it completely clear what each status means. This has changed from the early days where it specified specific time windows, and now displays degradation or downtime - slightly more vague, but probably covering more cases (like for example slow responses or increased error rates as opposed to the service being completely down). Downtime is not as simple as a service not responding at all, sometimes services will respond, but too slowly, or with the wrong, or with an elevated error rate - the thresholds for reporting this are not as simple as they might at first appear, so it's probably better to keep the status displayed reasonably generic (up, partial or down).

The possible service statuses are clearly shown with different colours in the key

The twitter feed

At the bottom of the page Stripe includes tweets from a twitter account set up just to tweet out status updates. This idea has been copied by many companies as it's a useful way to communicate with customers in the event of a problem with the status page itself, and it frees the company from having to manage subscriptions from customers, and lets them control the messaging in a place where their customers will be discussing it anyway when an outage does occur. So this feed serves several purposes in addition to being a backup emergency status feed if the status page stops working.

Out-of-band updates from twitter sit at the bottom of the page; an additional channel for communication

How it works

The stripe status page is updated automatically, and it shows the historical uptime of the main services from the company by day for the last 90 days, along with a little bit of detail where there have been problems (if you hover over a day). Initially the status page was updated via an external service - pingdom, but nowadays they probably use their own monitoring, which is extensive (recording the result of each api call) and is available for individual accounts within their dashboard. The status page is hosted separately from other Stripe infrastructure of course - a lesson that AWS learned some time ago was to always separate the status page hosting from the main website.

The section at the bottom quoting a twitter status account, which still exists today, is an interesting backup - by encouraging customers to sign up to this twitter account, they can satisfy those who want to subscribe to updates, control what messaging those users see, and also have another channel to put out updates just in case there is a problem with both their normal infrastructure and the status page infrastructure.

"The page is hosted entirely separately from Stripe’s primary infrastructure to ensure that status.stripe.com is available even if the rest of Stripe isn’t. And in the spirit of making what you measure, we’ll likely add performance data and error rates." - Stripe Blog

Amazon AWS – a counterpoint

The Amazon AWS status page is a good example of a status page which fails at its primary task - to inform customers quickly and easily of outages. It's so bad people have made Alternatives to AWS status simply to present the data in a more intelligible way. This page is manually updated (usually well after an event is in progress), at times in the past has failed due to depending on AWS infrastructure itself, and presents so much information that it's hard to discern what is going on at all. There is no overall status and no grouping of services in a logical order, just an interminable list of services and regions. The antithesis of good design, and the polar opposite of the stripe status page. Even in 2019, this page is not responsive, so on a phone you get the tiny text below.

Amazon - the antithesis of good design

Inspiring others

The stripe status page has since inspired many other companies to set up their own status page, often in a similar style. Statuspage.io now offers a style very similar to that of the stripe page for example.

The Status Page provided by Project Page was heavily influenced by the stripe status page; it offers a similar utilitarian design which packs a lot of information in, but adds a little more information on days to give users context about errors. Days are broken down to show events within them at the appropriate hour (with the length of the event indicated by the width of the card). You can find out more about the status page over here, or sign up to get a free hosted status page of your own for a single service (multiple services are available on paid plans).