EditorX by Wix
A fully responsive drag and drop website builder, aimed at design professionals
To comply with my confidentiality agreement, I have omitted some information in this case study.
www.editorx.com
Background
Wix: a DIY, drag and drop website builder.
The Editor: the regular Editor - Wix’s core product. No support for responsive design (except few specific components).
EditorX: a completely new, fully responsive drag and drop website builder, aimed at design professionals.
EditorX gives its users full control over every aspect of their sites, allowing them to build fluid sites with flexible grids (using CSS grid and Flexbox) and design tailored for each viewport with custom breakpoints. The users also have access to all Wix’s business solutions and Corvid (Wix’s way of writing code inside the Editor to add more functionality and enhance the site).
My Role on the Team
The team working on this project comprised of around a 100 developers, PMs, UX designers, visual designers and UX writers and the project involved working closely with many other teams in Wix across the globe.
For Wix - this is a way to reach a new target audience, one that has needs and expectations that are very different from the DIY users. For us, it meant understanding new tech, learning about a new type of user and incrporating all the regular Editor's strengths into the new EditorX - all on a very tight timeline. This was both an incredible engineering effort and serious challenge for the rest of the team. Our main goal was to allow our users to create a fully responsive site with no understanding of the tech behind it - and without loosing any of the design freedom of a drag and drop Editor.
Joining the team shortly after the initial POC stage, I worked on defining how different components will behave in the new EditorX. In the process, I took on some PM responsibilities and was in charge of several Wix Applications integration. I was also responsible for guiding other teams in Wix and helped create AcademyX - a library of interactive lessons teaching the concepts of the new Editor.
Our Users
Design Proffesionals
Familiar with design tools, can invest in learning a new tool, require a high level of control to achieve a specific design. Usually no coding knowledge.
Agencies
Require collaboration tools, sometimes will work with professional developers. High volume - a lot of projects at the same time.
Designer's Clients
Will need to be able to run their business with the site that was designed for them; some will pay for maintenance and some will do their own editing.
Components
My first task was to research how will the components we had in the Editor will work in the responsive EditorX.
This involved mapping out and analyzing the current components, their characteristics and how they were developed. For example:
- Can they work with a fluid width
- Do they have media or text that require “special” treatment
- Can they be connected to data (pulling the content from a database - which could lead to unexpected results)
- What style characteristics they have
- Do they have special mobile settings
After mapping the components and analyzing our competitors I wanted to check how designers work with responsive design in general and what are the current trends and expected (default) behaviors.
For example: How do images behave? What happens to menus or galleries? Are buttons fixed or fluid? Does the text on buttons scale when the browser is resized? What about titles and paragraphs? What happens when breakpoints change? How do different units, such as em or vw, come to play?
The research helped us make the decisions on component characteristics and default values for each. Every component can be set up as fluid or fixed width. Each one comes with different default settings. The user can use different units, like vw or % and set min/max width and height. For some components, some of those settings are disabled.
Special attention was given to how we translate mobile definitions (in the Editor, the user can only set certain things in a separate “mobile mode”).
Some components, like the lightbox, required creating new user flows and redesigning their settings panels, since the workspace and some of the technical infrastructure was changed; some, like the HTML iframe, got minor product and UX improvements that we could do easily taking into account development times, deadlines and data we got from our BI team re the component usage in the regular Editor.
Applications Integration
Working with our PMs on the integration of one of the Wix Applications, I later took on some of their tasks and was in charge of the entire integration process of several business applications: Events, Blog, Forum and Groups.
This involved analyzing and documenting the full flow for each application - installation and deletion, management, adding and removing pages and widgets, the definitions for each component and adjustments to behavior and panels. I was responsible for communicating with the teams working on each application, following the development process and guiding PMs and UX designers about the new EditorX.
Usability & Talking to Our Users
From the POC stage and through out the entire process, our team has been in touch with a selected group of “alpha” users - mostly agencies and design proffesionals. This allowed us to gather feedback early, learn, prioritize and iterate every step of the way. Our team did user interviews and usability testing on few specific milestones, both through video and in person, and we could really tailor the product to our users' needs.
Other than that, before releasing the real Beta, we had a chance to see first hand how our product is being used day in and day out by our own studio designers - the ones designing and building Wix’s templates. This has been invalubale, since it wasn't confined to short sessions and the users were doing their real work instead of a specific excercise. We could see how different features are being used - sometimes, not in the way we inteded; and which parts aren't clear enough, so we could improve those even before the launch.