The Process

The backend part of the tool was built first, and I looked at the existing front-end implementation and provided better visual hierarchy and layout for the UI elements. I added a small blurb underneath the title to explain to users what this UI section was for and how it differed from other filters that lived on the same page.

I also made sure to add in very clear disabled states for actions until the user would be able to meaningfully use them. For instance, the user cannot select the second and third inputs until the first one had been selected; the user cannot click the "Add Rule" button until all fields are filled out. I wanted it to be very clear what actions could and could not be taken at each stage of the rule-creating process.