Transfer Money webpage redesign

Background information

Our company is the largest independent financial broker firm in the nation. Over 2,000 financial advisors manage 1.2 million investors with $1.4 trillion AUM. The company has several websites to conduct its daily business, and one of them is specifically for the investors.

Most businesses with an online presence recognize the value of building products and features to meet the demands of their clients. Our company has gotten consistent feedback from both advisors and clients to enhance our transfer money webpage to include features commonly found in other financial websites.

Business request

Our company's leadership team decides annually what features get development priorities. In 2022, allowing investors to set up their own future and recurring money transfers made the list. Jira stories were created and assigned to the various people needed to make it happen, including me.

My task seemed simple enough. Show how a user could perform these common methods of transferring money using our existing webpage. The problem for me wasn't figuring out how to design this, instead, I couldn't get past the fact that I hated the overall design of the page itself. I decided this page needs a redesign as well.

Initial observations

The first order of business, as requested by my design manager, was to develop a gap analysis. What did the designer before me turn in for development, and what did the developers build that's live in production today. To my surprise, there were a lot of discrepancies. In all fairness, our company's design department was still growing, so the development team had to make a lot decisions on their own before I got involved.

Design guidelines

With a deeper understanding of our Transfer Money webpage, its history, and what the company wants to see next, I formulated several goals to guide my exploration for the optimal design solution.

Competitive research

As with most projects, I began the process by researching other financial websites. How do they allow their users to transfer money? Does the design feel modern and look responsive? Is what I'm looking for easily detected? Are there any glaring UI issues?

Future and recurring transfers

Inital designs

Based on my observations, it appeared that our financial industry peers were allowing their clients to transfer money into their platforms in a variety of ways. This led me to think that tabs could be a viable solution, because it separated each transfer method and maintained an existing pattern in our website.

These designs were presented to the rest of my design team and a collection of other product owners in our department. Initial feedback was mixed. Admittedly, I wasn't sold on this design either. It still felt daunting, too complex, extra. Then I found Bank of America's app. I saw how a user could simply go to the transfer money section, fill out the form, and based on what I picked for dates, new fields like frequency, start date, and end date appeared. A dynamic, smart form! That was the answer.

Testing

This time, I was getting much more positive feedback in our collective teams review. There was some skepticism at first. The current transfer money webpage took 2 year to build. Was the company willing to throw away that work? The original design request was to fit 'future and recurring transfers' into the existing UI. How could I prove that the best way to achieve this goal was to display it in a freshly redesigned webpage? Time to test. I needed data to support my case.

ACH retirement

Industry research

In early 2023, allowing clients to securely contribute money to their retirement accounts became a product feature priority and my next assignment. As someone who routinely invests in several kinds of retirement accounts, I felt somewhat familar with what I would expect the experience to be like in our transfer money webpage.

Similar to how I crafted the future and recurring money transfer designs, this next project would start the same. I scoped out Corporate Insights and did some competitor anaylsis.

Initial design

I felt confident that the framework created from the previous design request would still fit for this design task. Same layout, just new input fields and dropdowns that would appear if a user chose to contribute money to a retirement account instead of a non-retirement account.

UX comparison

Even though adding new input fields and dropdowns to satisfy the business requirements were achieved, I still wanted to get the redesign approved for development. In order to do that, I created a graphic to share with leadership that specifically points out reasons why should do it.

Testing

To help support my theories, I turned to our research department for help. One of the members from their team helped me draft questions to ask the test contributors. We focused on usability, interface comparisons, and collecting qualitative feedback.

Key findings

Most users found it relatively easy to locate the status column and initiate a funds movement in the old design, but 13/15 testers generally found the new design to be more intuitive. It offers clearer labels and a more logical sequence for initiating transfers.

The single page layout was preferred by users who valued having everything in one view without switching tabs, but they also found it cluttered and overwhelming.

The majority preferred the separate pages seen in the new design. They appreciated the cleaner layout and less cluttered presentation. Users were able to focus on a single task at a time.

ACH banking transfers

In an exciting turn of events, our company began a partnership with a bank to extend banking services to our investors. All the fun banking services we're all used to could now be found inside our investment website. One of those special new features was banking transfers.

We were going to allow investors to connect their existing external checking account to their new internal one, as well as to their non-retirement accounts. That's great, but how and what would that experience look like?

Research

Back to Corporate Insights we go. How are other companies handling this challenge? Looks like there will need to be a step-by-step process to help the investor connect their external checking account.

Initial designs

This one ended up being tricky. I brought in another UX designer to help me out and she was very helpful. Together we explored many different designs, applying product owner and design team feedback along the way.

Testing

To help us get closer to the final design, we decided to run a full range of unmoderated preference tests.

Final banking transfer UI

We finally reached a point where the design was approved and ready for development. This step can be somewhat time-consuming, because we needed to illustrate the happy path, as well as many edge case scenarios and error situations. We also created mockups for all the various breakpoints we're asked to supply before shipping to the dev teams.

Working with the devs

This was quite an experience. Because there were 3 tabs in this transfer money experience, leadership decided to use 3 different dev teams to build this feature at the same time. It was a challenge for me, because each team was building and pushing code into QA at different times than the others. Keeping up with all their meetings and designing solutions for unique edge cases was tricky, but we made it through the fire. The banking transfers feature was built and ready for production!

Outside development company

After several months, my hope of getting some updated design for the transfer money page was revived. Our company hired an outside development team to take on a few projects, and transfer money was one of them. All my hard work paid off!

Working with new devs

The new dev team was excited to get started, and so was I. We met daily for 30 minutes to review any updates and answer questions. The development took about 2 months, and we've been getting a lot of positive feedback from both advisors and investors.

Upcoming design requests

Banking transfers and bill pay designs are ready to go. We're just waiting for the new banking section of our website to be pushed into production.

ACH retirement is back on my radar. Next quarter, we will dust off the ACH retirement design files and prepare them for development. Later in the year, I'll be focusing on repeating my design process to illustrate the steps a user will take to withdraw money from their non-retirement accounts. Stay tuned!