Wix Web Editor

UX Redesign

Wix.com is a website builder giving its users precise control.

 

The most important difference between Wix and other website builders is that Wix features an unconstructed editor. Wix not only lets its users design their sites with no constraints but also integrates with powerful e-commerce and SEO tools. 

The downside of Wix's unconstructed editor is that both editing the site could feel chaotic and overwhelming, the site could look unprofessional for less experienced website creators, and not ideal for building cross-platform responsive sites. 

Design Goal

The design goal of this project is to improve the user experience by redesigning tools that simplify the design process on complicated website pages without significantly changing the original Wix product.  

Product Analysis

Wix finds a fine balance between beginner-friendly website builders, such as Squarespace and Cargocollective, and professional design software such as Sketch and Indesign.

 

Same as other website builders, Wix also offers different kinds of templates to start with. While other website builders guide users to work within the structures of the templates, Wix lets users dray and drop elements anywhere they want on a page with no constraints. 

Compared to professional design software, Wix encourages users to work with pre-constructed elements such as image galley instead of starting from scratch. Wix also does not offer complicated editing features such as special effects. 

Squarespace

Success:

Squarespace lets users construct their websites using content blocks. Following the constraints of content blocks, users are able to create sites that are visually balanced. Content blocks also allow all Squarespace sites to be responsive on all platforms. 

 

Opportunity:

While content blocks help users to build well-constructed sites, users may encounter constraints to achieve desired layouts and design.

Cargocollective

Success:

Cargo collective is well known for its developer-friendly setup. Users can create interesting interactions with custom code.

 

Opportunity:

Cargocollective offers less design options compared to other website builders. 

Wix unconstructed editor resembles a lot of professional design software such as Sketch and Indesign. Users can freely drag and drop assets onto their canvas. To make it easier for users to navigate, more complicated software makes great use of widely accepted icons and explainer texts. For users to handle complicated files, they often time provides file/asset organizing tools

Redesign

1

Pain Point:

  • No explainer texts

  • Unfamiliar icons

It could take a long time for users to find the desired action buttons.

2

Pain Point:

  • multi-layered menu

  • overwhelming options

Users could feel overwhelmed to navigated through all menus and options

3

Pain Point:

  • Unfamiliar icons

  • Hidden functions

Users could struggle to find features hidden under unfamiliar icons

To tackle the pain points in user flow #1, the redesigned editing window adds explainer texts and substitutes Wix custom icons with icons that are easier to recognize. The redesign also displays information that was only shown in hover mode in the original design. 

Before

  • Bigger action buttons

  • Display icons and explainer texts next to each other

  • Substitute Wix custom icons with widely-used icons

After

  • Bigger action buttons

  • Display icons and explainer texts next to each other

  • Substitute Wix custom icons with widely-used icons

The redesigned menu with explainer texts and bigger action buttons makes it easier for users to find key features faster, highlights integrations such as email marketing, which could generate revenues for Wix, and is more friendly to first-time users. 

Before

  • Toolbar only displays feature icons

  • Toolbar does not display shortcuts

  • Features are not properly grouped

After

  • Toolbar displays both explainer texts and shortcuts

  • Different button designs to differentiate feature groups

The redesigned toolbar uses explainer texts instead of icons to display important editing functions. Users can find the proper tools and corresponding shortcuts easier and faster; different tool categories are highlighted with different button designs; the "layer" tool is moved from the bottom of the toolbar to the "asset position" tool group. The redesigns aim to make it easier for users to find essential tools therefore make their design experience smoother.

1

Pain Point:

  • Hard to select overlapping text boxes

  • Box size requires manual adjustment

Users could be frustrated when they are not able to select the correct text boxes

2

Pain Point:

  • Tools at the bottom are hidden

  • Unfamiliar tool icons

Users could have a difficult time finding the "Reset to Theme" tool at the bottom. Sometimes the text settings do not respond to the changes made in canvas. 

3

Pain Point:

  • Hard to organize all saved themes

  • Theme list blocks the text editor

  • Each text box requires individual editing, could be repetitive

Users do not have much freedom in managing the saved themes and create new themes, they can easily lose track of old themes once the site gets complicated.

To tackle the pain points in user flow #2, the redesigned "Text Editor" focuses on enhancing the features of "saved themes". The current "saved themes" tool has limited functions, however, it is an important tool to help users apply consistent designs across the website. 

Before

  • Unfamiliar Icons

  • Frequently used tools hidden in drop down menu

  • Tool at the bottom is not displayed

After

  • Regroup tools and expand frequently used tool list​

  • Display all tools in the editor without scrolling

