7 Steps to Creating a Scalable Illustration System Fully In-House.
How we built a solution for illustrating complex concepts at Yext.
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors, or representatives.
Yext’s rebrand in early 2019 consisted of a new logo, fonts, and color systems. Due to the limited resources of our small but mighty brand creative team, one of the most important elements of our rebrand — a scalable illustration system — had to wait for phase two. Yext had not previously established an illustration system. We had graphics and photographic treatments that we relied upon — maybe a little too much — but we needed a unique and consistent illustration system that complimented our new branding and would differentiate the brand even more.
We had two primary goals when we set out to develop our new system. The first was to help explain complicated concepts in an easily-understandable and straightforward way. Bringing life to intangible concepts like intent marketing, experience clouds, and natural language processing can prove especially challenging. How do you distill down ideas like that into images that make sense, are eye-catching, unique to our brand, and work internationally? The second was to create a scalable system that could work when making images for our company, our product suite, thought leadership, industries we serve, and solutions that we provide. It is a bit of a puzzle and was daunting at the start, but I am going to show you the process we used to solve that puzzle for Yext.
Figure out what is or isn’t working
1. Image Audit
So, where do we start? Who needs to be involved? Can we just draw some blue, oddly proportioned people doing different office tasks and call it a day?
NO!
We started by assessing what we had done in the past for different areas of our brand. We set up an image audit with our whole creative team to discuss the visual styles we were currently using, pointing out inconsistencies in our marketing materials, and identifying opportunities for improvement.
Stepping back and viewing the entire suite of creative projects from the last year will help you identify any brand disparities your customers might experience.
2. Stakeholder Discussions
As comforting as it is to limit these conversations to creatives, we needed to get input from other areas of the company. In these meetings, we discussed what our imagery needed to achieve for product marketing, demand generation, international markets — and what our current system may be lacking. These other teams are our partners, and if we aren’t collaborating with them, then we aren’t providing effective solutions.
3. Define Characteristics
Our audit resulted in five characteristics that we needed to solve for in our illustration system.
- Scalable
The system needed to work at different sizes, from web icons to large-scale wall displays at international conferences. We also needed it to work across industries, products, cultures, and outlets such as web, print, and motion graphics. - Unique
When these graphics are out in the wild, we need them to stand out — not just from our competitors or other B2B tech companies but also from consumer brands. How do we make sure that people recognize these graphics as Yext no matter where we are showing up? - Repeatable
Our design team doesn’t have any dedicated illustrators, and we wanted to avoid outsourcing for a few reasons. Firstly, we didn’t want to rely on a single third-party illustrator. Second, we wanted a system that would allow anyone on our team to make these illustrations, and oftentimes make them quickly. And third, we needed to be mindful of budget. - International
All of our marketing design is centralized in the US. However, these graphics need to work for our teams across the globe. This means that if we include text in a graphic, we then have to make a translated version in German, French, Spanish, Italian, Chinese, Japanese, and possibly more in the future. - Timeless
The system that we establish must allow for growth and evolution over time. Tech changes quickly, and we want to ensure the foundation of our visual system is flexible enough to evolve with the company without looking dated within a few years.
Explore, ideate, get wild
4. Look Outward
After looking inward at our own materials, we then needed to look outward at what our competitors and other companies in our periphery were doing. We collected boards of inspiration from other companies and looked for trends and patterns in what others were making. If we want to meet our goal of being unique, we need to know what to avoid and see where we can bring unexpected solutions that are instantly identifiable as Yext. To make collaboration easier, our team used InVision Boards and Freehands. Individual team members could drop images and leave notes in an open pasteboard, which got everyone involved in sharing and discussions.
5. Experiment
We could endlessly geek out over drop shadows and Dribbble shots, but we needed to start experimenting ourselves and making decisions.
How should we show our product?
Should we include humans in the illustrations?
Do we incorporate photography?
What’s the best way to use our color palette?
How do we show devices without them becoming outdated with the next hardware release?
In this early iteration phase, we experimented with different styles for hero graphics, iconography, and product imagery, which we would then discuss in a weekly meeting.
In the exploratory phase, it was essential not to be afraid to try some unusual directions. It’s very valuable to know what directions you do not want to continue exploring, as well as identifying what shows promise and warrants further iteration.
After our research and exploration, we narrowed in on an updated collage illustration style that incorporated elements of photography and vector graphics. This was an evolution from the collage graphics that we had done in the past but pivoted in a bold, modern, and playful direction. It offered us the chance to be more metaphorical when representing complicated concepts.
From here, we made a list of the about 40 key graphics that we need to create. These were grouped into tiers based on priority of completion, whether it is necessary for an upcoming project, and how complex the illustration needs to be. Having this tiered list helps the team prioritize and stay productive by breaking down the daunting list into smaller achievable milestones.
While tackling this list, we started to identify patterns and rules that could be applied to ensure all illustrations would be cohesive.
Building Blocks
6. Guidelines
The rules that we had developed in these illustrations then needed to be documented so that the system would be repeatable, consistent, and efficient. However, one of the objectives that we set early in the project was that the system should be flexible to adapt as the company changes. With that in mind, we set guidelines around background shapes, drop shadow depths, colors, photography styles, and more. These are not unbreakable rules but rather guides to keep the style consistent. As time goes by, there will be revisions to these guidelines so the system can adapt as our brand evolves.
7. Expand the System
As we build out more illustrations using this system and incorporate them into our website and marketing materials, the style will (hopefully!) start to become synonymous with the Yext brand.
One of the first major applications of the new illustration style was on our updated industry solution web pages. We made four different illustration tiers of increasing complexity to use at different sizes for each industry. These range from a simple black and white icon to an intricate collage with simplified platform UI, photography, color, and shadows.
Another aspect of creating an illustration system was figuring out how it will work when animated. Collaborating with our Senior Video Producer on a new video for our Answers product, we storyboarded and created collage-based scenes in Photoshop (with meticulously named layers of course), which were then brought to life with motion, adding an extra dimension to our illustration system.
TL;DR
When establishing an illustration system, you must create a system that works for your team or organization. What works for one company may not be right for another. This is what worked for our team at Yext.
Figure out what is or isn’t working
1: Conduct an audit of your brand’s visual systems. Find inconsistencies and areas that need improvement. Take a step back and look across different outlets to better see what is lacking.
2: Seek out input from other teams within the company. Discuss what problems an illustration system could solve for them, what their hopes are for a new system, and what hasn’t been working for them up to this point.
3: Define objectives for what the new system needs to achieve. These will become your north star throughout the process.
Explore, ideate, get wild
4: After looking inward at your own materials, then shift to looking outward at what competitors and other companies are doing in order to differentiate your brand.
5: Experiment with different hero graphic style, iconography, and product imagery, and meet regularly with stakeholders to discuss and critique. It’s valuable to know what directions you do not want to continue exploring in this phase and narrow down to what deserves further exploration.
Building Blocks
6: Once a consistent style is established, document the guidelines so that the style is repeatable and efficient for others to use.
7: Expand the illustration system into other applications, such as motion graphics, to test out the new style through all aspects of brand assets.
When done right, a well-thought-out illustration system will help a design team work more efficiently by spending less effort on minute visual details, and more time on the strategic aspect of what the graphic needs to achieve.
