Surfacing detailed pricing info to CSRs without overwhelming less experienced users
Mozu was an enterprise e-commerce platform I worked on at Volusion.
One of Mozu’s more advanced clients was asking to see more pricing detail in our admin UI when viewing an order. Support for advanced pricing had been built elsewhere in the admin but the order editor hadn’t been updated to display that data.
Research & Discovery
First, we had to wrap our heads around the pricing complexities, which took some time at a whiteboard.
Here’s a blowout of an order object showing a single order comprised of several line items with all the pricing fields exposed:
That heavy column with the orange fields shows various line item amounts, plus all the ways a price can be altered:
- Line item price
- Line item price adjustment
- “Sure, I can knock $10 off for you…”
- Line item discount
- “10% off with coupon”
- Line item shipping
- Line item shipping adjustment
- Line item shipping discount
- Line item tax
- Line item total
And for the whole order:
- Subtotal
- Shipping price
- Shipping adjustment
- Shipping discount
- Temp total shipping
- A sum of shipping before any line item shipping discounts are applied
- Order adjustments
- Order discounts
- Order coupons
- Total order shipping
We ultimately separated Shipping and Handling into their own areas with their own adjustments, and added separate tax fields for the adjusted order subtotal, shipping, and handling.
Why is that data important?
Swimming in a soup of dollars and cents and micro adjustments begs the question: Why is doing this worth the resources to build? In lieu of a use case for each field, here’s a really simple illustration:
A customer who paid $100 for 3 items with an 20% order discount wants to return 1 item for a refund. How much do we refund them?
The CSR has to account for the cost of the item, how much of the discount applies to it (weighting), what that line item’s shipping costs were, any additional order shipping and/or handling costs, all sorts of tax, any other adjustments that may have been made, etc. It’s usually straightforward, but with enterprise apps, you can’t just build for “usually.” We had to support the obscure use cases as best we could.
Design
Once we had a handle on the data, I worked through the UI changes. The client who requested the upgrade was involved, and engineering weighed in heavily to make sure the designs were in line with data architecture.
UI challenges
This was a largely technical UI design effort to overcome the following:
- Keep all pricing data no more than one click away
- Don’t burden a CSR with unnecessary information until they want it
- Present line item details without overwhelming the user
Mockups
Results
CSRs using Mozu now had a complete pricing breakdown for any order or order item at their fingertips, and could see exactly what was done to get to the final dollar amount. If they were processing a return, they could sort out exactly how much to refund without trying to do math on the side (with a customer on the line) or just giving up and guessing.
For our company, these improvements eased client relations by bringing Mozu closer to feature parity with our competitors.