Systematic Creativity: Designing the Nutanix Illustration System
Rationalising the role of illustration within Nutanix products.
The perception and use of illustration has seen a dramatic shift in recent years. From a poorly substantiated visual footnote, it has graduated to become an integral component of UX design, capable of captivating users and engaging them with a product to an extent that would otherwise be unfathomable.
At Nutanix, we pride ourselves in our ability to craft intuitive, meaningful user experiences that reflect our design-first philosophy. By prioritising the articulation of information, our products are cohesive, visually eloquent solutions that instil delight.
Visual design is critical to this process- acting as the medium in which the user engages with the product. For this interaction to be deemed a success, the form, clarity, and tone of the message are all paramount.
How can illustration help achieve this?
In this article, I’ll provide a brief overview of the theoretical and practical principles behind the creation of illustrations for Nutanix- and why implementing a system for their use rationalises them as an indispensable addition to a visual designer’s toolkit.
A Product of its Environment
A successful design is a succinct solution; it is a relatively abstract concept that can take many forms, with its intention being the key distinguishing factor. To design well is to recognise the context of a problem in order to inform the solution to it. The design should be a viscous, malleable form- able to contour to the requirements of its circumstance.
Within the enterprise cloud space, good visual design comes in the form of cohesive, comprehensible communication. With products requiring the capability to portray streams of data and information, a designer must consider a multitude of factors in order to achieve this- from choosing which elements to prioritise within an interface to how their rendering impacts upon their interpretation. Good visual design is user-centric, with its success being measured by its usability and ability to engage a user with a product.
At Nutanix, a design system has been created to facilitate this process. Acting as a framework for visual designers, it provides both the building blocks for creating UI elements across the Nutanix product portfolio and guidelines for their implementation. This system is a response to its environment- a thorough understanding of its specific circumstance and purpose- that seeks to overcome the potential obstacles that arise within UX design for a cloud enterprise platform. With illustrations being viewed as a potentially integral addition to this design system, it would be paramount that their form and implementation were also representative of their setting.
The interpretation and realisation of illustration is integral to its success; in order to be used effectively, it must facilitate the user experience and act as a direct extension of the design system. Rather than being used as a visual ornament, it should be lauded as a fully-fledged new tool for communicating with the user.
Illustrating the Benefits
Having established that illustration within Nutanix product UX design will be directly informed by its context, how can their usage be justified? How can the user experience of a product, particularly within the enterprise space, benefit from this additional form of visual communication?
Illustrations Give a Product a Voice
Images are more memorable than words; and with such a data-heavy platform, it can be difficult for a product to distinguish itself from its competitors. With illustrations, Nutanix products can benefit from a viable visual form that creates a stronger visual association between platform and user.
Illustrations Delight
When it comes to user experience, delight can come in many forms- the challenge is embedding it seamlessly without inhibiting usability. When implemented correctly, illustration is a powerful tool that can spark those little ‘A-ha!’ moments- elevating a customer’s experience with a product from good to fantastic.
Illustrations Engage a User
When a user interacts with a product, they are continuously exposed to the same imagery. In terms of UI, this familiarity is, of course, integral to a positive user experience. With content, however, this monotony can lead to visual fatigue. Providing designers with an alternate visual language can rejuvenate an interface and keep the user actively engaged.
Illustrations Simplify
Many of the services that Nutanix offers are relatively complex. Whether it be via abstracting from a more intricate concept or by offering a visual summary in the place of text, illustrations can provide an eloquent solution to a convoluted subject.
Illustrations Assimilate
The difference between visual approaches taken by the product and marketing teams at Nutanix is quite distinct; understandably so, as the two sets of imagery serve two different purposes within two different contexts. Even though total visual continuity between the two would be illogical, greater cohesion would improve the journey for a customer becoming a user, with a less jarring visual distinction between promotional materials and product experience.
Illustrations Provide Opportunity
The common thread here is how the role of illustration is interpreted. Illustrations provide opportunity where other forms of design fall short. Rather than a visual afterthought, illustrations should act as a supplementary method of engaging with the user- an extension of the design system.
Pragmatic Abstraction
When I was initially brought in to Nutanix as a contractor in August 2018 to work alongside Jeremy Sallee, we were met with a fiendishly simple brief: to lead the development of a framework for the creation of illustrations using only rudimentary shapes. The subsequent assets would then be catalogued into an object library- akin to a form of digital Lego- to be reused, reorganised and repurposed by visual designers.
As a case study, this seemed an exciting proposition. Yet, with the intention of scaling this across multiple products, we found a significant issue arose in the early stages.
Nutanix offers numerous products and services. While many features and elements overlap, the sheer number of potential applications for illustrations would require huge limitations in what could actually be created in order to implement this initial vision.
There is a fine line between restrictions that elevate creativity and rules that stifle it, and only allowing for illustrations that use basic shapes drawn from a preexisting pool would only add greater complexity to both the creative process and the user experience. For example, there are only so many things a cube can represent- and forcing its usage across so many possible scenarios ultimately seemed totally unfeasible.
Our take away from this- and a thread that would continue throughout the system’s creation- is accepting the requisite for abstraction, though being aware of its limits. Illustrations are intrinsically symbolic, though to successfully communicate with the viewer, they must remain comprehensible in spite of their context.
In Understanding Comics, Scott McCloud theorises that readers are more likely to connect with characters that offer less visual detail, as it allows them to project their interpretation upon them. The same applies to illustration as a whole- the more you abstract an image, the more things it can come to represent.
There is a threshold, however, in whether or not an abstract rendering can prove fit for purpose. In the above image, we accept that the final iteration is a representation of a head because of its context. If we were to place it on a blank page though, it would no longer communicate this idea.
Alternatively, there is a minimum amount of detail required in order for an image to be successfully interpreted. This could equate to as little as two dots and a line- whatever is necessary in order to represent the concept.
Although abstraction is a necessity for any illustration within Nutanix UX product design given the nature of what is being depicted, greater flexibility would be required due to the scope of the platform. Simplifying the illustrations would have lateral advantages- such as offering a better reflection of the context and leaving the door open for the creation of reusable assets- but should never be employed at the cost of usability.
The Illustration System
This understanding of abstraction would directly inform the principles behind the illustration system. With the intention of scaling illustrations across the entire product line, their realisation would be firmly placed on our comprehension of their environment. Illustrations would both have to reflect the more immediate visual aspects of the design system as well as play an active role in engaging the user.
In viewing illustration as an extension of the design system rather than a separate entity, logic dictated that the majority of the rules that governed the parent system would also apply. For example, we limited the use of colour to highlight more pertinent visual information, such as calls to action and error states. The colours used for this were directly sampled from the design system palette for both shades and strokes, resulting in illustration feeling more like an intrinsic part of the UI rather than a separate entity.
Our focus on user experience dictated the majority of our decisions regarding rendering and methodology in creating illustrations too. We chose to use isometric projection (an orthographic form of depiction that removes perspective), as we felt it better reflected the technical, intricate nature of the Nutanix UI and would allow for greater control in spacing and arrangement. To remove any potential distraction or visual clutter, we minimised detail and reduced contrast; with even the stroke width and tone being considered depending on the circumstance.
The system encompasses far more than how assets are crafted. It governs usage, scaling, depiction, and more. The benefits of having such a system in place are numerous, and frequently extend to other aspects of UX design.
Systems Breed Cohesion
A system’s success largely depends on its individual, interconnected components. Cohesion is easily achieved by setting parameters for the creation of these elements, lessening the risk of inconsistency when collaborating.
Components Are Easily Integrated
An illustration created within a system has particular standards to adhere to. Sizing, colour, and scaling are all dictated by a system’s rules, dependent on the illustration’s circumstance and criteria. This allows for easier integration into product.
Systems Improve Workflow
With a visual direction in place, time is no longer required for developing the intricacies of the execution. This becomes increasingly beneficial as the designer familiarises oneself with the system, resulting in quicker turnarounds and better quality executions.
Systems Enforce Creativity
With restrictions placed on the form that an illustration can take, greater emphasis lays on the concept. This means a designer’s time is shifted from the craft to the creative, encouraging more inventive approaches and leading to delightful executions.
Systems Encourage Universality
Systems encourage repurposing of components. Through cataloguing and promoting the reuse of assets, workflow, consistency, and collaboration are further improved.
Design, Destroy, Rebuild
The realisation of any design system is hinged on the ability of its designers to interpret and execute its parameters correctly. To truly push a system to its limits, collaboration and application in real-world scenarios is a necessity.
In our case, ‘empty states’ (small illustrations that would appear in lieu of absent data or information) acted as the first point for this wider adoption- and the first hurdle encountered regarding the practical applications of the system.
Due to the limited canvas for these (120px x 120px), space was at a premium. With so few pixels available, a greater degree of frugality was required than was previously warranted; every object, stroke, and detail had to be deliberated and considered.
This was a skill that was developed and refined as a result of a collaborative, iterative process. Both Sourav Sarkar and Abhishek Bhardwaj were actively involved in creating illustrations within the system at this point, with their participation and feedback proving to be essential in its development. Likewise, feedback from stakeholders played a significant role in shaping both the execution of and parameters for these illustrations. Rules were refined due to differing interpretations, and ambiguities resolved through tweaking of language and expansion of model scenarios.
As a result of this collaborative development, coherency became exponentially more difficult. With more collaborators came more components, more opinions, and more considerations. This mutually creative approach highlighted potential weak points in our method and framework. Scaling the system at this rate allowed for refinements to be made, and ensure better implementation further down the road.
As with the rendering method, the content of the illustrations themselves had to maintain consistency- which proved difficult with more intricate instances. A case in point: if we have visually defined a VM to fit within an empty state, how can we then depict multiple clusters using the same existing objects and within the same space?
The only way to overcome issues such as this is a willingness to adapt existing visual definitions as a means of forging new visual metaphors when the scenario allows it. Without placing the system under these stresses and being able to identify points of failure, these inconsistencies would be of detriment to an assets reusability.
The collaborative nature of this development phase circles back to the illustration system’s intentions of universal accessibility and usage. From the iterative process of refinement to the perpetual development and feedback through its use, the designers and stakeholders that utilise the system and the assets within it are the true signifiers of its purpose.
Looking to the Future
The longevity of a system lies within its ability to adapt. By anticipating changes in circumstance and continuing to offer tangible solutions for resolving new challenges, a system can retain significance as a device that can facilitate the tailoring of immersive user experiences.
An integral element to the longevity of the illustration system is the object library, the benefits of which are two-fold. Firstly, by cataloguing assets and making them readily available, we provide visual designers with the opportunity to repurpose illustrations within product- improving workflow and consistency. Additionally, it can act as a repository for designers from other departments to utilise- encouraging improved cohesion between product and Nutanix’s outwards facing visual identity.
In a recent example of this, we were tasked with reimagining a set of icons that the marketing team had previously outsourced. Though the illustration system’s framework applied to the creation of these icons, a degree of flexibility and appreciation for the change of context had to be employed. Abstraction was discouraged- with the concepts needing to be immediately recognisable due to their setting- and the colour palette had to be shifted in order to be in-line with the marketing team’s branding and identity.
The adoption of illustration within Nutanix UX design and beyond is representative of a growing willingness to embrace a broader range of visual forms. Animation is one such outcome, with it being increasingly considered both as an option to be directly implemented into the UI and as a consideration for our illustrative work. As with our rationalisation of illustration, animation is put under the same scrutiny as any other visual form. Its presence must be paramount to the message’s clarity, and its execution must not sacrifice the user experience.
The ability to embrace alternate forms of visual communication demonstrates the potential for utilising a progressive, carefully considered mindset towards UX design. Through its implementation within Nutanix products, illustration can communicate otherwise unintelligible concepts, invigorate otherwise tedious experiences, and provide a voice for a product that would otherwise go unheard.
The benefits of a system for the realisation of illustration extend far beyond those reaped from a systematic approach to creativity. With its conception, role, and execution all resulting from an acknowledgement of its circumstance, it provides a framework for creation that is intrinsically linked with the user experience. It is a dynamic extension of the design system that acts as both a reflection of its purpose and an enhancement of its context; a pivotal tool within UX design that cannot be equalled.
