See the portfolio before investigating the details.
Performance, allocation, and transactions answer different questions. A useful overview lets people orient themselves first, then investigate a particular part of the portfolio without losing context.
People reviewing portfolio performance, allocation, and transaction activity
A UX reading of the supplied artifacts. The sequence below explains the design logic, not a verified chronology of research. Intended benefits and proposed tests are not measured outcomes.
The dashboard groups performance, allocation, and transactions as distinct information needs. This creates a basis for scanning before detailed investigation.
The 1440px desktop frame uses a 230px sidebar. Persistent navigation separates moving between areas from inspecting data in the main workspace.
The Figma page contains desktop, tablet, and mobile versions. The design task is to preserve important summaries and readable details as horizontal space becomes scarce.
A useful next test asks participants to explain a performance change and locate the corresponding transaction. A visually engaging dashboard still fails if the numbers are misunderstood.
1440 × 900 · Exact source frame, not a recreated mockup.
A downloadable screenshot is not available in this portfolio yet. Open the original frame, or load its Figma preview below. Figma may require sign-in or block embedding.
View the original screenGrouping related information allows readers to decide what needs attention before entering a denser transaction view.
Summaries can hide context. Date ranges, units, and comparison baselines must remain explicit.
The dark canvas and distinct panel surfaces create boundaries between navigation and financial information; cyan provides a recognizable accent.
Color alone cannot communicate gain, loss, or selection. Retain text labels, signs, and visible focus indicators.
Separate mobile and tablet layouts make room to prioritize content for smaller displays.
Compact layouts may reduce simultaneous comparison. Important values and transaction details must still be available without truncating their meaning.
Explore project presentations in Figma, without opening the working design file.
Portfolio performance, allocation, and transactions across three screen sizes.
Read the UX process & rationale