3 days
1 person
existing product
data intelligence company
figma
ux design
wireframes
complex filter functionality
the challenge
In this assignment, the challenge was to enhance the user experience of the BRANDSNAME Scout Library, a repository of over 1000 curated trends that aid users in identifying new trends relevant to their fields of interest. The primary objective was to address the issue where users struggled to understand how to filter content by different categories and sectors due to the current presentation of the filters. The task involved presenting an innovative idea to solve this problem, ensuring that the filtering system is intuitive and enhances user engagement with the vast array of trends available in the library.
filter architecture
The research phase included a comprehensive approach to understanding user needs and market trends. Key activities encompassed:
UX Audit: Heuristics Evaluation
UX Audit: Accessibility Evaluation
UX Audit: Benchmarking
general insights
Without any knowledge of the real life use case (amount of filters that are mostly on and elements selected), I can suggest following ideas. Note that those are only low-fidelity wireframes which show the concept, not the final user interface. Also it is not consistent and does not have to be with the current user interface.
The very likely reason why users do not know how to use existing filters is the fact that the is no info about its structure and functionality. As far as I noticed, filters do not work for the same level of information. They are nested one inside of another. First level filter define the group in which the second level filter applies to. The 3rd level filters apply to the results of the 2nd level filter and so on. It is quite unusual so there is a need of explanation at the empty state (especially for new users) and in a tool tip (just in case someone forgot how it works). I have noticed also that there is a repetition of a filter structure in Fields and drop-down next to. Selecting filter structure in Fields did not change the view also. That is why I remove the repetitions.
research outcomes
Through an in-depth analysis of various landing pages, industry competitors, and educational leaders globally, I identified key components necessary for a successful landing page. These include a streamlined header design, an enticing hero section, compelling benefits-driven content, supportive imagery, a single repeated call-to-action (CTA), an intuitive form, supportive social proof, a doubt-busting FAQ, and a minimalist footer. An audit of the current event landing page for BRANDNAME revealed significant inconsistencies and a lack of visual hierarchy. Essential elements like social proof, benefits-driven content, expert sections, FAQs, and user reviews were missing. The existing visual design appeared outdated and random, failing to effectively sell the events and webinars offered by BRANDNAME.
main page
Depending on the real life use case, I presented also 3 types of selected filters preview. It is also good to show what was selected when there is a vertical filter at the side sheet with a scroll to summarize users actions and give the freedom to remove them from 2 places.
There are 2 possibilities to show the filters results immediately at the page - horizontal and vertical filters. Both are good and common but when there is a lot of selected elements, horizontal one moves the filter results down and they may to not that approachable for the user at a glance. That is also why suggested vertical filter.
There are 3 types of inputs for 3 types of data. One with checkboxes ale scroll for long lists, 2nd with selectable chips for max 5rows of values and the last one with a slider showing the trend - you can interact with by using slider directly or entering the value manually as the only slider option may not be 100% user-friendly in some cases.
There are 2 versions for the Add Filter placement that would be tested with users - one which is at the sticky bar, always visible and the second one that is always behind the last filter added (it is not visible when scroll is up, but always visible when user goes with the flow so ones can learns the placement.
In addition, nice to have would be a floating button with interactive filters tutorial which explains how it work step by step and involve users to learn by practice new features (lightbulb icon).
© orety.design 2023