Tag: mobile

BirdsEye Feature Filter

eBird-filter-3    eBird-filter    eBird-filter-2

Introduction

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.

My role

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.

Research

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

Design-test cycles

First design iteration

With initial wireframing, we were trying to answer some questions such as:

  1. Should the filter be a separate page, a popup window, or a slide-out filter?
  2. What is the logical place for a user to look for a filter like this?
  3. 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
IDWizard_x_home   IDWizard_x_search_by_id_color_blue

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
IDWizard_x_home  searches_alt3

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
IDWiz_wht_col_sel  matches_wht

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
IDWizard_x_home    Filter slides out: tap blue

Selecting colors, and tapping on “size” to filter by size  
IDWizard_x_search_by_id_color_blue  IDWiz_wht_col_sel  IDWiz_wht_siz

Selecting size, habitat, and collapsing the filter
IDWiz_wht_siz_sel  IDWiz_wht_hab_sel  matches_wht

First round of testing

Qualitative testing with the invision prototype revealed two important findings:

  1. 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.
  2. 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
IDWizard_x_home    init_IDWiz

 

After (1 step) process to launch filter at bottom 
base_screen_v2_2   IDWiz_col_v2

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:

One: filter doesn’t collapse when scrolling and two: filter collapses when scrolling
eBird-framer-2eBird-framer

 

 

Future work

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.

MicroCharts Widget – Design for the iPhone

The microcharts widget is one of the most popular, data-dense widgets that MicroStrategy offers.
Some of its salient features include a sparklines and sparkbars, bullet graphs, and an outline tree mode.

My job was to design this widget to work well on the iPhone – and come up with a design to keep it data-dense yet clutter free!

 

The existing web widget looks like this:
Microcharts-general-web

The redesign process started with a study of existing widgets MicroStrategy offered for mobile devices, the competitive landscape, and cross-team discussions with consultants, tech support engineers and product management to understand the mobile use cases.
We concluded that:

  • Customers will typically use this as power-version of a regular table, and as such, would expect an interaction rich widget. All of the main functionality needed to be in there, we couldn’t remove too many features that existed in the web or iPad versions.
  • Even though there were design as well as functional challenges with supporting an “outline” mode, we would need to figure out ways to resolve these as it was a very frequently used feature and make a smaller display that much more useful.

Design Challenge 1

Support multiple columns in a user-friendly way

Users on an average have between 2-7 columns that display metrics in different formats: simple numbers, sparklines, or bullet graphs. There are different established interactions patterns to deal with such cases – showing just one column at a time that can be toggled, swiping through multiple columns, fixing the leftmost (attribute) columns and horizontally scrolling the overflow.

We chose the 3rd option and added some design tweaks to make the customer’s job easier:

  1. The column sizes can vary, in order to support graphs and number gracefully. This enables them to see multiple metrics on the screen at the same time and compare them, as long as they fit.
  2. Customers can quickly pick a density setting – normal, high or low, and we calculate the column sizes for them.
  3. Customers can perform a “slow drag” to move the columns gradually or a “quick swipe” to move the next column to the leftmost position within the non-fixed panel.

Design Challenge 2

Support a tree-hierarchy with easy and intuitive opening and closing of the outline structure.

The web version of microcharts uses indentation for the outline mode. For the mobile version, we did not want to use indentation due to space constraints as well as general ux. We went with a visual separation showing the hierarchy with subtle drop shadows.

We also supported gestures for quick opening and closing of an entire level – pinch open and close.

Linlin-light-theme-changesmicrochart-mobile-smooth-scroll