The redesign of the "Text Settings" menu expands the frequently used "alignment" tool and regroups less used tools under "Character & Paragraph". The redesign references popular text editing tools such as Google Docs, users could get familiar with the Wix editor faster. 

Before

  • ​"Theme Text" list blocks the "Text Setting" menu

  • Different themes could look similar

  • Lacks detailed information about each theme

  • Users not able to manage saved and new themes

  • A limited number of 6 heading and 6 paragraph themes

After

  • Allow users to add, delete and reorder new themes

  • Add custom name/tag to each theme

  • Displays theme previews in the list

The "Text Theme" redesign adds features that allow users to organize all text themes.

In the current version, users could only save a limited number of themes, which could be frustrating when building complicated websites. They could easily lose track of different iterations of themes; oftentimes users find themselves manually adjust a large number of texts, the process is tedious and often result in inconsistent designs across a site. 

In the redesigned version, users can add, delete, and reorder themes. Instead of displaying detailed information about each theme, users could add a custom name/tag to each theme to help themselves identify each theme later; a live preview is also displayed instead of a generic one. In general, the redesign aims to offer more freedom and organizing powers to users. Users could easily apply desired themes to multiple texts across their sites to better maintain consistency in design. 

Delete Saved Theme - Interactive Prototype

Add & Reorder Theme - Interactive Prototype

1

Pain Point:

  • Cannot select overlapped items

Users could only select the biggest asset or the asset on the top layer

2

Pain Point:

  • Cannot select overlapped items

  • Hard to tell if there are overlapping items

Users have to right-click on the asset to access more tools. If the top layer asset is the bigger or exact same size as the assets at the bottom, it could be extremely hard to notice overlapping items. 

3

Pain Point:

  • Multiple steps to select and rearrange overlapping items

  • Separate from the layer tool

Users need to select and rearrange assets with different tools in a hidden menu that is only accessible by right-clicking on the asset. 

 

Since Wix allows users to freely drag and drop assets on the canvas, especially layering items to create complicated effects, users can have difficulty tracking overlapped items. The redesigned "Overlapping Items" tool highlights any overlapped items in the main menu and integrates with the layer tool in the toolbar to simplify the process of working with multi-layer designs. 

Before

  • "Overlapping Items" and "Arrange" tools are only accessible by right-clicking on assets

  • "Overlapping Items" and "Arrange" are separate tools

  • "Overlapping Items" has a single function of selecting overlapped items

After

  • Reminds users about any overlapped items when they click on assets

  • Allow users to hide, lock and arrange assets directly instead of switching to "Layer panel"

  • Color-coded icons and detailed information on each asset for easier identification

The "Overlapping Items" redesign integrates with the "Layer" panel to allow users to deal with any overlapped item situation in one place. 

In the current version, sometimes users struggle with selecting the wrong items or losing overlapped items. If users are not aware of the overlapped items, this issue could be very frustrating. The current tools to deal with this situation are hard to find and require multiple steps to finish a single task. 

The redesign version references the layer tools in Sketch, Indesign, and Photoshop, which all allow users to conveniently lock, hide and arrange assets in one place. The reason why they were the main references was that Wix allows users to drag and drop assets freely; many users choose to work with layered items to achieve complicated designs. An integrated layer tool would make it easier for advanced users to work with complex layouts.  Another significant change is to remind users of any hidden items once an item is clicked to avoid any frustrations of searching for hidden or lost items. 

Overlapping Items - Interactive Prototype

1

Pain Point:

  • A limited number of sorting options

  • Delayed response

Compared to its unconstructed editor, Wix’s file organizer has more constraints, offering limited organizing options. The response time is also significantly longer when a user uploads more files. ​

2

Success:

  • Easily Store important files

​Users would need to spend a long time to find the correct item from a long list, among items with similar or same names.

3

Success:

Users can drag and drop files into folders directly or use the “Add Media” tool in folders. The “Add Media” tool offers various options for moving files in Wix and uploading files from different outside sources, Google Drive, etc.   

Overall, Wix's file organizer is well designed, despite its delayed response and limited sorting options. 

Considering many users are constantly updating their websites, an issue they often run into is losing track of the lastest files currently being used on each page. 

The redesigned "File Organizer" adds a new feature: sort by page. It will allow users to easily track down the latest files on each page, reducing the risk of mistakenly uploading an outdated image, which could be particularly important for e-commerce website builders. 

Before

  • Only offers Sort by "Last Modified" and "Name"

After

  • New option to sort by files currently being used on each page

  • Modified existing sorting options

File Organizer - Interactive Prototype

Thank you for viewing!

This project is a self-directed side project. It is not in affiliation with Wix.com.