Product Illustration at Appian
Imagine you are a new Appian Developer. You’re exploring the platform and land on the DevOps section of the Admin Console. You’re not familiar with DevOps practices, but you’re interested in understanding what Health Check can do for you.
That’s where I come in. I’m Regina, a UX Designer at Appian. I work with teams that develop Appian’s DevOps features, but another core part of my work is leading the product illustration initiative.
Let’s get back to the “Health Check” page. Without having to read through documentation, imagine seeing a graphic on the Health Check landing page that depicts a woman with a stethoscope performing an assessment on an environment. You immediately think to yourself, “Oh, this feature will help me check on my environment’s health.”
I’m here to talk about product illustrations at Appian. Illustrations are an industry standard as eye-catching visuals on tech platforms, but they also aid in storytelling and user experience by illustrating potentially complex concepts, such as Health Check, through a digestible metaphor. Appian’s product illustration system has experienced tremendous growth in the past year. I want to take you on a journey on how I led a grassroots movement within the company to improve user experience and showcase company values such as simplicity and inclusivity through illustrations.
From Guild to Grassroots
Product illustrations began as a volunteer effort by our Graphic Design Guild. Guilds are self-organized groups of people who share a common interest, and the Graphic Design Guild handled both internal graphic design requests as well as illustrations for the platform. Gradually, a few illustrations appeared throughout the product, but they lacked visual consistency and did not have a clearly defined style.
With platform maturity came the need to showcase illustrations more prominently and usefully in our products and solutions. From a user experience standpoint, illustrations couldn’t just be there to fill up some white space — they needed to enhance messaging by simplifying complex, technical concepts. From a visual standpoint, the graphics had to represent Appian values, look professional, and differentiate us from other companies. For these illustrations to truly succeed, they needed to satisfy both of these aspects — enhance the user experience and add visual interest. For that to happen, we needed to create an illustration design system.
Illustration Design System: User Experience
Let’s start with the user experience. Before discussing what the illustrations would look like, we first tackled the “why” behind them. Sure, illustrations can look stylish and add visual interest to an otherwise bare page, but for them to be functional as well, they needed to help deliver a message. To keep user experience at the forefront, we established a few standard practices for illustrations.
First and foremost, illustrations must clearly support the main message of a page. They need to empower users to effortlessly digest the information on a new page so that they can quickly make a decision or continue with an action.
Second, illustrations are a key aspect of storytelling, and thus need to take into account the whole user flow. An illustration might work for a certain interface, but if that interface is a single page within a multi-step dialog, then perhaps a series of graphics would be more appropriate to guide the user through the entire dialog.
Finally, illustrations must humanize the message. Imagine a densely packed dialog that guides the user through deploying an application. After completing the deployment steps, the user sees a confirmation dialog with summary information. As the culmination of the actions the user just completed, this page should evoke achievement and celebration, but simply displaying text could feel rather mechanical and anticlimactic. Now imagine that same dialog with a bullet train graphic on the confirmation page.
The user still understands that their deployment is underway, but the addition of the illustration also communicates that Appian is deploying large items quickly, reliably, and automatically. The deployment interaction no longer feels like just another technical process. Rather, it’s exciting and relatable, and this connection is accomplished by humanizing concepts and empathizing with our users.
With these standards, we developed a process for creating illustrations. A short discovery phase would involve deciding whether an illustration would be appropriate for the space, addressing the message, and understanding the user. This would be followed by initial sketches and high-fidelity illustrations, both of which would involve multiple rounds of iterations and feedback before finally being placed into the platform. It’s no accident this process is quite similar to the standard UX process!
Illustration Design System: Visual Identity
The next step in defining our system was to take a deep dive into existing industry standards and establish a style guide.
We looked at how other companies elevated their storytelling and user experience with visuals, and we found two main components of a successful style guide — a guideline for consistency and an establishment of visual identity. Our guidelines needed to be thorough and clear enough to maintain consistency and quality throughout the platform. This meant establishing the line quality, color palette, and level of detail. Illustrations that aren’t cohesive look messy. If we can’t care about the little things, how can customers expect us to care about the big things?
The second aspect to tackle was visual identity. The question “How might we promote Appian values through our visual language?” was vague and challenging. We analyzed Appian values to understand how our illustrations can uphold what makes our company and product special. In particular, we wanted to be inclusive and address a global audience of customers whose different cultures and backgrounds might result in different interpretations of colors and symbols. We also wanted to avoid common tropes of Western-biased styles such as male-dominated IT fields, Western-style clothing, and traditional gender roles.
With that in mind, a group of UX Designers came together to build a style guide based on these principles. Elements like shading and texture would be kept to a minimum to parallel the simplicity and “easy to use” value of Appian’s platform. Our color scheme would work hand-in-hand with Appian’s classic blue color, with vibrant blues to bring out highlights and neutral purples to add background interest.
To address a global audience, we wanted to promote diversity and inclusivity. This meant that we were mindful of representing people in realistic shades and shapes rather than defaulting to the blue or purple-toned people seen in some illustration systems. We emphasized racial diversity and equality in our illustrations and strived to combat our own unconscious biases when deciding how to depict individuals interacting within a space. Finally, we defined our illustration tone — friendly, but not too whimsical — and used that base to emphasize metaphorical storytelling for the platform and straightforward imagery for solutions.
Illustrations in Action
Our first modern illustration appeared in the product in our 20.1 release with a landing page illustration for the Records Object. This illustration was created in parallel with the style guide, and I think it encapsulates the tone and identity of our product — we’re collaborative, we’re inclusive, we’re professional, and we’re powerful.
Now and Beyond
Three releases later, we now have nearly 20 illustrations in the platform and solutions. As the presence of illustrations continues to grow, we have started building an asset library to make it easier for others to create and customize their own graphics. I have also started building a team; illustrations have mostly been a one-woman effort (with valuable support from members of the UX Team), but with the increasing need for illustrations and the understanding that we need more feedback and discussions to improve, I have recruited more individuals to join the effort. This is especially important given the emphasis we place on inclusion and diversity in our illustrations.
We are also thinking about the future of illustrations and how they may be impacted by company-wide changes. With a new logo and rebranding effort led by Marketing and an increased demand for graphics in Appian Solutions, I want to ensure our illustrations retain their unique style. Appian is not some cookie-cutter platform represented by stock photos and generic illustrations. It’s an inclusive community of diverse individuals, and our illustrations should and always will reflect our identity.
