The initial request from the product manager seemed rather simple—enable 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 retailer scan the barcode to deposit the cash
The Netspend app already had a feature for finding nearby retailers, 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. My first instinct was to simply expand upon the existing feature—but a few challenges popped up along the way that made me rethink that initial thought.
the reason for the request
The rationale behind introducing this new functionality was clear and multifaceted. First, we were in the process of launching digital-only accounts where users were not issued physical cards. For these users, the barcode reload feature became an essential means to add cash since the traditional method was unavailable to them. Additionally, our analysis revealed a noteworthy trend among users with physical cards—they were increasingly relying less on them for transactions. In fact, by 2020, a significant 25% of all point-of-sale payments were being conducted via mobile wallets. This new barcode-based option catered to both user segments, offering added convenience to those without physical cards and providing an alternative method for those who preferred to leave their cards at home while on the move.
The current state
Given my prior unfamiliarity with the 'reload locations' feature and realizing that it had remained unchanged for an extended period, I saw the value in soliciting direct user feedback. To gain insight into user perspectives and identify potential pain points, I conducted interviews with Netspend users who had experience with the reload feature. While the feedback was generally positive, it was apparent that there were recurring issues within the current design that warranted careful consideration and improvement. Although no participants expressed extremely negative sentiments, these consistent challenges underscored the need for enhancements in the existing system.
Existing flow and some initial notes.
Instead of trying to add on to what was currently there, I ended up proposing a redesign of the user interface to better correspond with contemporary patterns prevalent in many map applications today. Though the additional work would extend the initial scope, the stakeholders concurred that it was essential for delivering the optimal outcome for our customers.
Defining the objective
Drawing on the insights gathered from my research, I distilled the findings into a clear and concise problem statement that encapsulated the pain points our users were experiencing.
Problem Statement
Users are in search of a simplified and user-friendly in-store cash loading method, which is particularly vital for those without a physical card. The implementation of a barcode-based solution should not only address these pressing user needs but also eliminate any potential confusion typically associated with the in-store cash load process.
Furthermore, I began to construct a user persona, representing a distinct segment of our target audience by amalgamating insights garnered from past surveys and interviews with the fresh perspectives gained through my recent discussions with users. The key persona represented Maria, a restaurant server who heavily relied on cash tips and found it inconvenient to load these funds onto her prepaid account. By mapping out Maria's needs, frustrations, and motivations, we could ensure that the redesign of the reload location finder and the introduction of the barcode method would be highly user-centered and tailored to meet her specific requirements. This helped lay the groundwork for the creative brainstorming and prototyping that would follow, as we set out to devise solutions that truly resonated with our users.
Used as a constant reminder to stay attuned to the needs, frustrations, and motivations of our users.
Exploring ideas
Recognizing the importance of visualizing the two flows from a high level, I started this phase by created a simple flow chart. It provided a clear side-by-side comparison, enabling an understanding of how these two methods would seamlessly coexist and complement each other. This visual representation also became a valuable resource for communication within our team and with stakeholders, ensuring that everyone shared a clear and unified vision.
Next, I conducted several brainstorming sessions, making every effort to cultivate an open and inclusive atmosphere where every team member felt encouraged to contribute. I firmly believe that exceptional ideas often arise from diverse perspectives. Additionally, we conducted competitive analysis to draw inspiration and use it as a stepping stone for improvement.
As ideas flowed freely, I translated our conceptual brainstorms into tangible sketches that would allow us to take our first steps toward giving shape to our vision.
Throughout the brainstorming and sketching phase, we remained firmly committed to a user-centered approach. Every sketch, every idea, was evaluated against its potential to enhance the user experience. We continually asked ourselves how the barcode reload method would make life easier for our users. How could it reduce friction, improve efficiency, and provide greater security? This user-centric mindset guided our sketching efforts, ensuring that every design decision was rooted in meeting our users' needs and addressing their pain points.
Building the prototype
After exploring and sketching out many different ideas, I presented a selection of these concepts to the stakeholders. My aim was to find the direction that best aligned with our defined problem statement and user needs. Following these discussions and evaluations, we collectively identified what we believed to be the most promising path forward.
With this chosen direction in mind, I took the lead and designed all the screens required for the barcode reload feature—a crucial step in bringing our vision to life. Using Figma, I meticulously built out a prototype that faithfully represented the proposed user journey, complete with interactive elements that mimicked the actual user experience.
Screens from the initial prototype, showing happy path of finding a nearby location and generating a barcode.
Time to test
Simultaneously, I devised a test plan aimed at delving into user comprehension within this new flow and user interface. Our main objective was to ensure that the design we envisioned not only addressed the identified problem but also resonated with users, providing a seamless and intuitive experience.
What we learned
Finding and using the feature to generate a barcode is easy for all users—every user was able to complete the task.
List vs. Map view preferences: Most users say that they prefer list view, but their actions indicate otherwise.
‘Send to phone’ and ‘Send to email’ actions are unclear. Some users thought this pertained to the barcode itself.
The reload icon and color (the red made some feel that it was not open or inactive/error) was called into question by some users.
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.
Adjustments made
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. 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.
Final design
The final high-fidelity mockups for the redesigned feature represented the culmination of extensive research, ideation, and iteration, bringing to life the envisioned user experience in a detailed and visually compelling manner. Every element, from typography and color choices to layout and interaction design, was meticulously crafted to align with the project's objectives and the needs of our users.
Key improvements made:
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
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
A quick look at some of the user interface, before and after.
Mockups were created to encompass screens designed for tablet and desktop views as well.
In tandem with the mockups, I also created new components that would enrich our overall design system. These components served as the building blocks of the reload location feature and beyond, ensuring design consistency and scalability.
The outcome
The core objective of this redesign was to simplify and elevate the user experience, and the barcode option delivered precisely that. Users could now effortlessly generate a barcode on their mobile devices, walk into participating retailers, and load cash seamlessly. This convenience translated into a remarkable improvement in user satisfaction, with an impressive 92% of users expressing greater ease in reloading their accounts.
In summary, the introduction of the barcode reload option as part of the redesigned reload location feature yielded transformative results. It elevated user satisfaction, spurred increased engagement, and streamlined operations while positioning us strategically in a rapidly evolving industry. The remarkable metrics, with substantial increases in user engagement and satisfaction, underscored the overwhelmingly positive user reaction to this innovative feature, reaffirming our commitment to user-centric and future-ready financial solutions.