Spending + Budgeting

SB_1.png

Spending + Budgeting

Morgan Stanley Wealth Management introduces spending and budgeting tools for clients and reorganizes its navigation.

 

Team + my role

  • 1 UX/UI designer + researcher (me)

  • 2 Product manager

  • 1 Business analyst

  • 4-5 Developers


 

Today, most Morgan Stanley clients depend on their advisor to manage their finances. With the launch of Spending + Budgeting, Morgan Stanley would provide clients online tools for self-managing their day-to-day cash flow and budgets for the first time. We needed to determine an access point for these tools across the platform.

To kickoff the project, I facilitated a workshop with senior management across Product, Technology, and Design. We examined the existing ecosystem and ideated on placement options. This provided an opportunity for Product to share their business objectives, Technology to raise any considerations, and Design to lay the framework for building a user-centric approach. It was agreed that the decision would ultimately require user validation via research.

 
Morgan Stanley online navigation, 2017

Morgan Stanley online navigation, 2017

 
 

Understanding our users

Matching our users’ mental model was critical to the adoption of these tools. Their guidance throughout the discovery process would enable us to introduce these tools with confidence. Our aim was to validate stakeholder assumptions and ensure users' needs were met. 

We needed to collect feedback quickly. Which would mean sketching many concepts quickly. We assessed existing user data and explored other firms and banks to understand how they were framing these tools. Through this process we learned we were constrained from fully integrating the tools into our ecosystem given timelines. This limited the concepts and helped us narrow down placements for testing. We conducted research with 8 Morgan Stanley online users.

Each user was interviewed, asked to do a card sorting exercise and tested the concepts via prototype.  We wanted to understand how users categorize these tools, if they felt they were secure and where they would expect to find them. 

 
Card sorting tool and analysis of results

Card sorting tool and analysis of results

 
 

What did we learn?

  • Security was a concern for users, as a result, they did most of their budgeting manually

  • Conceptually, users grouped cash flow and budgeting related terms (e.g. ‘discretionary spending,’ ‘expenses,’ ‘net monthly income’) with banking-related terms (e.g. ‘transfers,’ ‘payments,’ ‘bill pay’)

  • Placing cash flow and budgeting tools with “Payments” and “Transfers” products would require a redesign of our site navigation

 
 

Establishing the user flow

Now that we had validation from users, we started to map essential user flows for key features of the product. How would users assess cash flow spending? Review their income and expenses? Set up alerts or provide access to their Financial advisor?

 
 

Creating a new landing experience

Once we had the flow in good shape we started to wireframe. A new landing page that would be created as a result of the redesign of our navigation. The new Spending + Budgeting tools would be bucketed with other cash management services provided to clients by Morgan Stanley. This included Payments, Transfers, and Send Money with Zelle. We sketched different approaches to the landing. Other designers on the UX team provided some input in our weekly peer review sessions. We worked with our tech partners to understand what was feasible given the upcoming release and pulled back from there. 

 
CFAB_Sketches.png
 
SB_Final.png
 

Launching the new experience

Spending + Budgeting along with the new ‘Pay, Transfer and Budget’ tab launched on Morgan Stanley Online and Mobile at the end of 2018. The landing page provides an overview of each cash management product and deep links to services within each.