Elastic Path Shipping Feature
Mar 2023 - Jul 2023
Reducing the cost and time for order deliveries and making orders easier to manage.
Company Overview
Elastic Path provides industry-leading commerce solutions for brands such as Pokémon and Tesla.
Problem
Situation
Elastic Path’s current order system lacked shipping flexibility including the ability to deliver one order in multiple packages. This is a common feature supported by many competing e-commerce platforms and was requested by Elastic Path’s customers.
Task
As the sole UX Designer on this project, I was tasked to figure out what changes needed to be made to the orders page so that orders could be effectively managed and tracked in the new system.
Outcome
Action
Worked collaboratively with a product manager, and developers to define project scope and technical feasibility.
Continuously iterated on the design starting from low to eventually high fidelity prototypes.
Facilitated design reviews, usability tests, and customer walkthroughs to gather design feedback for further iterations.
Worked closely with front-end developers to deliver the Beta release of the new shipping feature.
Result
The team was able to deliver the Beta release for this shipping feature within 4 months, while juggling other on-going projects.
This resulted in 30,000 new feature uses across 36 customer stores, just three months after launching.
The redesign also allowed users to find information more easily, resulting in upwards of a 10% time reduction to complete common tasks.
Designs
Old order page design and new design
The new design is more space efficient and allows users to find shipment information for the order, including delivery times, delivery addresses, and items within each shipment. This design was validated from data through 2 rounds of usability tests and 2 customer design walk-throughs.
The Design Process.
Discover
The problem
Elastic Path's current order system was designed so that one order could only be sent in one package, to one location. This is a problem because of two reasons.
One package - if items are located in different warehouses, they have to be brought together before being delivered. This means more resources are required per delivery, and longer delivery times.
One location - since you can only ship to one location per order. A customer will have to place a new order for every address. This is a problem when you want to ship items to many addresses because there are a lot more orders to manage.
This project aimed to solve was to redesign Elastic Path’s current order system so that it could allow for one order to be sent in multiple shipments, to multiple locations. This concept is known as Split Shipping and is a common feature that has been heavily requested by Elastic Path’s customers as it offers increased efficiency in how orders can be processed.
Understanding the problem
I did some research online to get a better understanding of Split Shipping and had conversations with my team. Through these conversations, I had a clearer vision of what we were trying to solve, and we were also able to have a rough idea of the scope of the project.
💡 Key Takeaways 💡
One key takeaway was that we also needed to consider how payments interacted with multiple shipments in an order because many companies only charge customers after items are shipped due to inventory and availability requirements.
⚠️The Challenge⚠️
Though a scope was set, there was still uncertainty around timelines and the effort required to deliver all items. We needed more discussions to dive deeper and work out the timelines.
Getting insights from watching customer recordings
Now that I had a better idea of what was expected from the new feature, I wanted to see if there were any areas of improvement in the existing functionality. As such, I watched multiple session recordings of customers using the existing orders page in our platform and from doing this, I noticed that users were spending hours on similar workflows.
💡 Key Takeaways 💡
I found that users were spending a lot of time scrolling to find information in the current design and took note of this for improvements in the new design.
Define
Using diagrams to drive team allignment
As there was still uncertainty around the scope of this project, I decided to map out different flow diagrams so that I could walk through it with the team to get alignment on what the scope of the project is.
Revised scope
After a series of discussions and iterations of different flows with my team, we were able to finalize on what will be supported for the new feature, which involved reducing scope due to technical and timeline limitations.
Develop
Using user data to drive design decisions
Using the flow diagrams and insights gathered from watching customer recordings, I started visualizing how the UI would look. I wanted to make it easy for users to find item information, and capture payments for an order.
Find item information easier by reducing scroll length and by using in-page linking
Sharing work and iterating
To make sure everyone on the team was alligned with my work and to get their feedback, I shared my work multiple times a week and setup a dedicated time per week to go over work. After each session, I would take the feedback and iterate further on the designs.
💡 Key Takeaways 💡
People were a lot more involved when low fidelity wireframes were shown compared to flow diagrams. As such, I was able to gather more feedback and moving forward, I learned the importance of showing wireflows early on.
Testing ideas and further iterations
To help validate the design decisions and to identify areas of improvement, I decided to conduct usability tests. In the first usability test, I found that participants were able to find information about the different shipments in an order easily, but received a lot of comments suggesting that the payment capturing process was confusing.
I looked into the feedback and realized that I had overcomplicated the design by providing unnecessary flexibility that did more harm than good. With this feedback, I went back to make further iterations on the designs with simplicity in mind. To validate this hypothesis, I conducted another round of usability tests and found that the issue was resolved.
💡 Key Takeaways 💡
Just something can be technically implemented, doesn't mean that it makes sense to include for an end-users perspective. More doesn't always mean better.
Design walkthrough with customers
Before the implementation of the designs, I wanted validation from our customers that our designs made sense since the participants I conducted usability tests with were not actual end users who used our platform. Therefore, our team set up two meetings with two different customers that uses Orders in our platform and I facilitated a design walkthrough with them.
Through this, we were able to validate with both customers that our designs were easy to understand as there were no major concerns identified with the new feature.
However, we also learned that the two customers did not have plans to use this new feature yet, which suggested that we should have done a better job of identifying and reaching out to our customers who requested this feature, so that we could gather better insights.
Other considerations
Though not related to the new shipping feature, I noticed that our customers were confused about how the taxes were shown in the orders page. The issue was that taxes were already included in the price of each product, but this was not clear. To fix this issue, I separated the tax from the unit price.
Deliver
Working closely with developers to deliver the designs
The general feedback we received so far had been quite positive and therefore, we decided that we would go ahead and push out the designs for the Beta release and by doing so, we would be able to gather more information on how end-users were using this new feature.
To make sure that the designs were delivered correctly, I worked closely with the developers, and in doing so, I learned that some of my designs were not technically feasible, especially given our business goals and timelines, and that compromises had to be made with respect to user experience.
Initial release of the new design
In the end, we were able to launch an initial version of this new feature within 4 months, while juggling other on-going projects.
The video below showcases what new features were released.
Learnings
Design is a collaborative effort
As this project was quite technical, I had to work closely with developers and project managers to understand technical constraints, and business goals when putting together the designs.
Adding flexibility may add unnecessary complexity
This was a common theme that I came across, not just from a development perspective, but also from a user perspective as well. I found that adding more flexibility may lead to more confusion for users and a better approach may be to start simple and to only consider increasing flexibility when clear feedback indicates to.
