400/500 Errors

IBM Cloud error pages reflected out-of-date branding and were inconsistent in their illustration, content, and UI. With the inevitability of users encountering platform errors whether they are internal network based or human error, IBM Cloud needs to provide helpful ways to ameliorate the situation.

‍

Problem

Error pages did not reflect the current IBM Cloud branding scheme, and provided little help for users to resume their work.

Role

Visual/UX Designer

Solution

To redesign 404 and 500 error pages to match the branding and visual standards of IBM Cloud today. Use research to improve UI.

Time

5 months

Research

Given that the IBM Cloud end user is a developer team, I conducted interviews with our internal network of sponsor users that included developers, dev managers, and product owners.
‍
To get a better sense of what these individuals expect in an error page, I asked the following questions:

When you see a platform error what do you expect to see?

What can IBM Cloud do to make you feel supported when the platform has an error?

What happened?
What to do?
A way back
Reassurance and direction

404

In comparison to the research, the 404 page only offers an affordance to the IBM Cloud status page and not to the actual console UI. While the content is straightforward, it doesn’t provide a strong, simple, helpful tone to guide the user back to where he/she was.

500

Visually, the 500 page has a slightly different styling compared to the 404 page, with no helpful affordances.
‍
The typeface is Helvetica, and not IBM Plex.
‍
Illustrations and colors do not reflect current branding or design system.

No jokes. Just facts
Anything to help me get back to my work

Be human
A strong, simple, helpful tone

How would you expect a platform help you best in this moment?

Existing Experience

Current error pages are limited to 404 and 500 errors. 404 is an error based on incorrect user input, and 500 is an internal network/server issue.

Existing Visual Elements


The current IBM Cloud brand guidelines reflect a modern and high contrast visual/tonal style with an editorial 
mindset. Saturated blues are present throughout the color wheel and content is kept to a minimum with purposeful intent. These are a few visual examples that helped me create a baseline for further exploration.

Exploration

Given the many examples of visual styling across IBM Cloud, color fidelity was a top priority along with using the IBM Plex font. The object was to create a high contrast and highly editorial page.

Color

Cloud Logo

Gradient

Plex 60 (light)

H1: lrg
Weight: 300 / Light
Size: 60px (3.75rem)
Line-height: 70px (4.375rem)

Plex 42 (light)

H1: med
Weight: 300 / Light
Size: 60px (3.75rem)
Line-height: 70px (4.375rem)

Plex 16 (regular)

Body: lrg
Weight: 300 / Light
Size: 60px (3.75rem)
Line-height: 70px (4.375rem)

Plex 14 (regular)

Body: med
Weight: 300 / Light
Size: 60px (3.75rem)
Line-height: 70px (4.375rem)

Sketches

Isometric

Based on my explorations, I saw the use of the isometric perspective grid as an opportunity to align with existing branded content.

Clouds

Being the cloud platform, I took the liberty to use the Cloud logo as a more natural element to add a human touch to an otherwise abstracted visual style.

Examples

Iterations

Naturally no single iteration was “perfect,” however a consensus was made to use an iteration that balanced both an isometric perspective and simple illustration of the error itself without being too literal, shown below.

Final Mockups

Retrospective

This was a unique opportunity for me to be heavily involved in a predominantly visual project, but with the intent of improving the user experience of encountering platform errors.
‍
Using research to motivate the tone and positioning of the end illustration gave me the unique chance to solve what could potentially be a user pain point with artistic direction.