Designed for BNY Mellon Wealth Management, the web app’s new Portfolio Projection enables end-users to interactively project their portfolio value, set up cash flow events ahead of time, and check net worth.
Portfolio projections are essential for planning retirement, and help high-net individuals meet their long-term goals.
- Prepare UI detailed portfolio projections that will work best on iPad, both landscape and portrait orientations.
- Use sample data of end-users John and Jane, a fictional couple, that have various joint accounts. The UI should clearly show asset distribution.
- Provide net worth breakdown through a handful of given asset categories.
- Visualize portfolio value in real time by playing with retirement age settings.
To test new functionality, we wireframed two screens:
- Home, and
- Portfolio Projection.
… and updated the sitemap accordingly:
The wireframes test end-user interactions with the screens while performing requested tasks. Navigation is not subject to test in this case, and is not shown.
Home, or Dashboard, is a collection of tapable cards (or widgets) containing relevant information:
- Projected Portfolio Value,
- Allocation,
- Cash Flow, and
- Spending.
The cards are customizable, and can be reshuffled, made hidden, etc. These actions are available through conventional ellipsis menu (shown collapsed in the wireframes.)
For detailed view, end-user taps the appropriate card, and is taken to the chosen screen.
The app responds on changing the iPad mode—portrait or landscape.
Interactive chart is a central component here. For web, we recommend HighCharts®. It handles large amounts of data on-the-fly, and comes with many useful built-in features.
We opted in the scenario when data would be fetching slower than usual, and introduced a Retirement age slider with buttons above the chart to confirm/reset input. The chart would be re-rendered after end-user clicked Apply button. This approach dramatically decreases demand on data fetching, and renders the chart after input confirmation.
