Designing a Mobile-First Investments Portfolio | 2015-2016
In 2015, MetLife customers were only able to transfer their investment funds through a paper-based system, resulting in high operational costs and frustrated portal users. Additionally, these customers were unable to view their fund's performance online.
​
Our challenge was to create a responsive portfolio management site that met user needs while working with very rigid business rules and technical constraints.
.png)
My Role
I led the team responsible for UX, Creative and Copy. I worked closely with the Product Owner and BA to create, prioritize and groom the backlog based on our research, data analysis and business goals. I also partnered with Development to ensure our ideas were technically feasible before we began detailed design.
Our team worked in four week design sprints ahead of development. We conducted usability testing at the end of each sprint to identify improvements that were added to the product backlog for future sprints. We also participated in the development sprints - providing support and user acceptance testing.
Understanding User Needs
Through interviews with customers and agents, as well as analyzing existing user data, we developed a personas for our target audiences.
We then created an investment journey map for each persona identifying triggers, moments of truth and pain points we could potentially alleviate and differentiate ourselves.
Given the technical constraints and business rules, we mapped out the online journey to transfer and manage funds, noting all the potential pain points that were currently unavoidable.
Fund Performance Report
Displays the performance of funds the customer selected over set time periods. The customer can add or delete funds within this view, toggle date ranges and click data points on the line chart to view more details.
​
Design Sprints
When the high-level features were agreed to, we worked closely with the Product Owner and BA to formalize and groom the backlog, working a sprint ahead of development.
​
We supported Development throughout the build by participating in their sprints and conducting user acceptance testing.
Feature Breakdown
Investments Home
Allows the customer to view their portfolio at a glance with recent activity and fund details prominently displayed.
Compare Funds
Allows the customer to compare the performance of funds in their portfolio over a period of time.
A flyout showing funds the user selected follows them down the page and appears upon select/unselect. This allows the customer to easily see their selections and make updates to their picklist. This feature is especially useful if the customer has a very long, scrolling list of funds and cannot see funds selected at the top of the page.
Fund Performance Report
Displays the performance of funds the customer selected over set time periods. The customer can add or delete funds within this view, toggle date ranges and click data points on the line chart to view more details.
Responsive Design
Each page was designed in tablet and phone views to ensure the best responsive experience across platforms.
Learnings
This is another MetLife project that went live after I left the company, so I'm unable to provide any measurable results.