To fully address the issue of consistency, illustration should also be considered at a system level. I started the effort to address this by consolidating the various illustration styles in our products into a consistent look and feel, and by documenting them as a guide for my team members to consume. This effort goes in-hand with my primary role in leading the adoption and implementation of the Clarity UI library in our EUC products for a consistent experience.
Confidential information has been obfuscated or omitted and the views here do not necessarily reflect those of VMware.
Role: Visual Design, Research
Tools: Sketch, Zeplin
Illustration Design Guide
At its core, illustration should always be used to enable users when required and enhance their experience with the product. I began this effort by defining the role of illustration within VMware EUC products. This guide establishes this role through examples from the products for crafting illustrations.
When should you use illustration?
Illustrations provide context, are relatable, and delight users.
Illustration Types & Color Composition
Since VMware utilizes the Clarity UI color palette, our illustrations needed to compliment the framework. I decided to utilize the colors from Clarity as the base and set up guidelines governing the hues that should be used in primary elements and those for secondary and background elements. I also identified other contrasting colors for highlights, types of illustrations, visual themes, and instances within the product where illustrations can provide value. This ensures any illustrations we create will always compliment the product experience.
Below you will see some examples of color usage according to the type of illustration being utilized.
System level messaging would the first opportunity to showcase the illustration guidelines in action. These pages cover scenarios where users do not have a clear path to resolution. I worked with fellow designers on the team to identify pages where illustration can be leveraged to improve how users engage with error messaging.
Since these pages represent the system, I wanted them to follow a theme that could be used across all scenarios. Our product is complex and offers a wide range of functionality to users, but sometimes navigating it can feel like space travel especially when unforeseen errors happen. So a space theme seemed appropriate as a relatable yet whimsical way to convey some small moments of delight out of what could be very frustrating situations.
• 404 page
• Fatal error page
• Access Denied