TRADE-IN
PLUGIN UI DESIGN
This mobile company has relaunched their website on a different platform. As part of Store 1.0, it’s time to layer in an affordability trade-in option as it’s the most requested program from regional sales managers. In addition, the solution will be implemented across different country websites with varying requirements, thus the solution should work worldwide. The previous trade-in program team also has new requirements to improve the process and reduce friction.
This new platform will require a plug-in to be implemented on the website. As such the plug-in vendor has agreed to redesign the plug-in UI to fit this unique circumstance and various requirements.
Confidentiality: Some case studies in this portfolio are under non-disclosure agreements. As such, I have masked some information and recreated some screens to protect the confidentiality of the projects.
My Role: Competitive Analysis - UI Design - Buy Flow - Hi Fi Prototype
Problem
The current website does not offer an online trade-in affordability option. As this is the most requested offering for this type of product, it should be added at the product detail page and cart. In addition, there are some country specific requirements that are needed to be implemented as well as trade-in upgrades.
How might we implement a trade-in affordability option?
How might we include the various conflicting requirements from cross functional teams?
How might we bring awareness to the new affordability options prior to the PDP?
Solution
A plug-in design that is flexible enough to accommodate differing country requirements. This would ideally be in the product detail page and the checkout/cart page.
DESIGN PROCESS
DEFINE
Define pain points & identify the problem
RESEARCH
Competitive analysis & best practices
IDEATE
Create ideal buy flow and functionality
PROTOTYPE
Use existing style guide to create a prototype
DEFINE
Problem:
The current website does not offer a trade-in affordability option. As this is the most requested offering for this type of product, it should be added at the product detail page and cart. In addition, there are some country specific requirements that are needed to be implemented as well as trade-in upgrades.
How might we implement a trade-in affordability option?
How might we include the various conflicting requirements from cross functional teams?
How might we bring awareness to the new affordability options prior to the PDP?
RESEARCH
Cross-functional Team Requirements
Outlining the requirements of all cross functional teams is needed to make sure the trade-in flow includes all necessary features.
Trade-in Team Requirements
Remove all diagnostic questions
Accept all devices, regardless of condition
Apply the trade-in value instantly
Trade-in option at cart
Country Manager Requirements
Keep diagnostic questions
Require pincode as not all regions within the country are serviced
Trade-in delivery method: Deferred or Instant
Plug-in Vendor Requirements
New design mockups
End to end flow within functionality
Trade-in delivery method: Deferred or Instant
Competitive Analysis
Review similar websites in those countries for best practices.
IDEATE
User Flows
As a starting point I created an ideal trade-in flow that included trade-in at the PDP and also at cart.
PROTOTYPE
PDP Updates
Trade-in module is added in the pricing area that matches the styling of the configuration options. Pincode is a country specific requirement and should be entered at the PDP level in order to then select “Add trade-in” or “No trade-in” which activates the trade-in modal. PDP trade-in badging should also be included on all eligible products.
Cart Updates
Country managers and the trade-in teamsare requiring a final chance to add trade-in at the cart. This is a “last chance” effort to encourage the completion of a purchase at an affordable price. This shows up as a constant module under devices that are eligible for trade-in with related messaging.
Cart with trade-in
Cart without trade-in
CONCLUSION
Next Steps
Although there were some conflicting requirements for the ideal trade-in flow, specifically whether the trade-in value can be applied instantly or not, ultimately that will have to be the decision of the country managers. Same for the diagnostic questions, as the trade-in team wants to do away with it completely and accept all devices, that will have to be decided by the country managers.
At this point all the critical screens are complete and turned over to the plug-in vendor to start the development of the customized design. If there are any roadblocks or questions, I would iterate on the design at that point.
The overall learnings from this case study came down to managing and prioritizing conflicting requirements from cross-functional teams. We all ultimately want the trade-in affordability program to be successful and so everyone was willing to compromise on a solution.