Designing a service status page for Croydon.gov.uk

The CDS web delivery team recently put a new design pattern live. It was born from the user need to see how COVID-19 was impacting council services. Here’s how we did it.

It all started with a single page which showed the latest info for all council services. When lockdown started, this page grew and grew as information about how council services were impacted flooded in. Pretty soon the page was ridiculously long – take a look at this screenshot.

We soon recognised that the page HAD to change.

Discovery time

We knew that trying to display a summary of many complex services wasn’t a unique or new design problem, so we did some research:

• as Croydon is a London borough, the first example that came to us was the TFL status page, which quickly gives you an update on 15 different lines across the network
• we try to align to the GOV.UK design system, so we then looked at their tabs and accordion components (conscious they’re still classed as experimental)
• we’re also invested in using Bootstrap, so looked at what was available there, and analysed the “collapse” feature

We liked how the vertical pattern from TfL could be scaled to many items, but also liked how the accordion/collapse pattern made good use of the page width.

Alpha to beta

Then we had a bit of a breakthrough. We found an example on Codepen which brought the best of both patterns together – stacked for mobile, tabbed for desktop

We then coded an alpha, and agreed this was worth designing and building a beta from.

We iterated the design – refined the layout, gave it a splash of colour and added some icons. We also agreed how this would be built, using a Drupal Block that didn’t restrict where it could be used across the site.

Content design

Content designers worked in parallel to define how we would carve up content into tabs – they quickly agreed to use the existing top level Information Architecture on the site as it had been well tested with users.

We then debated & tested the language for different service statuses. We wanted to communicate what the council was doing, rather than what it wasn’t.

We went on a journey from “No issues/Known issues/Service closed” to “Normal service/Revised service/Limited service”.

Going live

Lastly, we presented it in a Show And Tell to the rest of CDS (virtually using MS Teams).

Some language tweaks were identified, and also the latest service status terms hadn’t made it to the demo site, so they were reviewed again and added.

We then documented how to update content and add the pattern to pages, and finally made the switch and published the new pattern for users.

Go take a look!

Team headline credits and thanks:

Interaction & UX design: “Design” Dave Hampton @clearspotmedia

Drupal Dev: Adnan Muhammad

Frontend Dev: Chris Stevens

Delivery: Will Callaghan @willguv

Content design: Steph Wilson @stephwilson, Corinne Pinfold @corinnepinfold, and Chris O’Leary

And me as product manager.