Project

Create a better error page

Team

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

Role / contribution

Interface and visual design

Tools

Adobe Illustrator and Confluence

Deliverables

Mockups, final designs and design specs

 

Situation

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

Problem

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
 

Process

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
 

Implementation

The front-end developer ...

Constraint
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

words

  • 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.

 

Corrections

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)

 

Results

  • 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

Lessons

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.