Matching User Choice To Organizational Need

Context

UpTogether's financial platform empowers individuals and families in low-income communities by offering direct cash investments and fostering financial stability through trust and community engagement. Participants qualify for these investments by engaging with the platform and designating a preferred payout method, such as an external bank account or a Stripe-issued virtual or physical debit card. However, some members have multiple payment methods on record without a designated primary method, resulting in undisbursed funds and IRS compliance issues. To address this, UpTogether needs to implement a system that encourages members to select a primary payment method to ensure timely fund distribution.

Scenario

Prior to this work the solution was that Members(Users) would receive a notification about a failed payment prompting them to update their bank account information. They often add a new payment method, thinking this resolves the issue. However, for the payment to be retried, they should have updated the initial ACH account. If they don't have access to an active ACH account, a manual request is needed for the ENG team to reroute the payment to the new method.

Proposed Solution

We broke the proposed solution into two main points:

1. Adding a New Payment Method: When members add a new payment method, regardless of the type, they will be asked if they want to make it their primary method for receiving UpTogether Funds, including pending and future payments. Confirmation triggers retries of failed/pending payments to the new account.

2. Updating an Existing Payment Method: (mainly for direct deposit): Members updating direct deposit details due to a failed payment will receive a prompt after saving the changes. This prompt will ask if they want to keep this as their primary method for receiving pending and future funds.

Our next step after identifying these points was to map our activities into specific UX categories that needed attention. We then mapped these activities onto a timeline and workstream.

Process

I had the team begin by analyzing the existing user flows to gain a deeper understanding of how users currently addressed the problem.

After such we decided to add more fidelity to the issue. Taking a step back we crafted a problem statement, which not only defined the Jobs to be Done but also enabled us to justify the project, explore existing solutions, create a launch plan, and formulate other open questions identifying interdependencies. 

In this problem statement, we established the success metrics, elaborated on the organizational impact, further refined the problem, and identified that there are three distinct flows for our systematized solution. 

The subsequent step involved drafting our design brief, where we outlined the following: Behaviors,  Assumptions, Key Constraints, Discarded Alternatives, References, Noteworthy Trade-offs, Surfaces Affected, Edge Cases & Idiosyncrasies, Not Doing, and Open questions.

The crucial part of the process was mapping out the new proposed user flows, as illustrated below. The green flow symbolizes the ideal user journey we aimed for, the purple flow represents an acceptable alternative path, and the orange flow signifies a less preferred but still viable route for users to achieve their goals.

Th Process of UI Design

On the matter of User Interface Design, and the design of the below screens, it should be noted we have consistently faced challenges when it comes color selection and the establishment of a palette for our organization. As a longstanding non-profit entity, we encountered pressure from stakeholders who insisted on integrating marketing brand colors and assets into our digital design. This external influence limited our creative control and what I believe to be industry standards. I would point this out as a point of tension because I am not sure our brand color palettes best communicate the security and trust of modern FinTech solutions.  

However we were able to find strength in design excellence through our implementation of a well-structured modular design system, which already associated specific colors with particular actions—such as the use of fuchsia to signify "progressing through the system". This commitment to Design Operations allows us to begin most projects at an mid-fi level of fidelity. 

We can dive into the UI representation of the three aforementioned "Green", "Purple", and "Orange" flows and follow their transformation from product hypothesis to a digital interface.

Here are Mid-Fi screen designs for the Green flow.

The green flow signifies the preferred user journey we aim to most encourage. Within this flow, users are presented with the option to select a primary payout method, specifically for direct deposit or ACH transfers.This direction guides users towards an outcome which aligns with our orgs preferences, as direct deposit payments are not only easier for us to process but also tend to have lower failure rates. However, it's important to note that we still offer users the freedom to make an alternative choice, despite our emphasis on the preferred option.

In the purple flow (pictured below) we apply the same guiding principles, which are intended for cases when users do not follow the green flow (The preferred pathway most aligned with our orgs needs.) This particular flow is not our first choice, primarily due to the higher likelihood of user errors and the increased number of steps required to achieve a successful outcome compared to the green flow. However, we maintain a hierarchical approach to gently encourage users to opt for direct deposit, even within this alternative pathway.

Displayed below are screens from the orange flow, which is the least favored user pathway within our organization. We aim to steer users away from this flow whenever possible because it involves the management of payout methods, a process that inherently introduces a higher risk of user errors or the failure to accomplish their objectives.

Below are screenshots the prototype we managed to develop to conduct User Testing and gather feedback from internal stakeholders.

Since our organization employs a mobile-first design approach, we first completed the above mobile screens before moving on to create the desktop versions pictured here:

Following input from users and internal stakeholders, we iterated on the design and subsequently passed on the design files to the engineering team for development. A significant portion of the feedback we received emphasized the need to establish greater differentiation between screens and processes within the flows to enhance user clarity and distinction.

Conclusion

In conclusion, our efforts in addressing payment method selection and user experience within UpTogether's financial platform have been substantial. We proposed a solution that involved adding new payment methods and updating existing ones to provide a smoother user experience. This systematic approach involved analyzing existing user flows, crafting problem statements, and mapping new user journeys with distinct flows: the green flow (preferred), the purple flow (acceptable alternative), and the orange flow (less preferred but viable).

Throughout the project, we grappled with challenges related to color selection and maintaining consistency with our modular design system. Balancing stakeholder preferences, design principles, and system constraints was an ongoing effort.

Our flows aimed to guide users towards selecting direct deposit as their preferred payment method to ensure smoother processing and reduce payment failures.

User testing and feedback from internal stakeholders played a crucial role in iterating on the design, emphasizing the need to create clear distinctions between screens and processes within the flows.

This process I feel is successfully demonstrates our commitment to user-centric design and our continuous efforts to enhance and optimize the financial platform to better serve our community's needs.