Morgan Stanley

Morgan Stanley - Balances Redesign

Project Summary

Before and after redesign:

Discovery

Every day clients use the Morgan Stanley feedback portal to provide both positive and negative feedback on the design of our website and app. It’s my responsibility to synthesize that feedback, identify trends and present my findings to the rest of the team.

While digging through the user quotes, I identified a trend regarding the Required Minimum Distributions (RMDs) associated with IRA accounts.

Before I dig into the problem area, I first want to clarify what an RMD is.

Once you reach the age of 70.5, the government requires you to withdraw a certain amount of money from your retirement/IRA account each year (this is known as your Required Minimum Distribution). If you do not comply, you will be forced to pay federal tax penalties. It’s worth noting, this information isn’t just relevant to older users, as those who have inherited an IRA account must also comply.

Now that we’ve cleared up the boring stuff, let’s dig into what the issue is from a design perspective by taking a look at our current retirement account experience.

As you can see, it’s understandable why users are frustrated with the current experience given the fact that retirement account information is significantly harder to find, less detailed, and less visual on Morgan Stanley than it is on our competitor’s platforms.

Through the user feedback and brief competitive analysis, we learned we had an opportunity to improve the experience for retirement account holders by giving users access to additional IRA account data (such as RMD information) while making the existing data more discoverable, visually appealing and robust.

After identifying the opportunity, it was time to begin the UX process by addressing 4 main points:

Fortunately for us, this project didn’t require much preliminary research as we had already identified the problem area through our user feedback portal, and Morgan Stanley has pre-defined personas for us to use courtesy of our research team.

We decided to use Jim as our persona, as he’s a self-directed user who prefers to not rely on his financial advisor. This is the exact type of user we’re always designing for on the Client Data Financials squad, as our ultimate goal is to improve the user experience while reducing client reliance on our financial advisors by equipping users with as much financial data as we can.

Using our insights from the user feedback as well as our persona, we were able to craft a design strategy.

Once we had a strategy in place, we had to figure out which data points to show retirement account holders in order to help them quickly make informed decisions.

Fortunately for us (again) Morgan Stanley has an internal tool built specifically for Financial Advisors. In this tool, they have a section dedicated to retirement accounts which is used to house data such as this.

While the internal Financial Advisor tool and the external client-facing tool aren’t exactly a 1:1 match structurally, we were able to leverage the foundation our internal team had laid down, as they had already sorted through the backend work that would be needed to present this info.

The three main overarching pieces of data that we were tasked with showing were there user’s Required Minimum Distribution, Contributions and Distributions.

Now that we knew WHAT we were designing and WHO we were designing for, we still had to figure out WHERE this this content would live.

We knew this data would have to go somewhere on the ‘Accounts’ page of Morgan Stanley online. However, the page is broken down into 7 different level 3 tabs, most of which could theoretically house our new retirement content:

To make matters more complicated, we also have two more tabs called ‘Summary’ and ‘Available Funds’ that exist on our Mobile app but aren’t available on Desktop:

And lastly, we were also challenged with the task of creating an experience that could work for all account types, not just retirement accounts. The thinking was that if we could create a flexible and customizable experience for retirement accounts, we could leverage that same pattern and apply it to other account types in order to elevate financial information specific to those types of accounts in the future.

In order to figure out where would be the best place for this new data, we began brainstorming potential locations and presented our options to the UX leadership team multiple times, continuously iterating on feedback until we found a place that worked from a user, business and information architecture perspective.

After rounds of iteration and feedback, we finally landed on putting the new retirement account information within the ‘Balances’ tab, knowing that we still had an opportunity to validate the placement in testing.

Before jumping right into testing, we needed to get started on the design itself so that users could react to both the visual and hierarchical aspects of the experience.

Leveraging business requirements, KPI’s, our UI style guide and UX best practices, I got to work on creating a page that intuitively elevates Required Minimum Distributions, Contributions and Distributions associated with retirement accounts.

Required Minimum Distribution design evolution

Contributions design evolution

Distributions design evolution

Now, if you remember from the previous section, our approach was to add this new info to an already existing tab called ‘Balances’. Unfortunately, most of the MS website hasn’t been updated in nearly 10 years, including the Balances page, so in order to make this experience work, we also had to update the existing content on the page.

Since we now had to redesign the Balances tab, we wanted to use it as an opportunity to address an outstanding issue on the page, as opposed to simply just updating the UI components.

The issue we wanted to address stemmed from the ‘Available Funds’ info displayed at the top of the page:

We currently use this space to display the users Available Cash, Available to Invest and Available to Borrow totals. When the user clicks on the tool tip, details regarding their available funds appear:

On the surface this isn’t such a horrible experience. However, through event level tagging analytics we learned that just 7 users click on that tool tip every month. That’s just 7 users out of tens of millions!!!!

This clearly wan’t acceptable, especially since one of our squad goals is to increase user engagement by intuitively displaying financial data.

In order to resolve this and provide users with easier access to Available Funds details, we were tasked with elevating this info to be more prominent on the page and easier to find.

Now that we had updated requirements, I went ahead and revised our strategic approach:

Next, I got to work on some concepts to help elevate Available Funds information.

Available Funds design evolution

Finally after rounds of design iteration, it was time to put our work to the test.

Although we have a research team at Morgan Stanley, the firm does a great job at empowering designers to be as involved as they want. As such, I was able to lead the research process by setting the parameters, writing the discussion guide, creating the prototype, and synthesizing the results into actionable insights.

Research: Round 1

Our main goal going into the first round of research was to find out:

1. If users think the RMD, Contribution, Distribution and Available Funds information is in an intuitive location

2. If users can easily process and understand the information we’re displaying by completing a few tasks

After analyzing the 27 research sessions, we compiled a few key insights and design implications:

After aligning on the key learnings and next steps with the business and leadership teams, I got to work updating the designs.

Research: Round 2

After revising the designs based on the first round of research, we chose to run a 2nd round of testing given the high visibility of this experience on Morgan Stanley.

In the 2nd round, we chose to implement A/B testing. We took our new concept of adding the ‘Retirement Details’ module to the ‘Balances’ page and put it up against the original concept of keeping retirement-specific information on its own separate level 4 tab. The reasoning was that users may not have noticed the secondary tab because we tested the screens in grayscale, and without color the tabs look like text.

This time around we also wanted to test Mobile, as that would undoubtedly play a factor in deciding which concept to go with.

Delivery

After making some minor updates and receiving approval from the leadership team, I got to work on delivering Desktop, Tablet and Mobile redlines as well as a final prototype to help show the developers how the experience should function.

At the end of it all we delivered screens that accounted for 12 different use cases, as well as hundreds of specs covering all 3 breakpoints.

Final Thoughts & Next Steps

This product was released on web in 2022. The mobile version will be released in September 2023.

As for the thoughts on the project as a whole, we originally set out to create an experience that:

• Intuitively elevated data

• Was easily discoverable

• Was visually appealing

• Worked for all 12 different account types, not just IRA accounts

• Was flexible enough to be used to help elevate data for other account types in the future

• Worked across Desktop, Tablet, Mobile, and most importantly was compatible with our mobile app

I strongly believe we successfully accomplished all of these goals. As the lead (and only) designer on the project, taking this work from just a few user quotes and a modal to a completely redesigned experience that our business team, UX leadership, and research participants are all happy with is genuinely my greatest professional accomplishment.