TRADE-IN
PLUGIN UI DESIGN
The Apple Premium Partner (APP) program relaunches reseller websites throughout various countries onto the Shopify platform. The full CX and UI designs are shown on a demo site where APPs can replicate bringing cohesion throughout the worldwide digital program. After the initial four MVP launches in September 2022, one of the most requested features from the APPs and regional managers is an online trade-in option. Currently, APPs have information online for trade-in, but the transaction must be completed in store.
The pilot solution will begin in India, but will need to be implemented across all current and future APPs from different countries with varying requirements. In addition, the Apple Trade-in program team and the plug-in vendor have requirements that need consideration.
My Role: Competitive Analysis - UI Design - Buy Flow - Hi Fi Prototype
Dates: Jan 2023 - March 2025
Problem
The current website does not offer an online trade-in affordability option. As this is the most requested feature, it should be added at the product detail page (PDP) 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 works within Shopify and is flexible enough to accommodate differing country requirements. This would ideally be in the product detail page and the checkout/cart page.
The plug-in vendor also agrees to redesign the UI to APP program specifications.
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 digital trade-in affordability option(in-store only). As this is one of the most requested features, it should be added at the product detail page (PDP) and cart. In addition, there are some country specific requirements that are needed to be implemented as well as trade-in process 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
As part of information gathering, I consolidated the cross functional teams’ feedback, requests, and/or concerns.
Trade-in Team Feedback
Remove all diagnostic questions
Accept all devices, regardless of condition
Apply the trade-in value (discount) instantly
Trade-in option at cart
Regional Manager Feedback
Keep diagnostic questions to mitigate fraud
Require “pincode” to begin as not all regions within the country are serviced with in-person assessments
Trade-in value method: Deferred or Instant
Plug-in Vendor Feedback
Need full end-to-end design mockups
If routing out, no option to customize vendor site
Trade-in delivery method: Deferred or Instant
Competitive Analysis
I reviewed similar websites in India to learn current and best practices. Common practice is to start the trade-in online, then a person visits the customer to physically assess the condition of the phone completing the transaction based on findings. This is a stark contrast to what the Apple Trade-in team wants to implement where the diagnosis process is eliminated completely. Currently Apple’s diagnosis process is a series of questions online, but in an effort to reduce friction, Apple wants to move towards accepting any phone in any condition.
IDEATE
User Flows
Based on the partner’s requirements along with the vendor they will use, there will need to be different versions for a basic, better, best implementation. This also included some of the requests from the cross functional teams. I presented these options to show what the flows would look like in practice but also the pros and cons of each implementation.
Basic
In some countries the only option is to link out to the plugin vendor’s website where the customer can complete the trade-in transaction on the old device. They must return to APP’s website to complete the transaction for new device.
Two transactions needed on two separate websites
Vendor site is a black box to complete transaction, non-customizable
High friction, taken away from APP site breaking the buy flow
Better
Includes module on the PDP that has identification, diagnostic, delivery method, and estimated value. The plugin vendor would allow a full customization to match the APP UI and offer the option to turn certain steps on/off.
Ability to toggle on/off steps in trade-in flow, customizable
Includes diagnostic and trade-in value before or after device is received/assessed
Many steps within trade-in flow
Best
The “best” option is similar to the “better” option in that we can turn on/off certain steps in the trade-in flow. Ideally there would be no diagnostic questions and the trade-in value would be applied instantly at checkout
Frictionless, customizable, and cohesive experience among all countries
One step to identify device, no diagnostic
Trade-in value is applied instantly before device is received/assessed
PROTOTYPE
Hi-Fi Prototype
I created the “basic” option at both PDP for desktop and mobile as some APPs will only be able to implement this option. This option links to the 3rd party plug-in site where the customer can complete the trade-in transaction.
I created the “better” option as the test pilot will take place with an APP in India and a plugin vendor that currently services that country. They require a pincode to check if services will be available in that area. Cart and Checkout screens for both desktop and mobile are also included here.
Trade-in Basic Option
Trade-in Better Option with/without “Pincode”
Cart and Checkout
Mobile PDP, Cart, and Checkout
Demo Site and Pilot Test Implementation
The solution has been implemented on the demo site which the APPs will mirror and implement onto their own Shopify site.
The APP will run the pilot on their site and the analytics will be reviewed. Live example
CONCLUSION
Next Steps
The overall learnings from this project 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.
Next steps will be to monitor the test pilot with the live APP and review the analytics. Based on those finding we would iterate and adjustments as needed.