Editor Global
Search
The Search Is Over
The Problem
Where? How? What?
Again and again users are contacting Wix support asking for things they can not find in the editor. Some of those users are actually asking for a tool to help them locate specific elements. Also, analysing others queries shows that there is a need for better exposure for functionalities in the editor.
Julia
Hi, I see there are a lot of elements that we can add on our page. It's great. However, can we search for an element? For example, I'm looking to add a "contact" element. It can be found under the category of contact and strip. Can I just search for "contact" and all the related elements will show up?
Thanks
Reinke, Brooke
Hello, I am not sure how to get the toolbar to show on my website when I am editing. The only thing that shows is the design tab and the contents in that. Isn't there a tool bar that is supposed to be activated for me to make my own edits and changes?
Jame
Hello, Is there a way to search/find an element id value in the editor? I have a button tied to code and need to rename the element-id, but it states that the id is duplicated when I try to rename it. I can't visually find the element by its id value visually on the page. My page has a lot of elements and to manually scroll through each one is very time consuming. If there was a "Find Element ID" function, it would save me so much time and take me directly to which element might have the wrong name ( could be a box, text block etc.). My code is tied to the element-id.
Thanks, Jame
Goal
Make it Easy for the Users
Three main pain point came up from users tickets. It was clear that those were the project goals:
- Increase discoverability of relevant and/or similar subjects.
- Easy navigation in the Add Panel and choosing the right elements.
- Exposure for functionalities in the editor.
My Role
On this project I worked closely with a product manager, a team of UX content writers, and a team of 3 developers.
- Competitors research / Market research
- Creating UX wireframes
- UI Design spec
- Defining interactions and behaviours spec
Research
What's Common in Market?
Research focused on search tools in graphic applications, website builders, operating systems and even Spotify. Looking at what is possible to search/find and what is the experience.
From this research I learned about different search intent. Searching for an action (which can become a "shortcut") is different from looking for a file or element that users want to find and use immediately.
Analysing dozens of website examples looking for common and unique UX/UI patterns. When users are in the middle of a process, looking for something they need "right now" , they need ultra fast results.
At the same time it always helps to pay attention to unusual solutions; they can give ideas for different concerns and use cases which are unique to the editor.
Flow Chart
One Search, Several Different Questions
We wanted the Editor Search to help wix user find result in 5 different places:
- Elements from the Add panel
- Apps from the App Market
- Perform Quick Actions while working with the editor.
- Find different Tools & Settings related to the editor
- Help Articles
- Business Manager (Phase 2)
- Search in user's content (Phase 2)
After analysing the user's request, and determining the product goals, I like to create a flowchart mapping of possible user's intents. It helps me to understand the complexity of the product, and create the right structure.
Low Fidelity Wireframes
Quick Access & Fast Exposure
In order to define the main scope and use cases that answer all product goals, I created a mockup flow presenting the general UX concept, including main functionality and real use cases as possible.
High Fidelity Wireframe
Searching is Not That Obvious...
Display full product flow, with all edge cases and complexity. The editor search is a new tool in the editor that requires some new UI elements, that is why I was insisting on creating it fully designed.
Design & Experience
Simple Experience, Detailed Design
Creating UI design that would help Editor's users search, side by side and without interrupting, during the workflow of building their website. In order the design would answer those challenges, I had to create new UI element to the Editor Library together with new patterns
Since the search tool is a unique feature in the editor, I had to find a new UI pattern, following the visual language and guideline of the Wix Editor. I had to prepare those new UI Elements for developments, including full icons index, assets for Dev and accompany development.
Another important delivery for dev is to create detailed and clear spec, explaining how users should interact with different features of the search, and cover all edge cases.
Behaviours & Interactions
Make it Feel Like a Shortcut
It's pretty obvious that any search tool should answer the goal of helping users find stuff. But what does it mean? After going after support tickets, we understood that wix's editor users are looking for answer for two main things:
- Discoverability - They wanna find and learn where things are located in the editor.
- Shortcut - Users are looking for the fastest way to add a button, open specific settings or understand what it means "Accessibility" that everyone is talking about.
Keeping this in mind I had to define the best experience and intuitive behaviours that would answer those 2 challenges.
Together with a talented UX prototyper, we raised a lot of different ideas, testing interactions in 5 different prototypes, trying to achieve the best discoverability and fastest engagement.
Collecting Data
Engagement is Increasing
The first interesting thing we saw when we started collecting data was that right from the beginning there was almost 50% of interaction with search results. This was a happy moment for us, cause it meant that we achieved at least with one of our main gaols which was "Increase discoverability of relevant and/or similar subjects".
What's Next
Learn, learn and learn!
Search tool is a strategic feature. As much as it helps users finding stuff and fastening the workflow in the editor, it is also a place we can help the user find things that are important for his website business.
The next phase would include searching relevant content and searching in Wix back office, where users deal with most of their business intents.