Product illustration | vmware
Illustration Framework
The End User Computing (EUC) group at VMware has several products covering web and app platforms. Each one utilized illustration differently, creating an inconsistent experience across the products. It was clear we needed to unify our in-product illustration style and define a tone & voice for creating this type of content. This effort focused on creating a strategy and framework for building a unified illustration experience the across products.
Role: Product Design, Research, Documentation
Tools: Sketch, Zeplin
AUDITING ILLUSTRATION
To start this effort, I partnered with fellow designers to audit the existing illustrations being used in the EUC products. We documented and analyzed examples of illustration to identify style similarities/differences, use-cases, color palettes, and composition. This allowed us to see the impact of illustration across products and provided an baseline of how we were using illustration and where there were gaps.
Examples from the illustration audit covering a variety of scenarios and highlighting the various styles being used. This audit made it clear that a unified voice and tone was needed to build cohesive product illustrations.
Crafting guidelines
The audit exercise highlighted the need for more prescriptive guidelines to inform our in-product illustration. Pulling from experience creating style guides, I knew we needed to balance being prescriptive and allowing for flexibility by focusing on creating a set of guiding principles as the foundation that could be built upon. These principles needed to capture the overall goal of illustration in our products, allowing us to work toward specific guidance as we refined the framework. At the core we wanted illustration to provide context to users, be relatable and easily identifiable, and engage users in moments of delight.
identifying scenarios
Any guidelines created needed to account for how illustration could be used across varied scenarios. I outlined different classes of illustration from large/full screen uses to smaller ones used in context. Along with identifying the types of illustration it was important to provide potential use-cases for designers to consult from.
defining color
VMware utilizes the open source UI framework Clarity, which has a defined color palette. So our illustrations needed to compliment these colors. I decided to utilize colors from Clarity as the base and set up guidelines on which hues should be used in primary elements and those for secondary and background elements, and options for highlight colors. This ensures any illustrations we create will always compliment the product experience.
composition guidelines
The framework needed to expand the guidance provided on composition and include examples for reference. I included general guidance on the composition of illustrations to provide more structure for designers to keep in mind when they create new illustrations.
The framework in action
The opportunity to put the framework to the test arose when VMware started an effort to update system errors across the EUC products. This effort targeted scenarios where users do not have a clear path to resolution and can often be a pain-point in product experience. These system level messages also provided a prime opportunity to set a clear style and tone for system communications.
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.
Fatal Error
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.
404
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.
Access Denied
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.
Maintenance
When the use-case for a maintenance or under-construction page arose, it was only a matter of extending the visual theme, voice and tone I had already established for the product. To address this scenario, I chose to focus on a scene displaying a rocket in the midst of construction, but added a bit of whimsy by showing the astronauts confused about the construction as they are using simple assembly instructions.
