A Delightful Product: How We Proved Illustrations Add Value for the User
OutSystems released a new version of our integrated development environment (IDE), Service Studio, at the end of July 2021. Before the release, we shared a month of content on how our UX/UI Team tackled this project while building and implementing their very own Product Design System to create a delightful experience for all users.
As part of this series, we interviewed our UX/UI Team Lead, Andreia Mesquita, about how OutSystems built its UX culture, Runtime Experience Team Lead Miguel Nicolau explained why accessibility is even more important now in these Covid times, and the Team Lead of the Product Content Team, Marina Calado, showed why writing the words that matter is vital to establishing a UX writing practice.
Spoiler alert: users like illustrations on product interfaces! Trust me, we’ve done enough research and testing by now to state this with confidence. But why did we, the User Experience (UX) group at OutSystems, wanted to include illustrations in our product?
Let me draw you a picture. At OutSystems, we’re all about crafting awesome products that users will love — that is our mission, our North Star. As a UX group, we want to design delightful, frictionless, and easy-to-use experiences. And, of course, we want them to be visually appealing. We know we can reach for this star, and that is the path that drives us every day.
So, how does including illustrations in our product help us reach our goal? First, let’s look at the definition of illustration in the dictionary:
Illustration:
something that serves to illustrate: such as
a) a picture or diagram that helps make something clear or attractive
b) an example or instance that helps make something clear(Source: Merriam-Webster.)
Much more than a spark of visual delight, illustrations are also a great tool to erase friction in digital products. They achieve this by clarifying specific interface concepts, making the user tasks more straightforward. An illustration can simplify the user steps, focusing the person’s attention on what really matters: using the product to meet their needs.
Besides this goal, illustrations are also used in the OutSystems ecosystem to create a strong sense of unity and delight across our different products.
But, as you might have guessed from this article’s title, at OutSystems, we make decisions based on data — not opinions. Do users value the presence of illustrations in our products, or are we just eager to add visuals to the interface? To find out, we ran a few tests on usertesting.com. And guess what? Our assumption was correct: users do enjoy illustrations on product interfaces! Let me explain how we got to this conclusion and walk you through some numbers.
Illustrations: In or Out? We Asked the Users
In our minds, we knew that illustrations could be a great tool to craft engaging and humanizing user experiences while also helping users interpret the page they were navigating.
Let’s look at a particular example. In a few of our products, users need to authenticate themselves by logging in or registering if they don’t have an account yet. This is a great way to create an impact and engage with the user. But we wanted data to back this up.
With the great help of our Research Team, we launched some preference tests to understand which login version the users gravitated to: the one with a human figure (A), the one with objects (B), and finally, the one with no illustrations at all ©.
When asked about “Which Login screen worked better for you?”, 93% of the tested users preferred the ones with illustrations (A and B). Great! We also gathered some qualitative feedback. Let’s check what the users said about version A (60 percent of tested users preferred this version):
User 16 — “I felt as though the image portrayed [human figure] was more appealing.”
User 24 — “ I chose [version A] because I was more drawn to it. Maybe it’s because of the figure of a human being […]. [Other options] seem very impersonal.”
We also wanted to understand why we needed to have illustrations in our products, so we picked up one common use: the empty state, a moment in the user’s experience with nothing to display in the user interface (UI).
We applied the same logic and asked our users for their impressions on three versions of the same screen: one empty option, one with an object-based illustration, and a third version of the same screen but with a human figure. This way, we could better understand what our users valued once they were already using the product after logging in.
In this particular scenario, we reached an interesting conclusion. Although users appreciated the illustrations, they thought that the object-based picture (B) was clearer when compared to the human version (A). It helped them understand the page more quickly and directly, immediately realizing what the main task was.
Such a conclusion only reinforced our drive. It turns out, illustrations play an essential role in the products. After discovering this, we started applying this breakthrough to a large part of our products. Now, you’ll find illustrations in a big slice of the OutSystems ecosystem.
But this is an ever-evolving process, and our goal is to continue crafting delightful products for our users, allowing them to have the most frictionless and pleasant experiences! And, hopefully, a clearer picture of our product.
We did this work in collaboration with different designers. Big kudos to Bruno Figueiredo, Margarida Ramos, and Rita Matos!
Originally published at https://www.outsystems.com.
