Re-imagining the filter feature to enable site builders to create data heavy sites.
team
UX Team lead, PM, UX Writer, CS Rep, BI.
Role
Product designer
web app
new feature
no code
cms
From 0 to 40% usage increase
CONTEXT
Let site builders provide visitors a way to filter the page content
Even though Wix already had a no-code filter feature site builders were either complaining it's missing, or hacking one from scratch.
problems
(01)
Not enough UOU filters
UoU = User of user. Not the our user (who builds the site), but their user (site visitor).
UOU Filter set up is complicated
(02)
(03)
50% are unaware of UoU filters
Based on researching support tickets.
Motivation
🙏
Top use request
⛓️💥
Unblock data heavy sites
💸
Increase income
I just can't show so much content on the page without a filter
user interview quote 😥
Mapping Issues
I started by mapping out the user flow for issues:
-
A few flows for a single feature
-
No indication they are related
-
Need to be done in a specific order
-
Different from the users mental model
old flow - (01)
Add a dropdown
✓ Start from the UI
✓ High exposure in the "Add panel"
Old flow - (02)
Add filter in the dataset
✗ Set the function of an element in another element
✗ The dataset is a conceptual element
✗ No instructions to do so
old flow - (03)
Choose UI element
✗ Unclear relationship between settings and UI
✗ Set first - choose UI later
old flow - (04)
Add reset button
✗ Add one element to complete the functionality of another
✗ This is set in the button settings and not the dataset
✗ No instruction to do so
Design
.webp)
final design - (01)
Select function
✓ Start from the UI
✓ Support users mental model (Match system and the real world)
✓ Discoverable and prominent
✓ Clear relationship between UI and function
final design - (02)
Define fitler
✓ Clear system status
✓ Simple, conversational, flow
✓ Less cognitive load
After a few iterations I built a prototype and tested with users. The users were given a task that required to set up a filter, but with no instructions. I used the results of the user testing to design the flow and content of the final design.
final design - (03)
It works! 🎉
✓ Automatic options fetching
✓ Automatically remove duplicate options
✓ We add the "All" (reset) option for you
✓ One UI element - one function - one flow
results
40% Increase in using filters
(01)
Steady product KPIs
(02)
insights
Design for the user's mental model
(01)
Koalas have fingerprints almost identical to humans
(02)
