︎




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




Prototype


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.

Why?
  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.


Flowchart

#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: