Redesigning the Brokerage Portfolio Page for Syfe

Restoring user trust in a redesigned portfolio page by going back to what worked

Client

Syfe, Singapore-based investment and brokerage platform

Role

Lead UX Designer

Platforms

Mobile

The Problem

Syfe is a Singapore-based investment platform offering brokerage, managed portfolios, and wealth products. As part of a visual language refresh, the existing Performance page was replaced with a new Portfolio page built on the updated design system. The backlash was immediate, driven by three specific failures.

The graph showed only the period delta, not total portfolio value over time. Users could not tell whether their portfolio was growing. The Realised P&L metric bundled dividend income with proceeds from sold assets, confusing users who had not sold anything. A drastic shift in hierarchy, colour, and structure left long-time users unable to orient themselves on a page they used regularly.

The underlying problem was not aesthetic. It was a trust problem. Users rely on this page to make sense of their investments, and the redesign made that harder.

Key Design Decisions

Use the old Performance page as the structural foundation

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.

Fix the graph to show portfolio value over time

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.

Propose a navigation change and document it even when deprioritised

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.

Process

The starting point was a structured gap analysis comparing the old Performance page against the new Portfolio page, metric by metric and layout element by layout element. This established a clear picture of what users had lost, what was worth carrying forward from the refresh, and what needed to be introduced net-new.

To validate design directions and pressure-test assumptions, I reviewed how leading brokerage and investment apps present portfolio performance, covering both international platforms and apps within the Singapore market. Key areas of focus were graph presentation, metric hierarchy, holdings layout, and navigation structure. The analysis reinforced the case for Portfolio-first navigation and informed the decision to show total portfolio value as the primary graph view. The IA was rebuilt using the Performance page as the structural base, with new metrics from the refresh mapped in at appropriate points in the hierarchy.

Iterations

The bulk of the design work focused on three areas, each going through multiple feedback cycles: the graph format and what it should primarily communicate, the overview metric layout and how to present the Realised P&L clarification, and the holdings list structure. An early version of the graph retained the period delta as the primary view with portfolio value as secondary, but user feedback in internal reviews made clear that this was still the wrong hierarchy. The final version flipped it, with total portfolio value as the primary line and the period delta surfaced below as a supporting figure. The navigation restructure was also explored across several rounds of internal review before being deprioritised due to business constraints, with a formal proposal documented for a future phase.

Final Output

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.

Reflection

The most important lesson from this project was not about layout or metrics. It was about the cost of moving too far from a familiar experience without giving users the tools to reorient themselves. The original refresh introduced genuine improvements but underestimated how much users had internalised the old page. Change without continuity reads as confusion, not progress.

The navigation proposal is the unfinished thread. It was the right structural call, had stakeholder support, and was grounded in competitive evidence, but it arrived in the same conversation as a page redesign that needed to ship. Framing it earlier as a separate phased initiative might have given it a cleaner path forward without competing with a more urgent fix.