UX illustration system
My role: Leading, Project planning, Hands on illustrations
Overview:
​
UX Illustration for Wix.com, a company that is constantly growing & evolving, and new products are always being created.
The need for illustrations inside products is urgent and increasing, and with my team, I understood the importance of creating a structured method and guidelines to work by, so that we could keep up with the high demand.
The challenges:
​
-
Missing guidelines of how, when & where to use illustrations inside products.
-
No “one source of truth” for stakeholders who worked with the team.
-
Similar elements being created multiple times across the system.
-
Lack of fixed sizes assets inside the design system.
The solution:
As a horizontal team, UX illustrators work with over ~170 designers from all groups across Wix. This meant we had to shift our approach from a single, custom solution to a unified, cross-platform solution, in order to increase velocity, time management and asset quality.
​
To do it, we created a design system that would serve all of the UX designers, while serving as a point of reference to ensure there was less duplication and more shared knowledge.
The project included the following considerations:
Messaging types:
The UX illustrations created by the team are based on intents & messaging.
We defined five messaging types, each with its own set of sizes, colors & complexities:
Empty state - encouragement
The illustration refers to an item that we wanted to encourage users to add, which currently does not exist.
Empty state - missing
Presents a situation where there is nothing to display. The illustration and content refers to a missing scenario.
Error message - reversible
Appears to warn the user about a meaningful action they are about to take (which is reversible) and to catch attention. The illustration expresses warning elements such as an exclamation mark, etc.
Error message - permanent
Appears when the user is about to take an action that is irreversible.
The illustration refers to the content and uses a red, alerting color palette.
Artboard sizes:
Every illustration asset has an artboard size.
We mapped the illustration sizes in all platforms, significantly decreasing the number from 30+ sizes to 5! Each new size is used for a specific message type and works well cross-platform and horizontally on all products:
M1 Size:
120x120 px.
Used inside the design system:
Cards, modals, small marketing layout.
Messaging type:
Empty state, first time, promotional, error, destructive alert.
Generic messages:
Some messages are the same across all of Wix, therefore they need the same illustration to fit a generic scenario, such as "No search results" or "Delete".
​
We created a sizable amount of generic illustrations for such scenarios and uploaded them to our UX illustration library, allowing all UX designers to have easy access.
An example of this is when we created a specific illustration for the "Publish" action, which was used across the entire system. This is adjustable by size and color combination, depending on which design system component it is placed on.
Mix & match elements:
We built an illustration catalog for our team's internal use. We added different elements taken from ready illustrations so that we could re-use them, mix and match existing elements to increase velocity, and create new illustration variations while staying aligned with the rest of the illustrative language.
Design system collaboration:
We regularly work alongside a design system team where we continually create and define guidelines, such as: where illustrations are used and in what form, where to not include illustrations, the assets' artboard sizes and how they're placed within various components, etc.
UX illustration library:
A Figma library that includes all of the UX illustrations. Any UX designer can search illustrations by name or context, and use it within products.
This easy-access tool helps create transparency with stakeholders and gives a wide idea of our illustrations style & language, the different sizes, and the series of the illustrations we commonly use.
UX illustration website:
This is our "one source of truth", where anyone can find all relevant information and links related to the UX illustration field, such as getting to know the team, our way of work, collaboration with us and extra content like the guidelines we follow in our UX Illustration language, color palettes, our values as a team, FAQ and more.
Thanks!