Suggested for you
My role: Project planning, Hands on illustrations
Overview:
"Suggested for you״ is a product located on the main dashboard of Wix.com, and it aims to introduce our users to tools, applications, and various other products that Wix has to offer, to help the users improve their sites and grow their businesses. The product was not receiving enough attention from our users, and so we've done an A/B test, through which we could find a solution for this issue.
The challenge:
To examine and suggest a different visual solution from the Initial design that included overly detailed & small images alongside each suggestion, which made it hard to understand each offer on such a small scale.
The solution:
Creating a series of illustrations that can work for many different proposals, under a challenging and short deadline, for an A/B test ,to examine whether providing illustrations instead of images next to the suggestions would lead to better user engagement.
Suggested for you״ is a product located in the Wix dashboard and introduces our users to various tools for better business solutions. Unfortunately, the product was not receiving the expected user engagement.
The product was designed in a way that a detailed image was placed next to each suggestion to help the user identify and understand the suggestion. For example, if the suggestion was for the user to connect their email account, then the image displayed an actual email inbox
Although the images were beautiful and well thought out, they were hard to understand on such a small scale.
that is when my team, the UX illustrators joined the project, to create an alternative visual solution and examine whether providing illustrations instead of images next to the suggestions would lead to better user engagement.
Existing guidelines:
Before planning the illustrations for the ״Suggested for you״ project, we first thought about what standardization processes we already had in place that could benefit us here:
The illustrative language style:
Inside Wix products, we illustrate in one visual language that consists of a fixed color palette. This allows us to produce a uniform experience between several different platforms, including the dashboard and the suggestions feature.
UX illustration’s artboard sizes:
Our illustrations have a fixed set of sizes, defined by the illustration’s messaging and type. Therefore, we know where the illustration is supposed to be placed and what its size limits are.
After having the basics, we could continue to define the work process.
Mapping and defining categories:
The next step was to gather all of the suggestions and understand which product each suggestion related to. In order to optimize the work on the project, we decided to map all of the suggestions and divide them into general categories. Then, to create one illustration for each category that represent a group of similar sets of contents.
For example, An envelope illustration — for both email connection and integration,
A credit card illustration — for all content related to connecting online payments.
Illustration size and details:
In addition to this, we had to consider how small the space was for these illustrations. We’ve reduced the number of details in the illustrations and represented each suggestion group with one key element to not overload the user with visual information.
Color palette:
While looking at where the illustrations would be placed in the product, we saw that there would always be 4–5 illustrations placed below one another in a scroll. Because of this, we had to consider a few things. We didn’t want the illustrations to take all of the user’s attention away from the text, but rather, to sit in a balanced way alongside it.
In the end, we decided to go for a relatively limited color palette, with a clear hierarchy of colors, taken from the full color palette of the UX illustrations language.
Conventional visuals:
We took familiar elements from the real world to represent content in an easy and understandable way.
For example, content related to security — would be conveyed with a lock,
while content related to settings — would be conveyed with a cog.
Conducting an A/B test:
After we finished working on the series of illustrations, we released a test to see which of the following two versions would get more clicks from our users:
Version A — 50% of users saw images alongside content.
Version B — 50% of users saw illustrations alongside content.
The test ran for two weeks and half a million users were exposed to it.
With illustrations, the number of clicks on suggestions increased by 20% which is a high percentage to reach in an A/B test! We knew from there, that illustrations worked better than the images in this scenario, and when the test ended, the feature continued running with illustrations alongside the suggestions (version B).
When the test ended, the feature continued running with illustrations alongside the suggestions (version B) and we've created 100 more illustrations for various product categories.
Thanks!