Cash Pickup Web Flow & Mobile App
UI/UX, RESEARCH, CONTENT STRATEGY
TIMELINE: 8–12 WEEKS | LAUNCHED: JAN 2016
Press: Yahoo Finance
The “Cash Pickup” feature allows Serve and Bluebird pre-paid card users to withdraw cash at any Walmart, as an alternative to using an ATM. In 2014, a large amount of tax season call volume regarded withdrawal limits that prohibited users from receiving their tax refunds in cash. By building cash withdraws at retail stores, we alleviate this pain point while also reducing call volume.
Along with a lead designer, front-end developer, and design manager, I held a co-creation workshop for the design team to sketch a user's potential journey, beginning with initiating a transaction, through picking up the cash at Walmart. We identified the three most critical moments in this journey: feature education, making a withdrawal, and cash pickup.
OUR KEY MOMENTS
Encourage users to adopt this feature by providing general information, such as fees, limits, and store locations.
Make a Withdrawal
Clean and clarify form, so that users can complete the transfer with ease and confidence. Communicate Ria’s role in this service to our users.
Streamline the experience between the online and in-store pickup by enabling users to easily access their pickup code.
Logic Map & Service Blueprint
After creating “successful transaction” and “canceled transaction” logic maps with a front-end developer, we made a service blueprint that outlined the user's key moments, channels, phases, user action, user mindset, server/API calls, and potential errors when completing a withdrawal.
Seeing the user’s key moments outlined in a service blueprint helped our team plan our delivery structure. For example, we foresaw that the “Making a withdrawal” key moment would be the heaviest tech lift, as many server and API calls would be made between our platform and Ria’s separate server, so we designed and delivered that piece first.
Looking at competitors such as Google Wallet, Transferwise, Square Cash, and others, we determined to use visuals to simplify information and user flow into clear, concise moments, while meeting our users at the key moments of their journey.
The team and I did field work at several New Jersey Walmart locations to get a feel for what a user might experience when sending and withdrawing cash at a Walmart MoneyCenter.
• Build empathy with our users during the initial purchase experience
• Learn about our users and their behaviors
• Understand the landscape of options presented to our users in all aspects of their lives
• Learn how competitor products work from
a user experience perspective
We learned we’d need to make the online withdraw process more streamlined, quick, and immediately digestible, because of long wait times at the MoneyCenter and unreliable machines.
Since the user action is similar to withdrawing funds or moving money, we decided to elevate this feature by placing it under a new “Withdraw Funds” section within the Pay & Transfer tab in the navigation. All of our main nav items in the mobile app launch directly into flows, so this feature was placed in the main navigation.
By leveraging as much as we could from existing platform patterns, we can make the transaction experience quick, focused, and simple for the user.
Sketching: Making a Transaction
After synthesizing the field work and competitive audit, the lead designer and I sketched our three key moments—beginning with the “Making a withdrawal” flow—for the web and mobile app.
Sketching: Feature Education
The three most important aspects of feature education were to clearly state the feature, clarify what other companies are in partnership for the feature, as well as communicate the fee and limit structure.
Sketching: Access Pickup Code
We wanted to make sure notifications were clear regarding successful transactions and that cash pickup codes could be accessed quickly, especially considering the user might have multiple active transactions. We also considered how could this screen work as a receipt.
Successful Transaction Web Flow
In leveraging existing platform patterns, the front-end developer and I began by polishing up our sketch directions and iterating on some quick visual mocks. Other flows that were designed: cancellation, pended scenario, and empty sets.
View Past Transactions
The web experience was extended to our mobile app, where we again leveraged existing patterns to help support the backend tech lift.
User Testing & Rapid Prototyping
As we completed each phase of the project, working prototypes were assessed in qualitative user testing sessions. I strategized testing methods based on what kind of user feedback we were looking for, then sat in on the day-long sessions, synthesizing takeaways and updating the designs per user feedback, and identifying potential opportunities within the design.
“It would be nice to have a way to save this without pulling out a post-it.” —User
As this feature rolls out, we’ll refer to our data to see how this experience could expand—for example, to users sending cash to other individuals.