EBAY MERCHANDISING
The merchandising interstitial came out of an opportunity to provide additional merchandise once buyers had committed to an item – whether that was by adding it to their watch list or their cart. It was a project specifically for native, including iOS and Android.
A combination generative/validation test was completed in Germany before I took over the project.
Issues
Previously tested design
Based on findings from research, buyers would get lost in the experience when the interstitial slid into the viewport.
They needed a way to orient themselves within the app. The original design did not have any obvious exit or back button, and it was difficult to continue to the cart.
Buyers were confused when they were shown similar merchandise to what they had just added to their cart. Similar merchandise competed with their mental models of not needing to make another decision after selecting an item.
From the interstitial, if a buyer was interested in a product, they would have to tap through to the page for that item, which would take them out of their shopping flow, and was projected to decrease revenue overall.
Tested Android design
Process
Based on requirements generated from the test in Germany, I began creating iterations of the design, including versions for iOS and Android, mobile and tablet.
From these, the team evaluated each static version through heuristic review, after which, the most usable designs were updated based on findings. Product management and development were also consulted to verify that these versions were feasible to launch.
Once the static design was decided, an exploration was done into the actual interaction of the element. Again, I created multiple interactive versions using Principle, and had the team complete heuristic evaluations once more. Product management and development were again consulted to verify that these versions were feasible to launch.
Once the top two interaction models were decided upon, new versions of these were made in Proto.io and a test released in UserTesting.com for validation review. This provided us with definitive results of what the interaction model needed to be, and verified the design direction.
Solution
Final interstitial design
The final solution was a card with complementary merchandise that slid halfway in with the Continue to Cart button exposed and static at the bottom. Buyers could control how much of the card they saw by sliding it up or down.
This version tested well because not only did buyers not lose track of where they were within the app, they were also able to easily continue to the cart, significantly reducing the chance of cart abandonment.
Other versions were later explored, including a quick add feature and bundling with discounts.