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.
ERROR Pages
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.
Scenarios covered
• 404 page
• Fatal error page
• Access Denied
When encountering 404 messages I always imagined the page being lost in digital space, so felt a scene with an astronaut being lost during space travel would be relatable yet whimsical.
When the system returns a fatal error, it is often due to unknown reasons. Depicting this scene where an astronaut has crashed their rocket for unknown reasons reinforces the gravity of the error, but maintains a sense of delight.
Continuing with the space travel theme, I felt it was appropriate to depict a permission page as an astronaut being denied access to their space craft. This captures the idea of permissions in a light tone to alleviate frustration with the experience.