Commerce Marketing: UX is more important than pure UI

Member since: 2016

Hello everybody!

Firstly, a short disclaimer: The purpose of this post is to give feedback to epi from a developer and content creator perspective, to ultimately make it a better experience and therefore a better product. :)

I’ve worked with the new promotion system quite a while the past year, working on Lyko.se’s new site (basically an upgrade from commerce 7.5 to commerce 9.24 which ultimately ended in an entire new site). I haven’t touched the old promotion system that much, but I have studied it (hint hint, update your commerce certificate to at least 9.21 ;)), seen it in action, and seen the admin side of it.

Working with custom discounts in the new system is a bliss, it’s very intuitive and explanatory as you delve through the APIs. I can’t say there hasn’t been hiccups, a promotion system is a very complex thing, and sometimes we haven’t agreed with the implementation, but more often than not it’s worked like a charm!

Now this was from a developer’s point of view, when coding. What I want to focus on today is the content creator’s point of view, and the user experience (UX) that is. The content creator, in my experience usually a person from the client, is the person who logs in to the Admin UI in epi in order to create and manage these campaigns/discounts.

These flows the content editor has to go through to do these actions have severe UX flaws, of which I will point out and hopefully successfully explain as to why they are severe flaws!

I will focus on 2 areas for the Marketing UI:

  • Feedback
  • Performance

Feedback

Feedback is one of the 5 principles of software interaction design [Citation needed, can’t recall the person who coined it, but some design professor, google it! :D] and it’s very important in order for a user to know what the system is doing in response to a user’s action.

Animated GIF, Commerce Marketing

Starting off with just a minor thing, but a thing that is consistent throughout the system, even in the modern UI. Looking at this recording loading the Marketing start page, there is a lot of empty white space before we have loaded all the assets we need. It is pretty unclear when the application is “ready” for user input, user interaction. Waiting for the spinner on the browser to complete is also not something you want to rely on, as the UI is more often than not ready to be interacted with before you have loaded all resources. Just adding a simple spinner or some text saying “Loading…” would not just make it clearer, it will give the faint impression that the load time is faster.

Animated GIF, cursor/clicking around

Another thing that’s pretty minor is the click feedback in the Marketing UI. This recording shows me moving my cursor around and clicking on some stuff whenever I have the “pointer” cursor. However, the feedback from my action is completely different depending on where I click. If I click on the filters I get the expected feedback, it marks one of the filters and does the filtering action. But if I click on a campaign or a discount (note, with the same cursor) nothing happens except a green border. And seeing as there is no multi select thingy, I don’t see what purpose a “selected” item in this view has. I have gotten several reactions, both from clients and fellow developers that haven’t worked in this UI as much as me, that they were amazed when I could double click an item to load it. For them it was a hidden feature, they always had to go to the little icon on hover and click it -> Edit.

Animated GIF, loading prioritization screen

Here we’re starting to get to the really bad stuff. When you want to prioritize a discount, which you more or less always want to do if you’re creating an entry level discount (it needs higher priority than any Order level discount, otherwise spooky things happen), you need to click on the top right corner to get to the priority view, where all discounts from all campaigns are flatly loaded and you can sort them in relation to each other.

So as I see it, there are 3 big points to cover here:

  • Feeback on the first click. Did I click? What is happening? Is it loading? If you have a lot of discounts to load or you had a dip in your internet connection, you might ask yourself this. For performance I usually use the 1000/100/16 model. 1000 msec for a page load, 100 msec for any feedback to a user interaction, 16 msec for a frame to render. In this case I’d say just put the load icon that I’ve seen from the CMS as soon as you click:
    .
    Or, preferably, when you notice the load time is more than 100 msec.
  • The state of the page on first render. There is no indication that the page hasn’t finished loading. It says there are no discounts. Why would I believe anything else? I, as a developer, can check and see that the page renders from the request, and then later on sends an AJAX request to fetch all discounts and populate the page. But I don’t think most of the content creators spends as much time as I in chrome developer tools… Just add a spinner on the first render of the page, or the text “Loading discounts”.
  • Load time of the AJAX request to fetch all the discounts. I’ll cover performance now!

Performance

As I mentioned before, I follow the 1000/100/16msec model for performance, and any application that can reach these benchmarks is a great user experience. However, I cannot say the same for the Marketing UI. Everything boils down to having many discounts, the more discounts you have the slower this section of epi admin gets. And a list of discounts feels very natural to organically grow, as companies always come up with new discounts.

An extremely common use case is “Daily catch”-discounts. Structured in the most semantic in epi I would say to have one Campaign as a folder for all of the daily discounts and then all the discounts had a short period of active date interval. This approach doesn’t suit the admin performance very well, however.

I won’t show any recording of this for two reasons, 1) the recordings would be of a live production environment to reflect real life examples and 2) I don’t want people here to watch a blank screen for around 100 seconds.

One of the biggest thieves is the prioritization view, as I mentioned above.

This is a screenshot from a customer’s live production environment, when loading the prioritization view. All this time, these 1.7 minutes, you see the text “There are no discounts.” on the screen. And then 2 minutes later a whole bunch of them appear, even the inactive ones.

