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.
Error pages did not reflect the current IBM Cloud branding scheme, and provided little help for users to resume their work.
To redesign 404 and 500 error pages to match the branding and visual standards of IBM Cloud today. Use research to improve UI.
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.
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.
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.
Based on my explorations, I saw the use of the isometric perspective grid as an opportunity to align with existing branded content.
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.