SaaS illustrations, a quick guide
- 10.13.2022
- Nathan Tufts-Brown
- 7 min read
Sketch by Artur Ovanesyan, Raivix
Illustrations seem to be everywhere in SaaS these days. They certainly can look visually appealing. But do they serve another purpose besides “being pretty?” What if illustrations could be a supporting player in SaaS product experience ? Illustrations can be a great asset with tone, brand recognition and even directing users.
1. The rise of illustrations in SaaS
The visual landscape of saas applications is always changing. In 2007, there was a noticeable shift from skeuomorphism, the design concept of making items resemble their real-world counterparts, to flat design.
The specific origins of the illustration trend in SaaS is not 100% known. It noticeably starts to pick up steam in 2017, with Alice Lee’s illustrations for Slack, creating 40 illustrations to compliment various screen states in the application.
About Header Variant by Alice Lee
Slack University Header by Alice Lee
Homepage variant by Alice Lee
The illustrations aren’t here to replace the copy but to visually compliment the words and the screens. They are an extra voice telling the page’s story. They help provide an extra layer of warmth and, dare I say, delight to the UX experience.
2. Illustration's impact
So what exactly does illustrations do for the product experience?
Helps with the tone/context of the page
Look at this great example of an empty state from gusto, a payroll SaaS. Instead of simply notifying the user, Val, their to-do list is empty, they gave them an ice cream. More importantly, they gave them the feeling of a reward with warm copy and cold (digital) icecream.
Perhaps the most recognizable SaaS illustration out there is the Duolingo owl and the application’s small army of illustration characters. What makes the Duolingo illustration experience successful comes from three parts
- They already have an insanely strong brand. For better or worse, duolingo’s unyielding notifications have become meme legends.
- They have fluid motion design and help bring the lesson alive.
- Their animations are a great vehicle for their praise-heavy copy.
All of these factors come together to make more than illustrations with character; they are characters themselves.
Helps give direction (in the right context)
Would the user have been lost without this illustration? Probably not. Is the page 1000% more fun? Absolutely.
What’s great about this example is that the majority of the copy doesn’t support the illustration’s action and that’s okay. The headline is about getting users to jump on the Basecamp bandwagon and showing financial value. It’s only the second sentence in the third bullet point that connects to the illustration’s gesture. “Just fill out the form below and you’re in.”
Icons make it easier to “decode” the screen
Airbnb icons by Zach Roszczewski
Airbnb is an information rich experience (from location, activities, the “dos and don’ts” of properties and more). One big way they make this experience more digestible is iconography. This artistic style has done wonders with the limited pixel real estate. It helps make the screen more scannable in a shorter amount of time. They are a nearly pure utilitarian illustration, not there to support tone but reduce cognitive load.
3. The process of creating custom illustrations
If you want to do illustrations right, you need to make them from scratch. Generic imagery might help your product by breaking up visual monotony but it doesn’t differentiate your product. Simply put, it won’t fit your product experience.
So how do you create a bespoke visual experience?
Start by seeing what your competitors are doing. Look at least 5 examples of similar software and see how they use their illustrations to differentiate. This not only will provide a source for inspiration but will make sure your future visuals aren’t blending in with the crowd.
Inspiration can come in many forms. Examine the context and copy of the experience where the new illustrations will live. This will help guide your inspiration. Is your experience trying to showcase community? Productivity? Creativity? Explore the synonyms and tangent ideas associated with the core concepts your screen is trying to convey.
Take the best insights from both research styles and synthesize imagery that supports the goal of the screen. The iteration process can be lengthy since it involves multiple stakeholders. And whatever gets approved only lasts until the next rebranding. When the product evolves, the illustrations evolve.
5. Conclusion
As this article draws (get it?) to a close, the whole point of illustrations is to help shave off one more millisecond between the user’s first view of a page and their understanding of it. Be it a specific action or communicating the brand’s voice and tone, illustrations help tell the SaaS’s story.
What kind of visual story is your product telling?
