Four steps to find out what your old phone is worth, and a request to make it three.
The flow had to ask people to grade their own phone, then ask for a device ID to check it against fraud and theft. Those are the two parts of any trade-in that feel like homework.
I designed both the wireframes and the full comps for the flow.
This is the logged-out state, where customers get trade-in values for devices they own. Switch each step between the wireframe and the comp. The notes beside each screen are the annotations from the wireframes, set as readable text. On a phone, scroll a screen sideways, or tap it to open the full page.
Comp: Initial
Comp: Initial
Comp: Enter device ID
Comp: Success
The value teaser sits blank when the page loads, then fills in the moment you pick a model. Memory size and color change it, and the condition answers change it again, live.
On the Find My Phone question, watching the number drop was meant to nudge people to turn it off. The spec flagged the teaser as a test opportunity.
Give people the number before you ask for the work.
Wireframe: Device selected
Comp: Device selected
The device ID check went to the last step. People see an accurate value first, so they have a reason to type the ID. If the value is too low to bother, they can skip the step and save themselves the trouble.
It works like a buyback counter that quotes you a price before it asks for ID.
Earn the ask before you make it.
Wireframe: Enter device ID
Comp: Enter device ID
Mistype a device ID and you don't get a dead end. A generic message covers an ID that can't be found. If the system finds a very close match, it shows the device it thinks you meant and lets you confirm it or re-enter.
An error message should do the next step for you.
Comp: Generic error
Comp: Near match
Every step refreshes inside a single section, so the page never reloads. The flow feels simple and fast, and nobody has to re-orient at each step. Steps change by slide or fade.
Change what's in front of people, not where they are.
Wireframe: Initial
Comp: Initial
Plot twist: the business asked for the condition questions and the device ID field on the same page. On paper, that takes the flow from four steps to three.
I designed it out as a wireframe and a comp, and the design team recommended against it. The wireframe says why: it adds complexity and clutter, and it creates a sense of difficulty that may cause abandonment. More fields on one screen reads as more work, and more work reads as a reason to leave.
The design team's recommendation shipped.
What the business asked for: one page
Wireframe
Comp
What I recommended: two separate steps
Comp: All answered
Comp: Enter device ID
Fewer steps isn't the same as less work for the person doing it.
This was near the end of my Verizon contract. It's the project that made me want to move from visual web design into UX and product design.