Designing a portfolio page users can actually trust
Restoring user trust by going back to what worked, and building on it from there
Client
Singapore based wealth-tech platform
Role
Lead Product Designer
Platforms
Mobile
The Brief
About the Client
Syfe is a Singapore-based investment platform offering brokerage, managed portfolios, and wealth products.
Challenge
A visual language refresh replaced the existing Performance page with a new Portfolio page, and the backlash was immediate.
The graph showed only the period delta, not total portfolio value over time, so users couldn't tell if their portfolio was actually growing. The Realised P&L metric bundled dividend income with proceeds from sold assets, confusing users who hadn't sold anything. And a drastic shift in hierarchy, colour, and structure left long-time users unable to orient themselves on a page they used regularly. Users rely on this page to make sense of their money, and the drastic redesign made that harder.
Solution
Utilise the visual design of the previous version while retaining new additions such as the list of holdings and to display metrics that matter more to users.
The Process
Design Audit
I ran a structured gap analysis comparing the old Performance page against the new Portfolio page, metric by metric and layout element by layout element.
This gave a clear picture of what users had lost, what was worth keeping from the refresh, and what needed to be built net-new.
Competitor Research
To validate design directions and pressure-test assumptions, I looked at how leading brokerage and investment apps present portfolio performance, covering both international platforms and apps in the Singapore market. The focus was graph presentation, metric hierarchy, holdings layout, and navigation structure.
This pointed clearly toward showing total portfolio value as the primary graph view, rather than the period delta and it shaped which metrics actually needed to be shown to the user.
Information Architecture
The IA was rebuilt using the old Performance page as the structural base, with the refresh's new metrics mapped into the hierarchy at the right points.
Numbers that add meaning
The new version of the portfolio page prioritised metrics like Total Change for the selected time period on the graph, and additional metrics like Net Invested, Cash Balance, Unrealised P&L, Realised P&L, Dividends YTD and Pending Balance (amount held up in transactions). Tapping on a few of them would explain what the metric means.
I also looked at any other metrics that could be logically grouped with the metrics that were introduced in this version.
Explorations & Iterations
The graph should show Total Portfolio Value
The first change to the graph was to display total portfolio value as the primary line. The previous version and the visual refresh both showed the period delta, which didn't give the user an idea of what their portfolio was worth.
Making the graph richer?
I also explored plotting an additional line to depict the total invested amount on the graph. The objective was to show a visual comparison of how much money the user invested vs the current total value of their portfolio.
Although this could potentially add value for the user, and was also seen implemented by a few competitors, while pressure testing this concept, I realised that in an event of a user removing all of their principal amount and trading only with profits, the line would have to be plotted to show a negative amount. This would increase confusion for the user which is why I made the decision to leave out this visualisation as it could complicate interactions with the graph.
Rethinking the primary navigation?
Although not part of the initial brief, I explored restructuring the navigation to put the Portfolio page in a primary tab instead of buried in the Overview sub-tab, benchmarked against how other financial apps prioritize direct access to portfolio value.
It was deprioritized due to business constraints protecting the current navigation as a cross-sell surface, but I documented a formal proposal for a future phase.
Key Design Decisions
The brief could have been interpreted as: fix the new page. Instead, we rolled back the structural approach entirely, restoring the familiar information hierarchy and layering new metrics on top. Trying to salvage the new layout would have meant asking frustrated users to re-learn a page they had already lost confidence in.
The new graph shows total portfolio value over time with time-frame switching. The period delta was not removed. It was repositioned as a supporting stat below the graph. Users needed both pieces of information, just not conflated into a single visual.
Break out Realised P&L with proper labelling
The metric was separated into distinct figures for gains from sold assets and dividend income, with inline contextual explanation for each. The confusion was not about the data. It was about the absence of context around it.
The Portfolio page was buried behind the Overview sub-tab, treating the most important page in the module as a secondary destination. I proposed elevating it to a primary tab, benchmarked against leading financial apps where Portfolio-first navigation is standard. The proposal had support from the design lead, head of design, and senior stakeholders, but was deprioritised to protect the existing navigation as a cross-sell surface. It was formally documented for a future phase.
Final Designs
A redesigned Portfolio page for the Syfe Brokerage module on mobile, featuring a full portfolio value graph with time-frame switching, a separated and labelled Realised P&L breakdown, and a restored information hierarchy grounded in the familiar structure of the original Performance page. A Portfolio Analysis section and a navigation restructure were scoped and formally documented for a future phase.