New in Commerce 10.6

A feature that was added in Commerce 10.6 (I could be wrong, but a fairly new feature there around) was that in the start page view of Marketing, you can see the number of total orders a discount has been redeemed on. There is still the “Redemptions” count, but the difference is that one order can have the same discount redeemed multiple times, so in the case of entry level discounts, the Redemptions and Total Orders numbers can differ.

This led to the starting view in Marketing taking over 80 seconds to load.

While this was loading, the user saw a blank screen, with the filtering on the left.

Of course, this new incredible load time is reported as a bug to epi as I write this, but I still wanted to include it here for the single reason of promoting a product that takes into consideration not only the best test case, but a system that has been running for years and has had daily discounts almost every day. A product to make the experience as good for end users as for content creators.

We need to think UX for admins too. We need a QA process that makes sure releases/features consider the UX for content editors in Commerce, especially when the UI is freshly made and fairly modern. But, as I started this with, UX is more important than pure UI.

Regards,
Joel Yourstone

#178910 May 26, 2017 8:57
  • Member since: 2008

    Thank you for taking the time to compile and post this extensive and detailed feedback! I'll make sure we as a team take a good look at it. The performance problems you see are really bad and I assume this makes the issues with loading indicators etc all that worse.

    #178915 May 26, 2017 9:25
  • Member since: 2016

    I'm glad it was appreciated.

    There is another part that I thought I'd write about as well, but apparently forgot. It's about usability on the start page of the Marketing UI. The purpose of that start page is, from what I can see, two things: getting an overview of the campaign/discount and their statuses, and doing CRUD operations on Campaigns/Discounts.

    The overview

    The overview part was improved a lot with the added filters a couple of months ago, we really were looking forward to that feature. However, it didn't turn out the way we wanted. Our use case (and I'm sure we're not not the only ones structuring it like this) means having a fair amount of Campaigns containing discounts both inactive and active. E.g. the "Daily deals" campaign I talked about in the main post. So having almost no campaign with all discounts empty, the filter on the right doesn't do anything seeing as you can only filter on the campaign status, discount type anr market. What we would benefit the most from would be discount status. So we can see which discounts are active on the site or not. However there is an API you released creating these filters, so it's possible for us to create our own, which is nice!

    CRUD

    When you want to make CRUD operations in Marketing, it can easily lead to some confusing moments. Creating is pretty straight forward, you can do it both from the hover menu on the campaign (if you are creating a discount) or the big plus top left. Deleting is also fairly as you think it should be. But when it comes to Reading and Updating you take a turn for the worse. If your use case is "Update the daily discount we're having tomorrow", you first need to locate the discount in question. How does the application intend me to do that?

    I can't search for discounts/campaigns because they aren't indexed (maybe there is a way to index them?). But that's not what I'd do first if the discount I was looking for had a coupon code, which is probably the most relevant thing you know/remember. I'd want to somehow find a discount from the coupon code, which I have found no way of finding out from the UI. I can't even Ctrl+F it in the browser becasue the coupon code is not in the overview list.

    So I can't search for it with a search engine, I can't find it by the coupon code. Say I know the name of the discount, can I maybe just do a Ctrl+F in the overview and find it by name? Unfortunately, no. Some discounts are lazily loaded, meaning the ones that appear when you scroll further down in the list aren't rendered when you're at the top. So the text element that would be my match (the discount name) would not find anything as it is not rendered in the browser yet.

    I'm left with no other options than to scroll to the campaign (hoping I know which campaign it is), making sure all the discounts in that campaign render and Ctrl+F the discount name from there. That is to me a pretty bad option, when I just want to finish the task my boss gave me "Update the daily discount we're having tomorrow".

    Brain dump improvement suggestions for this ordered by what I think would be best UX:

    • Make sure discounts and campaigns are searchable by name and coupon code (if it is a discount). Don't know where the search would be, perhaps as a Gadget, perhaps just in the top of the overview page.
    • Add coupon code as a column in the overview list, so one can search for it with Ctrl+F
    • Make sure the entire list of discounts renders, so I can search for all the names. I know this is pretty expensive using the contentLoader, but some smartly used cache could be the saviour, seeing as it is only a GET operation.

    Regards,
    Joel Yourstone

    #178970 May 29, 2017 9:35
  • Member since: 2011

    Thank you, Joel - your comments are highly appreciated. I hope we get more feedback like this.

    We filed a bug for performance, and are discussing with UX about your suggestions. No promises that all of them will be addressed, but we'll make sure to look into each of them.

    Regards,

    /Q

    #178972 Edited, May 29, 2017 10:10
  • Member since: 2016

    I like my new nickname ;) I've also filed a bug report for the two big page loads, if it's possible it would be great to merge them somehow, so I can see tracking for the issue :)

    Mine is #51393

    Regards,
    Joel Yourstone

    #178973 May 29, 2017 10:15
  • Member since: 2011

    Sorry about your name - I apparently need more coffee. I linked the bug we created with the issue you report.

    #178977 May 29, 2017 10:34
  • Member since: 2016

    Great, thanks! :)

    #178982 May 29, 2017 11:14