Boolean QC Filters redesign

Problem

Clarity allows users to configure logic around how steps are undertaken by samples in Quality Control (QC) protocols. Each step in a QC protocol results in a Pass or Fail flag assigned to each sample that undergoes the step. Users are able to create their own Boolean logic filters to determine which samples end up in which steps.

WHAT MADE IT HARD FOR USERS

  • The widget was hard to use
  • The filter interaction would not allow editing, if users wanted to make a change, it had to be erased and then redone, wasting time and energy
  • Even though this logic was related to the entire protocol, users had to go to each step separately to define a filter

Approach

I consulted with senior developers to understand the functionality, in the product and Boolean logic generally. I created a table that merged technology, science and user experience — showing each filter choice, how it was rendered in the code, and the science related to that decision, to ensure each permutation was considered.

UX TECHNIQUES USED

  • Collaborating with developers to fully understand the technical side
  • Creating detailed developer-facing written documentation
  • Pattern analysis (looking at existing patterns used across other applications)
  • Visual hierarchy design (visually balancing objects based on importance)

This is one of the design documents produced for developers: this design specification touches on technical aspects of design and some depiction of interaction.

This is a document I produced with a developer to ensure mutual understanding of filters as well as help the developer who implemented the work.

 

    Solution

    I redesigned the filter widget to read more like a plain language sentence while still sustaining the same functionality. We also moved where these filters were located in configuration up to the protocol level.

    WINS FOR USERS

    • Users can understand each filter more easily
    • Users easily modify each part of a filter without losing work
    • Users can see what is happening at a protocol level

     

    Interaction video demos for the new QC Filters design