Goals/Vision
The goal was to reassess the current Wix background editor and determine areas of improvement that could improve the user's needs. When the user first opens this panel they should understand how it functions, its purpose, and what are the end results from taking actions.
Deliverables
Create a flow presenting the editing of the website background from the panel. Rearrange the panel to better display all the options and possibilities we offer for site backgrounds.
Success Criteria
We will measure success through A/B testing to determine if there is no negative impact to background editing and monitor usage of new features. We will also conduct usability test to gauge user feedback on the redesign.
My Process
Research
I determined that the hierarchy and transparency of background options isn't optimized for user needs.
1. Only a small population of users utilize suggested backgrounds
2. The settings for each type of background vary greatly and are not uniform/cohesive which makes for a larger learning curve
3. How to remove a background is unclear
Things that are working well:
Preview thumbnail
Media uploader
Constraints given the time limit
Upload image/video Panel is fixed
Image editor is fixed
Existing Features/Functionality must be included
Competitors
User journey
1. Alex opens the background panel to update her site.
2. She changes the background color to match her new brand colors.
3. She tries adding a video as the background, but after playing with the settings decides its too busy.
4. She adds an image that shows her new product.
5. She notices her product isn't fully in view and adjusts the focus area of the image.
6. She increases the opacity of the color overlay to reveal the background color and fade the image.
7. Once she is happy with the background she applies it to all pages related to the new launch
Assumptions made:
User/Alex already has an account/website on Wix
Alex knows how to find the background panel in the editor
Images/videos may be filtered by categories/site type
Current Flow
Every option has its own path and is on its own page within the panel. Highlighting in yellow the areas that will be updated.
Proposed flow
Moving color earlier in the flow to shorten the steps and moving suggested/preset backgrounds to later in the flow. Also adding pattern and gradient to color options.
Ideas Explored
Scrapped Ideas
1. Highlight the background instead of preview or remove preview
2. Suggestions smaller on the panel
3. Tree structured layout to expand options
4. Search bar & expand/collapse suggestions
Ideas to take forward
1. Color always selected and image/video optional
2. Remove suggested backgrounds
3. Improved image positioning
4. Add Gradient option
Wireframes
Final Design
