Editor Tooltips
My role: Project planning, Hands on illustrations
Overview:
​
Wix's Classic Editor is an online platform for website creation, which gives users a wide variety of tools and functional capabilities for desktop and mobile, to build any type of website.
The platform had had the same visual appearance for many years, and as the company's brand evolved, the main platform needed to too. We ran a UI update to refresh the look & feel, which included updating the illustrative language as well.
The challenge:
Outdated illustration style and concepts that no longer aligned with the company's growth and audience target.
The solution:
To define the work process and creation for a series of 35+ illustrative assets placed in the tooltips, to go along with complex messages. This was done to ease the experience of the user and create fast and easy-to-understand actions while being the sub-hero and not taking away the main attention of the user in a detailed UI environment.
Top bar tooltips provide helpful and supportive content that explains actions to improve the user's site. They are divided into 6 different subject categories and are exposed on a hover.
The illustrative language tone of voice:
Before the UI update - Wix as a company was significantly smaller, with a target audience that mainly addressed small business owners, and a 'tone of voice' that was different from the current one.
The initial visual representation was naive: playful illustrations, childish characters, narrative concepts of the daily environment, which suggests to the work environment of the small business owner who works from their home studio
While the updated illustrative language aimes to a more professional target audience, with web environment based elements, straight forward and direct concepts, that deliver quick understanding of the message.
Before the visual update
After the visual update
Color combination & hierarchy:
The illustrations are exposed to the user by passing through the different subjects in hover, therefor - the colors are playing a significant parameter and should be such that are not taking the user's full attention, but are still permanent enough to distinguish between each category.
We defined our color heirarchy to suite this need:
Moreover, the color hierarchy must be unified in all illustrations in the same way, as they are acting as one holistic series
Another consideration was the fact that we cannot control the user's design and complexity in their website design, therefor the color combination should be such that can blend well in the UI and not take the full attention.
Concept and ideation:
The conceptual contents are aimed to more technical aspects, which directly support the content and present it visually in such a way that it is easy and quick to understand. Most of the illustrative elements are based over a website, to have the direct connection between the action - and the environment in which it is carried out.​
Some examples of before & after:
Asset's detail amount:
Our work included many iterations and variations to understand what's the right amount of detail for this type of illustrations.
The process began with multiple sketches with much details, and then we slowly removed the unnecessary elements. Sometimes we even took down too many details - and through that we were able to understand whice were the critical details that must be left in order to convey our messages clearly.
This was our way of work in all the illustrations - in order to reach an accurate balance between color, details and message delivery.
Save site iterations
Thanks!