The ApartmentGuide Filter redesign was a project myself and a project manager worked on to improve the way search filters were surfaced to users looking for rentals on ApartmentGuide.com. From previous user research, we knew users found great value in search filters, yet the majority of users didn't set filters? Our solution was to make the filters easier to find and open by default, removing the need to click extra buttons to see more refinements. After agreeing upon a direction with my product manager, I created a paper prototype that we tested with users, giving us the insights needed to build the final product.
Before: Search Filters
In the old search filter experience, the user had to click the "More" button to reveal additional filters. The filters panel took over the whole screen and the filters didn't updated in real time. Even worse, there was a third tier of filters in the "More Options" button which hide valuable apartment amenities filters. We needed to expose the most important filters and simplify the experience for users.
After: Search Filters Redesign
The solution my product manager and I came up with exposed the highest used filters without having to click a single button. A pets filter was added to the main filters at the top and the 9 most popular filters were displayed below. Each filter showed in parenthesis, how many properties were available with that specific refinement and as the user clicked different filters, the results would update in real time.
Sketching and Wireframing
My product manager and I met at the beginning of the project, brainstormed on different concepts and I sketched wireframes in our meeting to build shared understanding on the design direction.
After looking at the top 20 markets and which filters were being used, my team and I noticed that certain filters were more popular in some metros than others. For example, elevators were very important to New Yorkers while gated access was big in Atlanta. We knew that for our top nine filters to be successful they needed to be customized for all our major metros.
Paper Prototype and Guerrilla User Testing
After creating high fidelity visual designs, I wanted to test the experience of my new UI as quickly as possible. I created a paper prototype, cut out all the menus and buttons and my product manager and I set out to find participants for in person user testing. We were working in a shared work space with other companies and decided to set up our testing operation in the shared kitchen space.
We knew if we were going to camp out in the shared kitchen space at work, we needed an inexpensive yet effective method of persuasion to get young professionals to take our test. Ah ha, cookies! I created a large sign "Take our user test, get a cookie" and it worked like giving cookies to a baby (or an adult for that matter).
User Testing Report
After 6 different user tests my product manager and I gained many valuable insights on the new designs I created. We were on the right track and with a few minor adjustments we would have our final designs. We captured our learnings on the User Research wiki I created and shared with the wider teams.
Mockup: Search Filters Active
The new search filters not only exposed the most used filters to users but also made it visually clear when a filter had been selected. The filter item would turn from white to gray and filter pills would display below the filters panel allowing the user to easily see which filters had been set and could click the button to remove it.
Mockup: Search Filters Closed
If users were overwhelmed by the additional filter options they could close the filter module to view a more simplified UI.
Mockup: Dropdown Menus
After the final designs were created, I created dropdown menu designs to show the developers all the variations of new dropdowns. I then provided final assets to the developers, wrote specifications and worked with developers to get the new designs built.