Winnie is a marketplace for child care and backed by a trusted community of parents and providers.project
Winnie's search filter experience needed to be enhanced in order to increase place detail views. Analytics showed that users who applied filters to their searches created more searches on average and had a significantly higher CTR from search results to place detail.
The majority of users didn't utilize filters because the affordance was hidden behind an icon in the search tab's navbar. This meant that most users were not seeing relevant search results so they chose not to click-through to place detail. Monetization was an important consideration because large child care centers pay for referrals (lead generation).
My hypothesis was that if the utilization and variety of search filters was increased then it would result in more searches and place detail views. As a result, users would see more relevant search results and child care centers would receive more qualified leads.results
The data showed that users were twice as likely to do a filtered child care search and twice as likely to click through from search.
When the hours filter was included in a search, the CTR to place detail was 88%. However when the hours filter was not included in a search, the CTR dropped to 42%.
I started off by exploring different ways to expose search filter categories in the UI using a chip pattern. Along the way I thought of creating two new filter categories – price and hours because the data was already available on the backend.
Price data was only available in specific markets so a majority of users would see an empty state if they tried to apply it to their search. However data for an hours filter was available across many different markets because it's more standardized than price and easier to collect.
Within each filter category, the options would be multi-select checkboxes but the hours filter would be single-select radio buttons. The reset button would only appear if at least one filter was applied and would remove all applied filters.
Once I knew which filter chips would be surfaced to users, I explored how the options for each type of filter would be displayed. Initially I thought of using a classic modal without dividers but ultimately the tap targets were too small. Dividers were needed to clearly delineate sections for usability.
Another idea was to display filter options as circles within a bottom sheet. Circles weren't feasible long term because they limited how much text could be displayed inside. The bottom sheet pattern was much better than a modal because of better accessiblity since its anchored to the bottom of the screen and easier to tap.
Ultimately I went with a bottom sheet that displayed filter options inside of a table view with dividers because of accessibility and familiarity.
At this point, I needed to iron out how a user could filter by custom hours. Users could filter by a specific start time, end time or both using a slider. The start time limit would be 6AM and the end time limit would be 9PM. Each knob would increase or decrease time in one hour increments.
The overnight, weekend and after care options were shortcuts for start and end times that a user couldn't apply using the custom hours filter. Since radio buttons can't be deselected, the 'Any Hours' option would return users to the default state which includes all possible hours.
Haptic feedback was added to each filter chip to create a sense of delight and encourage users to apply more filters so they see the most relevant search results. With more time I would've pushed to add a swipe to dismiss feature for the bottom sheets.