Wix Platform Application
Editor Global Search
THE SEARCH IS OVER
JANUARY 2021
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
TeamSHAEDEN
Hi there, can you send me a screen shot of where this app is in the add panel? I followed the instructions and even did a search on the site and nothing has come up yet.
Kind regards
GOAL
Make it Easy for the Users
Three main pain point came up from users tickets. It was clear that those were the project gaols:
-
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 product manager, a team of UX content writer, and a team of 3 developers.
-
Competitors research
-
Market research
-
Ideation
-
Creating UX wireframes
-
UI Design spec
-
Defining interactions and behaviours spec
RESEARCH
What's Common in Market?
How Competitors are Doing it?
This research was focus on search tools that meant to help users search in graphic applications, website builders, operating system and even spotify. I was looking what is possible to search/find and what are the UX solution for performing this search.
From this research I learned on differente search intent. Searching for an action, which might also the result can actually become a “shortcut”, is different from looking for a file or element that users want to learn where it is located, or even open it and start engaging with.
Collecting examples for searching tools that common in the market
Analysing dozens of website examples (gathered by the design studio) looking for common and unique UX/UI patterns. When users are in the middle of a process, looking for something they are need “right now”, it is very important the search tool would have familiar and easy UX.
At the same time it always help to pay attention also to unusual solution, they can give ideas for different concerns and use cases which are unique to the editor.
Summary and conclusions of market research
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.
Flow chart mapping displaying users flows while searching the editor
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 mock up flow, presents the general UX concept, including main functionality and real use cases as possible. Creating the mockup help align communication about the product, and helps to evaluate its scope.
Rough mockup (tractor) displaying the initial concept
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 creating it fully designed.
Screen example from the full designed flow
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
UI Spec for Developer
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.
UI Spec for Developer
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.
Example for search query of adding a "Button"
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".
82%
Searching for something
Users who succeeded opening the search and find any results
48%
Interaction with results
Users who tried the search and engaged with the relevant result
WHAT'S NEXT
Learn, learn and learn!
Search tool is a strategic feature. As much as it helps user finding stuff and fasten the workflow in the editor, it is also a place we can help the user find things that important for his website business.
The next phase would include searching relevant content and searching in Wix back office, where users deals with most of their business intents.