Morgan Stanley is a global financial services firm operating in over 40 countries. Its over 80,000 employees advise about 3.5 million people and manage over $3.9 trillion in client assets.
Company
Morgan Stanley
Team
2 PMs and 15 Engineers
Timeline
1.5 years
Takeaways
Collaboration with PMs and Engineers
The Problem
Morgan Stanley’s Spending & Budgeting tool was outdated and had an approximately 38% drop-off rate. Financial advisors (FA) must walk customers through the product's process, so Morgan Stanley wanted to revamp the experience for its approximately 3.5 million clients.
The Solution
I designed an interconnected MVP Cash Flow and Expense feature that provides insights and a breakdown of Essential and Discretionary spending, decreases the (then) current drop-off rate, and attracts a new, younger customer from the E-Trade and Morgan Stanley merger. The tool was shortlisted for a Banking Award.
Prelude
The current design had a drop-off rate of 35%, with users spending less than 3 minutes on the tool.
The current Spending and budgeting experience had the Cash Flow Analysis and the Income and expense tool separated. The account and date parameters were not sticky, confusing users. Also, the transactions were only visible when the client interacted with Income and expense categories.
Final Design
Designed a cascaded tool that reflects the connected data in each tool.
I explore different hierarchies and interactions based on the Project Owners ‘ requirements and validate the designs through testing internal FAs and external potential clients.
Outcome
The launch of the Spending and Budgeting tool following the Morgan Stanley and E-Trade merger successfully introduced Morgan Stanley to a younger, moderate asset clientele. This strategic product extension not only diversified Morgan Stanley's client base but also enhanced user engagement, resulting in a 25% increase in user retention just three months after launch.
Design and Research
Timeline
3 months
My Contribution
Mapping Exercise, Personas, Competitive Landscape, Usability/ Concept Testing
Research and Design: Problem
The product manager had ideas to distinguish their products from competitors; however, there was no data to support these assumptions, which was a learning curve for the team.
Research and Design:: Outcome
Through the customer journey mapping and proto-persona collaboration with my PMs, I designed two directions to validate the experience. After testing, I shared the findings with my PMs and made the necessary adjustments.
01: Research and Design Process
Workshopping with PMs, I mapped out the user journeys and personas of the different consumers of the tool to align on a direction.
I learned that the tool has two primary users: one whose family is a loyal customer of the company and wants to establish more independence; the other user is from the E-trade merge who wants to manage his finances to save for future goals. Through a workshop that I designed, the PMs and I co-created user journeys and personas. I learned that Morgan Stanley wanted to improve these statistics and appeal to a newer generation of clients, such as the children of Morgan Stanley’s clients and young startup equity shareholders.
02: Research and Design Process
Reviewing the PM's current competitor list, I analyzed the competitor's features to help the team to prioritize must-haves and opportunities prioritize for the MVP.
Ultimately, the PMs and I believe that we should focus on the tool's standard needs to make it comparable to its competitors.
03: Research and Design Process
After the mapping exercise, I explored different interaction modals, and the team was keen on exploring a cascaded experience.
At first, I reviewed a two-page and one-page exploration simultaneously; however, as I continued, I decided to explore the cascaded experience further.
Preparing for Usability Test
The PMs were my experts on the consumers and specifically wanted certain tool features. I advocated for the users and persuaded my PMs to conduct user testing. We tested these concepts:
Assumption One: Product Usability
Will users understand the cascading interaction between the cash flow and income & expense sections?
Assumption Two: Time Intervals
What time intervals (by month or year) do the users share information on their spending and budgeting tool?
Assumption Three: Essential vs. Discretionary
How do users separate their expenses by essential and discretionary, and will this new feature make sense?
04: Research and Design Process
Considering the PM’s requirement in the design, I designed two directions for usability testing to validate assumptions.
My PMs strongly believed in the yearly timeline intervals with the ability to narrow down by month, and the business wanted the essential vs. discretionary feature to distinguish itself from competitors. Although I mainly was confident in the cascaded interaction and my PMs' assumptions, I wanted to validate the experience with real users.
Interconnected Experience
Separate Tools Experience
A/B Usability Test Outcome
From the findings, I design a deck to present to my PMs. We had to collaborate and compromise on the final design's features and experience.
Finding One: Cascaded Interaction
Five of the six users liked cascaded interaction. However, most did not understand how to return to the default state.
Finding Two: Time Intervals
Users default to their monthly analysis of their Spending + Budgeting and zoom out occasionally in time intervals of 3, 6, and 12 months.
Finding Three: Essential vs. Discretionary
Each user differed in determining whether the category was essential or discretionary. all users failed to find the specific category in the essential or discretionary category.
Collaboration with Engineers
Timeline
12 months
My Contribution
Agile Design and Build, Data Visualization
Research: Problem
For Build, I need to design a week ahead the engineers using Agile, annotating the experience and exploring data visualization solutions comparable to High Charts.
Research: Outcome
Working with another team that was Highchart experts, I designed an experience that meets engineering and WCAG AAA requirements.
01: Collaboration with Engineering Process
When designing the data visualization charts, I explored different ways to illuminate trends, variable changes, and comparisons. Working with engineers, I need to design with Highchart.
Highchart was the Data Viz component that we used. I customized my design and picked the best HighChart graph. The bar graph seemed harder to customize for the engineers; however, I needed the bars closer to show the comparison between money in and money out within a month. I resourced a Highchart expert from another team to help us estimate the build.
02: Collaboration with Engineering Process
To achieve WCAG AAA compliance for the product, I explored tables, textures, and colors. I collaborated regularly with Morgan Stanley's accessibility team.
We used Highchart as our data visualization component. I customized the design and selected the most suitable Highchart graph. Although the bar graph proved challenging for the engineers to customize, I needed the bars positioned closer together to compare monthly income and expenses effectively. To assist with estimating the build, I brought in a Highchart expert from another team.
Final Responsive Design
Cash Flow
Final Responsive Design
Predictive Feature
Based on research, I learned that users calculate their cash flow remaining in the month. We created a predictive feature for the Cash Flow—Current Month to distinguish ourselves from competitors.
Final Responsive Design
Time Intervals
.Based on user testing, I designed an experience that shows multiple time intervals: Current Month, Last Month, Last 3 Months, Last 6 Months, Last 9 Months, Last 12 Months, Past Year, and Custom Range.
Final Responsive Design
Cascaded Interaction
Based on testing, users do not know how to return to the default state, so I added a reset CTA to each graph.
Final Responsive Design
Expense + Income Flow
PMs still insisted on the Discretionary and Essential features despite the test results. I design an additional graph showcasing those data points. From testing, I also show the all-expenses graph first, allowing the user to select Discretionary and Essential data points.
Final Responsive Design
Transaction Responsive Design
Outcome
By collaborating with the PM and engineers, we designed an exceptional experience comparable to our competitors and provided access to Morgan Stanley for a new generation. In 2021, the experience was shortlisted for a Banking Award.
Lessons Learned
-
The Value of Usability Testing
To refine our designs, I advocated for validated research despite the lack of generative research for feature selection. Unfamiliar with user testing, Product Owners needed to see its value. I involved them in testing, presented results, and remained adaptable when findings conflicted with requirements.
-
Working with Engineers
During the Data Visualization process, the engineers preferred Highchart patterns, but these weren't always effective in communicating information. We also had to forgo responsive design for mobile, which concerned the engineers. This experience emphasized the importance of solid engineer-designer collaboration.
-
Leading A Cross-Functional Team
This was my first time leading a project requiring strategic planning and communication with the product owner. I gained experience in Scrum Agile, which contrasts with my previous agency teams' waterfall approach. The project significantly enhanced my leadership skills.