BirdsEye bird finding app is one of the best apps for bird enthusiasts to look up birds found in their area. They are about to introduce a feature based bird identification filter, which would let users out in the field narrow down the search for bird’s name by describing its color, size, and the kind of habitat in which they spotted the bird.
I worked with a visual designer and with the developers and stakeholders to provide a intuitive and easy to use UX for this new feature.
I was completely new to the world of birding, and I spent some time familiarizing myself the current app, as well as the newly proposed features. The actual structure of the proposed feature was fixed – 3 filters, one each for habitat of the bird, color, and size. We conducted semi-structured interviews with long-time app users as well as new or non-users throughout the design process.
I also studied similar features on other bird finding apps, to understand their processes and user expectations of the community as a whole
First design iteration
With initial wireframing, we were trying to answer some questions such as:
- Should the filter be a separate page, a popup window, or a slide-out filter?
- What is the logical place for a user to look for a filter like this?
- What should be the position of the filter, and how should it expand and collapse?
Filter Design: Interviews revealed that new or amateur users often didn’t have any clue about the bird name or family, and tended to scroll through the list of all nearby birds until they found something that looked familiar. The photos helped, of course. This meant that dynamic filtering as they made their choices would be really helpful, something the developers of the app also quickly agreed with. We thus decided to go with the same-page slide-out filtering.
Home page and slide out filter panel
Launch the filter: The page already had a search option, and we decided to merge the new filter with the search, with thought process that if a user didn’t know the name, they would want to search by the characteristics of the bird instead.
Clicking on the search icon brings up options for two ways to search
Filter behavior: We also realized that users might want to scroll or just get the filter out of the way when they wanted to see the results. We still wanted to show a short summary of their selections so they knew what they had filtered by. We opted for a icon-based summary based on the icons provided by the visual designer.
Filter states: expanded versus collapsed
After hashing out some more details, we shared an initial invision prototype with the stakeholders and some users. The images below show a walkthrough of our prototype:
Clicking on search and tapping “Look Up” launches filter
Selecting colors, and tapping on “size” to filter by size
Selecting size, habitat, and collapsing the filter
First round of testing
Qualitative testing with the invision prototype revealed two important findings:
- The location of the filter – would a filter at the bottom be better? We initially had the filter at the top because hierarchy of information meant it made more sense there, plus the button to trigger it was at the top. But this made for a worse experience as users played around with the filter and had to remove their hand in order to see the results.
- The 2 step process to launch the new feature was cumbersome as well as unintuitive: The app currently has a search by name option, and this would be a new “search by features or looks” option, so we merged the two. But we realized that most users used ‘search by name’ mainly to find out when a particular bird was last seen in the area and ‘search by characteristics’ only when they saw a bird and didn’t recognize it. So these two have fairly different use-cases and should be presented separately. This considerably influenced our further design prototypes.
Further design and test cycles
See our latest invision prototype here.
After a few more rounds of quick prototyping, we finalized the filter launch behavior: an icon alongside the search. This made it easy to launch, and had some association with the regular search but not dependent on it. We also went with the filter at the bottom concept, and made some changes accordingly.
Before (2 step) process to launch filter at top
After (1 step) process to launch filter at bottom
We wanted to test whether closing the filter as users started scrolling would be a good idea. I quickly created two framer prototypes and we ran them by a few users as well as our the app developers – everyone seemed to like the one where the filter automatically collapsed into the summary line.
See a comparison of the two behaviors created using framer:
We provided all the assets, invision workflows to the developers and the updated app will be launched soon. In terms of future work, we want to address the following issues we found during usability testing:
1. The size section was confusing for many users, as there was no reference of what small meant or what large exactly meant. We are currently working on new and more intuitive designs, such as a slider with examples of small and large birds at the two ends.
2. We would like to go from filter -> summary in a more visually connected way, so that users can associate the summary icons easily with the original icons.