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