Wix Platform
Application
Wix Application Platform Builder
Project Goal
Editing Web Applications that was Created by the Wix Platform
Wix developed a tool for building web applications across Wix's 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.
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.
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.
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?
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.
Example screens from the new editing experience
Features
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.
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.
Usability
Testing the Things We Missed
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.
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.
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.
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.