Wisely by ADP
Members kept calling support to ask where their new card was. I designed a way to track it right in the app, and service calls dropped by 80%.
“Where is my card and when will it come?”
Our support team heard this question a lot. There was no way to check on a card order in the app, so members had to call, which was frustrating for them and costly for Wisely.
Card order status is a pretty specific feature, so I looked at how delivery and tracking apps show progress, from progress trackers to status cards.
At Wisely, we design around Sam, an archetype who represents a lot of our members.
The Wisely member
Financially insecure and often living paycheck to paycheck.
“Wisely is the only card I use to pay all my bills.”
Order status is part of a bigger self-service flow for replacement cards. Members can get to it from the homepage, or right after they order a new card.
While doing UX reviews with my development partners, I noticed a couple of places where the design could do a lot more for members.
The homepage had two competing actions, “Activate now” and “View card order status”, and they sat far apart.
DecisionI combined them into one main button that changes with the card’s status, so there’s always one obvious next step.
With some carriers, like USPS, we lose track of the card once it ships, so we can’t tell members when it’ll arrive.
DecisionI added logic that keeps moving members through the flow based on the card’s status, even when tracking goes quiet.
My product manager pushed back on these changes because we were up against a deadline. I really believed they mattered for members, so I set up meetings with product and engineering to talk through what UX reviews catch. There were definitely some rough patches, especially with a scrum team that was new to our review process, but we came out of it working together much more smoothly. Here’s the process we landed on:
Review and groom tickets with product and engineering
Create the user flow and design the solution
A Figma handoff page with specs and accessibility guidelines
Review the front-end code with the design team and make sure it matches the specs in the design handoff
Any UI discrepancy found in QA sends the screen back for UX review
The homepage changes with the card’s status, so members always see the one action that matters right now.
This page follows the card from processing to activation, gives members a heads-up about likely delivery hiccups, and nudges them to finish onboarding.
This project made me a better collaborator. I learned to explain and stand behind my design decisions, and along the way product, engineering and I built a better process for UX reviews and scrum planning.