Yes, there’s a time and a place for new features and new apps. But this week I really wanted to go back to a previous app to sweat on the details of the user experience and see what I could do to make it better.
Automated Categories has been on the marketplace for a good 10 months or so now. And being a rule builder, it’s a bit of a scary space from user experience perspective. It can get quite complicated quite quickly. And so with adding a new feature, which is custom field support I knew I needed to rework the UI.
And so this was a good opportunity to reflect on the approach so far, is it working and what can we do to make it better. So that’s what I’m gonna take you through today.
Well, this is the current version of automated categories where when you choose a category, say the New In you can enable automating categories and define your set of conditions. So here is just a example one, it’s not one that you would really use in production, but just to show you the different field types that we have.
So each condition is broken up into a trio of fields where we have the name in the first one, the field, either product attribute. We have the operator, what can you do? How can you compare this name to the value that you set on the last field? So we want name, contains Pushchair. This one, we’ve got the condition of the product where that’s a select box.
So we can say that it is one off or is not one of, and then choose our options. And then we have the option of choosing whether or not you want another condition and that all these conditions need to be true in order for a product to be assigned to this category. Or you can then have an Or button, which now enables you to set another set of conditions that would also trigger a product to be included in this category.
As I said, this was based off of Zapier’s way of doing things, but when adding custom field support, I recognize that to be able to support custom fields, custom fields have a name as well as a value. So custom field might be your option in here, but then we needed to actually choose a name, say you’ve got a ‘is_new’ custom field, and we wanted to then, putting a fourth input box into this row doesn’t really work. So we knew that this was kind of the breaking point for this sort of layout. That we needed to review how we were going to do it.
Secondly, we have had feedback, you know, rule systems are hard to build and we have had feedback that it wasn’t always easy for people to get up to speed with. They’ve got something in their head in terms of what they want to do, kind of translating that to our interface, they struggle with it, understandably.
So this was an opportunity to reflect on the approach, to consider how we could piece by piece, sweat on the UX details and improve it.
I did have help internally with our UX team here to give me some guidance on different approaches, and that was really, really helpful. So thank you Anca for help there.
As we go through, I’ll give you a little bit more deep detail about my thought process. It’s great to use BigDesign and the component library, but there’s still a way of using it to improve on the user experience. So the first thing I changed was I did add a title to the panel to give a little more of a lead in, particularly as we were simplifying the form.
So one of the BigDesign and the design guidelines is if you’ve only got two options, particularly ones that are “yes/no” fields, then the preference is for check boxes over radio buttons. And so I took this opportunity to move towards that.
So “Automate”, short description with a link to find more details
You can immediately see where our inheriting if you might be familiar with the new promotions engine in BigCommerce a slightly different way of building out rules and laying them out. So I’m using this yellow badge to call out the sentence that should be going through someone’s head when they’re building out a rule.
So “Only include products if” and now we’ve got this bulleted icon, which again is from the promotions interface, “please select a field”. I’m also conscious around the placeholder text on each field now. And you can see that we’ve hidden the other fields until you’ve chosen a product field. So it’s kind of guiding the customer that the first thing they need to do is selecting a product field to build their rule.
So we were talking about name it’s a nice, simple field to deal with. Then you see the other fields appear and I have auto-selected the first operator. You’ll see that I’ve now reduced and removed the field labels. Again, to try and focus on the customer reading either the placeholder, the current value of a field,
so they can kind of continue reading this as if it was an English sentence. So only include products if name contains, and then we have our value. And then the next buttons I changed from “And” and “Or”. And this one I have struggled on and not settled upon. But I wanted to get across the “And” is reducing the products.
So every condition has to match for a product to be included, and that wasn’t always clear, particularly for new users. So I think the filter icon, filter text, helps to indicate that fact as well as I’ve also use that label approach again, but this time with the gray box to show that all of these fields and trying to indicate as much as possible, just with tweaks to the UI, that all of these conditions need to be true for a product to be included in this category.
Now similarly, we can choose our fields and they kind of progressively disclose the other input fields. And then if you’ve got another set of products that also need to be included in this category, the text I’ve gone for right now is “Add another rule”. Still on the fence, this is essentially your “or” condition.
Still on the fence with this one, but I’m thinking about the copy and what I could do here. And then again, use the yellow feature badge box, whatever you want to call it, to denote that this is a separate set of products that could be in there. Now for our new field “Custom Field” we can choose our custom name.
So maybe “is_new” and then similarly we can say exactly matches, or choose our different field types.
Another slightly different variation, if we choose date created. So one of the features you’d want around a “New in” is only including products that were created in the last, however many days. Before I struggled with the format for this box. If I go back to this screen where I do date created, I chose “Before X days ago” because I was sort of limited to this three input field approach.
This time around, because I’ve introduced these new UI components, I’ve now changed this to be “More than”, or “Less than”. So when you’re using a date, you say the date created is more than 30 days ago or one day ago. And similarly with “Less than”, so that again, adopts the approach of promotions UI, so consistency with the rest of the BigCommerce product and just reads a little bit better.
So Automated Categories now supports building out rules with custom fields which is, I know people have been asking for all for a long time and we have now hopefully improved the UI, so it’s a little bit easier to understand.
