[embedyt] https://www.youtube.com/watch?v=K2FDra3W9Q4[/embedyt]
The next major step in our quest to make CrystalCommerce Admin smart, simple, and efficient releases on Monday, Nov 20, and it’s a big one: the Orders section. Over the past few months we have analyzed usage data and user patterns, dissected the existing interface, and re-imagined each page in the Orders section from the ground up. The result is an order processing interface that is faster, more focused, and more user-friendly than ever.
The list of changes builds from one to the next, so let’s start with the most basic one: “responsive design.” If your design is “responsive,” that basically means that your design layout adjusts for different-sized devices, making intelligent use of the available screen dimensions.The old Orders page is not responsive though, so most of the time that meant unintentionally empty space on the right. Our data revealed that the vast majority of our users load the CrystalCommerce admin on large desktop screens: about 82% of users have screens that are 1440px wide or larger.
1440px is a lot of room! For the new version, we had the opportunity to thoughtfully use that extra space to show additional relevant information. That means large screens get an extra set of goodies in their view by default. Smaller screens don’t lose those features, they will just have to scroll down the page to see them.
So we found more space in our admin by thoughtfully using the user’s screen size, but “more space” doesn’t (and often shouldn’t) mean “cram in more stuff!” For the most part, the main building blocks of the page are the same, as this colored spaghetti-ish diagram demonstrates:
- The set of controls that let you search and filter your orders is present (at the top, outlined in red).
- Once you have performed a search, there is a list that displays the search results (the table of data, outlined in blue).
- And there are some peripheral actions like batch printing/status updating and importing/exporting order data. Those have been collected into “Bulk Actions” accordion (outlined in green). The Bulk Actions accordion appears on the right in this screenshot, but it would be located at the bottom of the page on small computer screens.
For the new version, we scrutinized every piece of data, every tooltip and icon, and we re-appropriated anything that didn’t contribute relevant context. In the case of the search form, we studied usage patterns and decided to show only the most highly-used filters by default. In the case of the search results, we re-organized many pieces of information into the order details areas. Each revision was a unique challenge, so let’s break down both.
Search Form
Usage patterns and survey data heavily favored a small subset of the fields on the old Orders search form. Those are now the default visible fields in the new Orders search form; the rest of the fields (the important but less-used ones) are tucked into an expandable tray underneath the default fields. Hidden fields can still be active when the tray is closed, so a small notification next to the expand/contract button shows you how many hidden fields are active. One bizarre holdover remains that we will have to study a little bit further: the ‘hide in store pickup orders’ checkbox. It is the only hidden filter that is active by default (just like it was in the old admin).
Search Results
One of the major tenets of our re-design ethos can be summed up as, “Right information, right time.” Simply put, it means that we want to present our users with information that makes sense in the current context, and we want to avoid showing information or controls that are premature or irrelevant in the current context. That sounds… totally obvious, but the results in the search results table (the rows) were a major offender of this rule.
For example, our testing showed that while the void and status change controls were located in the order row, users would only perform those actions after first expanding the order. If users need the information inside the order before using controls outside the order, that means those outside controls have been presented in the wrong context. For the fresh version, we relocated a number of controls and information that were previously shown to the user out of context: status change controls, void/un-void, print, email, order and customer history info, and a host of icons and other extraneous information. In the new order row, you’ll find:
-
- Order ID, Date, Customer, Order “Type” (origin channel), Status, Total*, and some icons*
*Total: the text will appear red if the order is not yet paid for, and orange if a credit card payment is authorized but not yet captured
*Some Icons:
- Fraud warning: an orange icon alerting you to some dubious order characteristics
- Customer comments: when a customer leaves a comment during the checkout process
- Survey answers: when a customer answers the post-checkout survey
- Vendor comments: to signify that a staff member has left a comment on the order
- System comments: to signify that the system has left a “comment” on the order. The comments are often system or user messages from 3rd party channels.
The rest of the items in the previous order row find their new homes inside of the expandable and full order details pages.
Expandable Order Details Page
If you’re like most CrystalCommerce admin users, there’s a strong chance you never made it past the old expandable order details page. There’s a good reason for that, too: the expandable version and the full version were virtually identical! In this update, we reclaim the expandable order details page, and we give it this purpose:
The expandable order details page gives the user enough information to a) ship the order immediately, or b) know that the order needs deeper admin work.
The new, simplified expandable orders page loads faster, and contains all of the information and controls required to ship an uncomplicated order. We estimate that over 60-70% of all orders can be shipped from this page alone. The information and controls on the page are:
- Order origin channel & any channel-specific info (TCGPlayer order number, etc)
- “Placed on” and “shipped on” dates (with tracking link if tracking info is present)
- That familiar order status change dropdown
- Invoice & pullsheet printing options, and the “print pullsheet” icon turns bright green after you’ve printed a pullsheet
- Notifications (like ‘on hold’ or the fraud notifications) appear beneath the basic information. The hold notification lets you change the ‘hold’ status from the quick order page, while the fraud notification links directly to the fraud analysis tool on the full order details page.
- Order items (products in order), including quantity ordered and quantity remaining. Note that quantity changes cannot take place on the expandable order details page; the full order details page is reserved for those heavier admin responsibilities.
- Order comments (Some stores use the comments field to indicate if an order is ready to go, and we didn’t want to get in the way of that)
- Abbreviated order payments section with color-coded “Payments received” text and tooltip
- Fulfillment reference information like shipping address, method, and weight
- Endicia label printing menu (Expanded or contracted by default based on whether your store uses Endicia or not)
- Tracking number entry field
The controls and information in expandable order details page is intentionally lightweight. For uncomplicated orders, this is likely as far as you will have to dig into the order! For those orders that require a little more admin work, the full orders page is where you will go.
Full Order Details Page
See the full images: (version with colored spaghetti) (version without spaghetti)
The full order details page mimics the layout of its smaller expandable cousin, but it includes more information and the more powerful admin options:
- Add or remove items / edit current order quantities
- Add a payment / Process a refund
- Void / un-void order
- Place order on hold
- Report order as fraudulent
- Export a CSV of the order items (new)
The old version of the full order page scattered these controls around in the various modules, so you had to know where to look for something in order to even know that option existed. In the new version, all of the actions in the list above are collected into a dropdown that can be found at the top right of the page. Open the dropdown by clicking on the ellipsis [ … ] button.
Note: depending on your browser, this dropdown appears at the very top right of the page, or within the content area.
There are deeper insights about the customer and the order, including:
- Full customer contact info, order history, and internal notes
- Full shipping and billing addresses
- Post-checkout survey responses (when present)
- Fraud analysis*
Fraud Analysis
We have re-tooled our fraud detection suite and are proud to introduce a new tool that will help you understand and manage one of the biggest risks in e-commerce: fraud. The tool analyzes all relevant data points on the order, and displays a “fraud concern rating” in the form of a color-coded status bar. The width and color of the status bar change based upon how many data points suggest potential fraud. Third-party channels like Amazon, eBay, and TCGPlayer do not provide the same depth of data as direct orders, but we will always show you every possible data point for each order. The data points that we analyze for direct website orders are:
- Credit Card AVS and CVV codes
- Billing / Shipping address match
- Billing / Shipping / IP address previously reported as involved with fraudulent orders
- IP address geolocation compared to billing address
- PayPal Seller Protection
- Orders from other channels are analyzed as well, although some data points are not available (such as the IP address of the customer).
Credit Card AVS and CVV codes (for direct transactions only)
When a credit transaction is run through your direct website checkout, two important pieces of information are analyzed: the Card Verification Value (CVV) included with the transaction, and the Address Verification System (AVS) response. When a credit card transaction is submitted, the information is passed along to the bank where your merchant bank account is set up. If your bank approves the transaction, they respond with both of these codes. Each bank and payment gateway has different settings to determine which transactions are approved or denied, but the fraud analysis tool will flag any response that is not “Match,” so that you can review that information.
Billing / Shipping Address Mismatch
Any order with mis-matched shipping and billing addresses will be flagged for review. We know some orders with mis-matched shipping and billing addresses may be legitimate, but we still want you to be aware of that potentially fraudulent characteristic.
Billing / Shipping / IP Address reported as fraudulent
CrystalCommerce lets members flag an order as being fraudulent, and asks members to submit a brief report about the details of the fraudulent activity. We maintain that report centrally, and match all new orders against existing reported fraudulent addresses. If the address in question is used again to place an order on our platform, we flag the order as potentially fraudulent and the admin of that website will be able to read any existing reports. Billing, shipping, and IP addresses are checked individually, and each has its own unique report in the fraud analysis tool.
IP Geolocation vs Billing Address
Another safeguard against fraud is to check if the order was placed in a locations that is close to the billing address. If the billing address is not geographically close to the IP address used to place the order, the fraud analysis tool will alert the user to that potentially fraudulent characteristic.
PayPal Seller Protection
The status of PayPal seller protection for your order is displayed if PayPal is one of the payment methods used on the order. PayPal seller protection isn’t directly related to detecting fraud, but it determines your financial liability in case an order turns out to be fraudulent. If your order is eligible for seller protection, in most cases you will not have any financial liability if the order was fraudulent.
The fraud analysis tool shows you the best analysis of every applicable data point on the current order. Armed with that information, you can make the most informed decision about order fulfillment.
So… what?
Running a business is a complex and challenging undertaking, and anything that saves time saves money. The Orders page is a crucial component of running that business, and these changes are aimed directly at saving time. The new Orders section layout makes intelligent use of your screen, bringing the right information and controls into view immediately. The updated expandable order details page give you fast, clear controls and information so you can load, review, and process uncomplicated orders more quickly. And the new full order details page brings all of the important order controls into one intuitive location. Existing users will save time shipping orders on a daily basis, and the simplified, intuitive design dramatically reduces onboarding for new users.
Next up for re-construction: the Inventory page! Stay tuned…
