Locations, locations, locations

Helping our customers find the most convenient location for in-store cash deposits

Defining the objective

The initial request from the product manager seemed rather simple—develop a feature enabling users to deposit cash into their account by utilizing the Netspend app to:

find a nearby participating retailer
generate a barcode for that retailer
and subsequently, have a cashier at the participating retailer scan the barcode to load the cash

The Netspend app already had a feature for finding nearby retailers to deposit cash, but the loading process was slightly different from this new method. Instead of scanning a barcode on the user's phone, the cashier would swipe the user's physical card to add the cash. My first instinct was to simply expand upon the existing feature—the challenge was that not all locations would offer the same service—meaning that a store could be one of three types:

only able to swipe card to add cash
only able to scan barcode to add cash
capable of both, swipe card and scan barcode to add cash

During the introductory meeting, I discovered another constraint: there were two different third-party services providing these reload options and they could not be integrated simultaneously. So we could either show barcode locations on the map or card locations on the map, but not both at the same time. This detail had substantial consequences on the strategy I had in mind. Instead of taking users to the map and presenting all locations at once, I needed to figure out the best way to display them separately while also making it a cohesive experience.

The reason for this request

The business reason for this new functionality is quite straightforward. We were starting to rollout digital-only accounts where the user is never issued a physical card, so this feature is crucial to those users since they can't add cash the traditional way. Moreover, we noticed that even users who had physical cards were starting to use them less and less—in fact, as of 2020, 25.7% of all point-of-sale payments were made using mobile wallets. This additional option would benefit those users as well, making it more convenient when you're out and about and do not have your card on you.

Research

One of the first things I did after learning more about the project was researching the current experience of the reload locations feature. The feature had not been refreshed in quite some time and it was easy to see that there was a lot that we could improve on.

Existing flow and some initial notes.

The more I dug in, the more I started to realize that adding on to this existing design was not something I would recommend. Instead, I decided to go back to the stakeholders and discuss redesigning a majority of the user interface to better align with newer patterns found on many of map applications today. The extra work was estimated to increase the original scope by six weeks, but all agreed that it was necessary to produce the best possible outcome for our customers.

Prototype & Test

After sketching out many different ideas and presenting those to the stakeholders, we all agreed to test the flow that immediately prompts the user to decide what type of reload they want to do (have the cashier at the store swipe their physical card or scan a barcode on their phone) before locations are seen on the map.

Sketch of the idea that we tested first.

Using the sketches as my guide, I then designed all the screens necessary, built out a prototype in Figma and connected with the UX researcher to create a test plan. Our main goals were to gauge the understanding and opinions around the barcode reload concept and discover any friction points that users had in the overall flow.

We created a scenario around a real life situation that a user could potentially come across. The script went as follows:

You have some cash that you’d like to load onto your Netspend prepaid debit card account. You don’t have your physical card on you right now, but still need to add cash to it. Generate a barcode that will let you load cash onto your prepaid account at a no-fee location.

Screens from the prototype that shows the happy path of finding a nearby location and generating a barcode.

Once the participant completed the task, we proceeded to ask them to find the closest reload location to their position – disregarding fees and method (card or barcode), we solely needed the nearest one. We then followed up with these questions related to their experience:

What do you think about the idea of loading cash in a store using a barcode on your mobile device rather than using your physical card?
Is there anything confusing about the idea?
Talk about what you like and dislike about this feature and why.
When looking for locations to load cash onto your card, which do you prefer: the list view of nearby stores or the map view? Why?

Results

Finding and using the feature to generate a barcode is easy for all users—every user was able to complete the task.
No one used the filter; rather, they tapped through options on the map. Could be because there were only a few locations on the map (i.e. more locations might prompt them to use the filter) or they did not notice it.
List vs. Map view preferences: Most users say that they prefer list view, but their actions indicate their preferences are dependent on whether they want to browse (map) vs. find a specific known location (list). When browsing, participants tapped through the map. When they needed to find a known location or there were too many options on the map, people used the ‘List view.’
It is unclear to users what will be sent to them when they tap on ‘Send to phone’ or ‘Send to email,’ and some (4 users) think that they will be sent the reload barcode (one user's comments: "Send what to phone, though? I don't know what it's sending...maybe the barcode."). Users are clearer on what ‘Get directions’ might do, with many thinking it would open Google maps.

Overall takeaway: Almost all users like the idea of loading cash with a barcode. They said it felt more secure than using your card and was very convenient for those times that you don’t have your card on you.

Iterate

After observing user interactions with the prototype, we collected valuable feedback and insights, leading us to polish and enhance the design.

A significant problem I observed was when we requested users to locate the nearest reload spot, irrespective of fee expense and reload method. Making the change from barcode locations to card locations (or vice versa) seemed inefficient, and I disapproved of having users retrace their steps to adjust this before moving forward. Therefore, I explored ideas where the option to make that change to be placed directly within the map/list view. After conducting further testing rounds with multiple alternatives, we agreed on utilizing a toggle, permitting users to rapidly switch between the two and fixing it to the bottom for enhanced accessibility.

Initially, the design forced users to revert a step for toggling among loading choices.

Switched to a toggle method for quicker and simpler visibility of both choices offered.

Other key enhancements

A quick introduction of the new feature—using a tooltip type of approach to help guide the user’s attention to the location of this new option
Altering the description of the overall feature for clearer user comprehension regarding the ultimate objective
Updated to use a more traditional pin you'd see on a map with icons that help reenforce what type of location it is
Updated icon for "use your location" to a more common icon seen in other map applications
Using a similar toggle to switch between map and list view
Cleaned up location details so the information is easier to digest
A more prominent message related to the active barcode which also served as quick way for the user to find and open the barcode when they arrived at the store