Wix ADI Color Panel Case Study - color all site elements at once.


This was a project I was part of during my time in Wix ADI team. The goal was to allow the user to color his site elements - all at once. Since ADI was meant for non professionals - the user could only choose & customize the entire palette for the site, not color single elements. 
This unique approach allows our users know very little about colors and still select a stunning palette.

  1. Feature request - Up until now the user could only choose a theme for the site, not a color pallette. 
  2. Competition - All competitors have this
  3. More variety - ADI sites seemed pretty similar until this feature was out

Around 6300 users see this panel daily.

#1 Spec - Coloration Algorithm
What was developed was an AI way to color the user site using 
  1. Main color - the user can choose the mail color from a list of colors that was set according to the user’s industry
  2. Light/Dark selection - which inverts the pallete. 
  3. Recommended palettes - from this main color, the system generates 3 types of pallets: palletes that use a tint of the main color, palletes that come from color sites.
  4. Customize pallete - advanced users can also customize each color of the pallete.

#2 User flows
We created a diagram to show the user flow and how it affects the panel. I love this part.


#3 Wireframes
I created numerous wireframes that show the hierarchy of this feature - 
Main color > Pallete > Advanced editing
You can see the wireframes are pretty “designed” - this is because in this stage we already had a design system up and running for Wix ADI.

Option: Showing the main color in each pallete

Option: Showing all main colors at once (noisy but shows variety)

Option: Showing what will happen to the site with each pallete

Winning option: Showing 1 main color & Advenced palette editing as 2nd drill

#4 Assets
After choosing a direction I created assets for this panel - using as much reusable elements I could and still creating new UI that fits the product.

Main panel

Color popup

Advanced palette editing

#5 Results & BI
Coming soon :)

Final result 

More projects: