Connecting a bank account is a crucial step for customers before they can invest with WealthBar. As we scaled, various circumstances forced us to reimagine the optimal flow for users to connect.
Lead Designer (Research, UX, UI Design)
Tina Yiu, Product Designer
Travis Rempel, Engineer
Mel Delosada, Engineer
An uptick in cases of users using our service to commit fraud (money laundering) forced us to block our bank change feature and direct all client bank change requests through a rigorous manual staff verification process. The core problems included:
As part of our initial research for this feature, we roped in a few folks from our Client Services Team to create a service blueprint to better understand the problem. The goal of this was two-fold:
After creating the initial blueprint and conducting a few interviews with staff, we presented our findings to stakeholders. We outlined the issues that needed to be addressed and ran a workshop to define an ideal state for the workflow.
Final Service Blueprint — This map helped us identify key pain points that hindered our staff's ability to identify fraud quickly and accurately.
(1) Redesign the existing bank change feature to include a secure authentication process — allowing for automated approvals that doesn’t require staff intervention.
(2) Design an internal workflow feature that allows staff to track and complete client bank change requests.
Improving the client flow was important. After deciding on a third-party service that allowed users to securely and automatically connect their bank accounts, I began mapping out a new flow.
User Flow (Client) — Leveraging Flink's service, users would be able to verify their bank accounts using their own banking login credentials. This allowed us to auto-approve a large chunk of bank change requests.
After a few rounds of testing and iterating, I ended up with this final flow. Clients were now able to verify their accounts using a banking connection integration with Flinks.
Our staff needed an interface to help keep track of pending request tickets and a request details page that aggregated all relevant information associated with the request.
Content Modelling — Identifying key pieces of information for account validation and running a card sorting exercise.
We began by shadowing our staff as they conducted the manual verification process. This allowed us to identify key pieces of information that staff needed to validate and process each new request, we started card sorting to form a basis for the feature’s IA.
With a good sense of all the information the UI would have to accommodate, I began sketching some wires. This allowed me to begin mapping out different pieces of data to define possible flows and IA structures on each screen.
Earlier Iterations — Exploring different ways of displaying client data.
We ran usability tests with our client services team. This was particularly useful since we could test the design directly with the users who would be using this feature on our admin platform.
Testing Results — I ran two rounds of usability tests with staff to continuously iterate on the solution.
Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!
Staff Updates — Allows staff to leave comments and record a papertrail to meet our compliance standards.
After a few rounds of iterations, I refined the designs to this. This flow involves a work queue of pending bank requests and a request details page where staff can approve or reject each request.
Upon rolling out this new feature in early 2020, we began to see immediate results in both our back-end staff process, as well as the overall customer experience.