"Cooking"

New Editing Experience for Web Applications

AUGUST 2020

PROJECT GOAL

Editing Web Applications that was Created by the Wix Platform

Wix developed a tool for building web applications across Wixs' editors, based on Wix components and platform.

The goal was to create an editing experience that would allow Wix Editor's users to customize applications built on Wix platform.

Wix applications builder tool

Time Table, a widget of Wix Booking app in Wix editor

THE CHALLENGES

Let Users Customize The App How They Want

Creating an application is a complex task. Making it easy to customize and use, is super complex and very challenging.

In order to keep us on track through the process we defined 3 principle guidelines:

Content - Users must be able to use their own business content.
Style - Users should be able to personalize the application design, to match their website brand and desires.
Supporting updates - We should support the application update cycle without harming users' customization and changes.

THE USERS

DIY Users with Online Business Presence

Wix seeks to provide a cross over platform editing environment for users with different business goals, using different application services. Their needs range from solving online stores to ordering widgets, from writing a simple blog to running an entire community with friends' visitors.

We wanted our users to grow their business in one place, and for that requires a coherent workspace experience. That would fit 3 different types of users:

Newbie to website creation

New users, who are also creating their online business for the first time.

Users who migrate from competing platforms
They already have an online presence on the web, and this is their first attempt with Wix.

Existing Wix users

People who already have a website on Wix and they decided they need also a business presence, like selling online or offering any online services. Usually they would need at least one application installed on their website.

My Role

On this project I collaborated with another UX designer, we worked closely with product manager, a UX content writer, and a team of 5 developers.

On this project I was in charge of:

Interviewing application builders & consumers.
Conducting market & competitors research.
Creating information architecture.
Defining capabilities and experience.
Creating wireframe flow.
Designing relevant UI & behaviours.

INTERVIEWING

What does it Mean to Develop an App?

Part of our user research was learning what kind of customization application builders want to give to their consumers. In order to answer this question, we started with interviewing external "Alpha" customers and internal users like PM, UX, and support agents from Wix, employees working on developing different service products like booking, members, online store, etc.

Those interviews helped us learn how Wix users use different service applications and customize them.

Spreadsheet collecting different update use-cases examples

From those interviews we learned 2 important things:

Update cycles - The complexity of keeping full customization freedom for users while allowing the application builder to push changes and update installed applications that is already live on users' websites.

Style customization - Between 80-90% of the users need basic customization, choosing between common presets or layouts, and general style changes.

FLOW CHART & ANALYSIS

2 editing modes

"Closed mode" for simple users:

Interviews showed that most users need only basic editing, which was very good news for us. It allows us to provide a basic and limited "Closed" editing mode which would fit 80% of the users' needs.

"Open mode" for advanced users:

Yet... with time, those users start investing more time and effort on their website business and come to the point where they need a unique ability or special customization. We couldn't ignore their request cause they are usually the most loyal users Wix has.

In order to understand how I should even begin to plan 2 editing modes, I started drawing several flow charts of different business applications. The flowcharts covered 2 parts of the application funnel:

Developing an application.
Consuming an application and customizing it.

Flow chart of changes update for Blog application installed on Wix website.

DEFINING & BRAINSTORMING

Identify Main Shared and Common Use Cases

So now we came to the point when we started to imagine and draw the actual experience. But before beginning working on the wireframe, I've summarised on a white board (next to my table, helping me keep in mind) all general use cases and possible touchpoints that users might need or want to customize in a widget:

What would happen in "Close editing" mode and "Open editing" mode?
How each editing mode would be affected by the update cycle?

Brainstorming trying to understand possible changes

WIREFRAMES

What are the User's Editing Touch Points?

Now came the time for drawing all of our ideas and insights. Creating wireframes is an excellent way to cover all scenarios and use cases. It describes a user installing an app and customizing while editing a locked widget and when the widget is in the more advanced "Open" editing experience mode.

Main use cases of new "Closed" & "Open" editing experience

1/10

Example screens from the new editing experience

Now we have all ingredients, we can start cooking

Direct Selection & Editing

Users can select and edit directly each part of the the application widget.

This has two primary and significant advantages:

Application builder gets all Editor's capabilities for "Free".
Site owner is free to customize any widget to the desired design.

Support Widgets Presets

Users can start customizing their application by choosing a preset from a visual panel, making it very clear to understand the different options of layout, design, or even different features.

Preset panel display visual options

Comfortable CMS Content Manager

Users have direct access point to change content in the Content Manager, instantly from the selected widget inside the editor.

Adding & Deleting Application Elements

Users can create a customized widget by deleting and adding application elements according to their needs.

The Add Element panel also allow the application builder to update and add new features without any conflict with the user customization.

Editing Restrictions for Application

Some of the editing required exceptional behaviors. For example, we created different on-stage indications, alerts, and notifications to let user know, that certain actions are "Not allowed", the layout is locked, and the element has limited customization.

Application Update

For simple users, we designed the new "close" experience in a way that would keep user’s customization of design, content, and functionality on his website.

Full Open Editing Layout Mode

Advanced users can decide to open any widget of the application, and have full layout customisation: adding additional elements or changing local widget functionality.

Something is still missing...

USABILITY

Testing the Things We Missed

TESTING AND ITERATING

Get People's Feedback

When the new experience was ready and stable enough, we performed several testing sessions on a booking widget called "Time Table". It was one of the first applications built with Wix Blocks by Wix's booking service.

We conducted two usability sessions. The first one testing professional designers and targeting users who were more design orientated, who are used to professional editing experience. The second session was focusing on users that have a small business, and for whom Time Table application could be useful on their website.

Collecting feedback from Studio Usability

Findings: People got confused trying to change content

The main recurring problem was connected to content editing, we figured out there was a confusion, and it was for two reasons:

Local widget content vs. application content.
Editing content vs. customizing font style.

For local instance content, we were planing to use the default and general content editing behaviour. That means, "Edit Text" button is being used for editing content and to open Text Design panel for font styling.

One CTA has two roles

The Fix: Separate action items

To avoid confusion and make the experience more straightforward, we decided to add another button, an access point for the settings panel, that controls all local widget content and settings.

Each intent has it's own CTA

Results

Adding another button for editing content, made testers in future usability sessions feel much more confident and patient with the content.

ALMOST THE END...

What Have I Learned?

Creating a platform editing

I planed and designed a universal editing environment, making sure it fits simple and advanced widget customization needs.

Deep flow research

I had to research the application update cycle, to find the best way to keep interest of the application builder, and also the consumers who use his application.

Don't forget the content

We were so focused on creating a user friendly editing environment, and supporting customization capabilities, that ironically we forgot one of the most important things - how users edit content.