Line Item Replacements Visibility
Enabling greater visibility into e-commerce order line item replacements and substitutions.
Screen: Desktop
Role: Research, Experience Design, Visual
Tools: Figma
An internal team requested the ability to more easily view information about line item replacements and substitutions in e-commerce orders - information they previously had to manually request from another team.
Implement a feature to the existing relevant page that displays the information in a clear manner.
BACKGROUND & RESEARCH
E-commerce orders can be fulfilled several different ways, which means that items aren't always available exactly as the customer ordered. This necessitates the use of replacements (the same item in different quantities/packaging) and substitutions (a similar item); which item is chosen can be based on customer preference, sales data, or manual tags.
An internal team raised the issue of having to manually request item replacement data from another team, and all the associated issues that a dependency like that commonly brings. I conducted some interviews with this team, as well as with the team that managed item replacement data, as to what the best solution would look like.
SKETCHES & WIREFRAMES
Due to the complexity of the fulfillment process, I had to account for several different dimensions. This includes whether substitutions were allowed or not, whether an item was replaced or not, whether an item was substituted or not, what type of replacement it was, and when an item was neither replaced nor substituted. I ended up creating a diagram to illustrate all the possible combinations so that I could account for them all.
The general layout went through several rounds of feedback to ensure all involved parties understood the information being presented and terminology used. This required me to work very closely to balance multiple users, developers, and the product manager. There were very divided opinions as to what "made sense," so I suggested that a left-to-right approach would work best since all our users primarily spoke English and they were familiar with scanning things left-to-right.
Evolution of the general layout
I came up with the concept that everyone approved: the original item and the fulfilled item on the left, and the list of all possible items on the right. This was very important as some of the users wanted to know "how far down the list" a replacement or substitution was, and why it was chosen. This was important for them when problem solving specific order problems and back-end errors.
Three scenarios of the final screen
It has been several months since this was implemented in production, and the solution seems to have satisfied everyone involved.