Wix Component Redesign – Exercise

A redesign of a Wix’s ‘Page background' component.

The idea to redesign an existing component came to me when I was reading Darren Head's Medium article. Darren had identified a certain interaction in Google drive that he felt was not designed as well as it could be. Instead of just ranting about it, Darren decided to take action and redesign that interaction and wrote an extensive article about the whole UX process. At the time I was dabbling with web builders for a project I was working on and a certain component in Wix’s website caught my attention. I felt it would be a great challenge to redesign it and see if I can solve the problems I felt it had.
The Component
Wix’s ‘Page background’ component is placed in the top of the left panel of Wix’s platform. It enables users to place an image, movie, or a flat color as their website’s background. They can also mix images with colors creating nice effects and decide to which pages in their website they want to apply it to. The Top section Presents the image/Video/ Color that is selected with a big settings button in the middle. underneath that there are 3 buttons - color/ image / Video. pressing on the color button brings up the color scheme and pressing on Videos or images will pop up an upload library. The Bottom section displays a selection of selected backgrounds, some of them are images and some of them are movies (the movies have a small video camera on the left bottom side). On the bottom there is an ‘Apply to Other Pages’ button that opens a panel with the websites pages and the option to check them if you want your chosen background to effect them.
The Problems

I Identified a couple of problems I felt made this component more complex then it should be.

  • The buttons on the top section (Color, Image, Video) looked the same but did different things (color button brought up the color scheme and Videos or images brought up an upload library).
  • After a little digging and snooping around I realized that the settings were different if I chose an image or a video, since all the backgrounds are mixed together (videos and images) the user is not sure why the settings are different.
  • Inside the Settings panel there is a way to reduce the opacity of an image or movie, but if you chose an a solid image changing the color would not change anything, that is until you lower the image opacity.It was even more problematic since the user could also change the background color using a little fold on top of the preview image, there he was completely not exposed to any opacity option.

 

The Process
My main thought was that the component was not organized, I wanted to give the user 3 options for backgrounds: image, video and Color, and have them all at the same hierarchy. That way each background type will have it’s own section and its own settings. I still wasn’t sure if I wanted the preview image big or small, and what would be the best way for a user to scroll through the selected backgrounds. I Started putting down some thoughts on paper.
I decided to get rid of the big preview image and enlarge all the rest of the selected backgrounds, so the user can see his chosen background clearly without the need for the big image. I also decided to make all the menus a part of the component as appose to having every menu being a floating object when you open it. I placed the settings button and the upload button on the left side of the panel and a the apply to all pages on the left side of the panel.
I felt like the component was a lot clearer now, it was divided to three equal sections, each section had it’s own setting button (so the user would be confused as to why the settings options have changed), and it’s own upload button.
Now, to solve the opacity/ Color problem. Remember, the one that had the user not knowing why nothing is happening while he was changing the background color until he found that he had to lower the opacity (which was on a different slider). I decided to link the two together, meaning that as soon as the user would change a color the opacity slider will drop to 50% showing the user his color in the background and also suggesting the connection between the opacity and the color.
For the design look I went for a dark theme, thinking although Wix users are not professionals (hence simplifying the interface) it would be nice for them to feel a bit more like a pro working in Photoshop or illustrator (when is Sketch getting a dark theme?). Here is a short video I made of the complete user interface.