Create a better error page


VP of Product, Front-end Developer, Software Engineer, UX / UI Designer (me)

Role / contribution

Interface and visual design


Adobe Illustrator and Confluence


Mockups, final designs and design specs



When the servers could not load a client's website, the error messages were cryptic and did nothing to alleviate viewer's concerns.


People who saw the error message were confused about its meaning and often called tech support to inform us their site was down. This tied up internal resources on client handling tasks instead of problem solving tasks.

Project goals

  • Reduce confusion
  • Minimize calls to tech support
  • Fast to implement
  • Message usable for multiple error types


Discovery & research

Besides researching examples of great 503 messages, I also investigated the project needs and current internal practices for similar situations.

Key questions for development team:

  • What types of errors would cause this page to show?
  • Is there any information on the existing error page that needs to remain in order to properly diagnose the issue?

Key questions for marketing / client teams:

  • What are the key messages to convey?
  • How do we keep clients informed of status updates in situations like this?

Mockups & refinements

Next I mocked up some quick design experiments, varying the language and visual elements.

Information goals

  • Let people know we are aware of the issue and working to solve it, without over promising
  • Tell them how to get status updates
  • Use language that works for any of the designated error types

Visual goals

  • Fast to create, possibly restricted to existing assets
  • A basic page, all elements will be embedded in the html file using inline styles & svgs
  • No external resources to load


The front-end developer ...

futura not a google font, even though it had been used previously on our main site, we needed a font that could appear on multiple sites for free


  • changed font family

In the past, the developers sometimes manually entered the text needed on the page by reading it from design mockup. This takes more time than is necessary and occasionally lead to misspellings in the product. In order to prevent any issues and to speed up the process I copy-pasted the text I had to the UI developer in a chat.



error message was turned on too broadly, hiding some of the less common error types that our internal teams relied on for debugging

  • not loose any info we need internally (note the production team catch)



  • Reduce confusion
  • Minimize calls to tech support
  • Fast to implement
  • Message usable for multiple error types


To see if we had reached our project goals, such as reduced confusion and better IA, we looked for increased engagement and frequency of sessions.

Frequency of sessions up significantly

  • Number of sessions up
  • Days since last session down

Engagement up significantly

  • Session duration up
  • Number of pages viewed per session up


At the time of launch, we had limited methods of outreach to current clients and thus they were surprised by the upgrades. While quickly embraced by some, others were understandably upset by the change to their routine. Subsequently, multiple means of outreach have been established to give people a heads up about changes.