All projects Case study · Design exercise

Product design · Wealth management · Data-dense UI

Organised around the workday, not the data.

A relationship manager’s dashboard for a global investment bank’s wealth desk, rebuilt in four days. I had forty minutes with the live product over a screen share, and nobody to interview.

Type
Self-directed, for a senior design interview
My role
Everything: research framing, IA, UI, prototype
Platform
Web, used by relationship managers
Output
5 screens · 15 findings · 1 prototype
The new Overview screen: account header with net asset value, loan-to-value and largest FX exposure, a Needs your attention list ranked by client impact, Next 30 days of dated obligations, Allocation vs mandate bars, Movers today and Reference FX
The Overview: the one screen I added. Client name changed to Northstar, account details blurred.
01The short version

The screen they work in, not one they visit.

Relationship managers (RMs) open this platform first thing and close it last. The brief was to rebuild the RM-facing side of it for a wealth management desk.

The old layout was organised around the data.

I organised the new one around the workday.

There are no invented numbers on this page. The decisions are the story.

02What I was working from

Six screens and one account.

Screens I saw
6, over a live screen share
Accounts I saw
1
Documentation
None
Analytics
None
Product context
None
Domain knowledge
None. On day one I couldn’t have defined a fixed income product.

That last row matters, because the findings below came out of the instruments, not the interface.

03The problem

It followed the data model, not the day.

The things an RM checks first sat at the same visual weight as the things they rarely touch. But the sharper version of the problem only showed up once I read the account rather than the screen.

What the data said that the screen didn’t.

27%of gross assets sat in structured products, shown as a single line item. Structured products carry dated events (barrier observations, autocall dates, maturities). None of them appeared anywhere in the product.
58%of the portfolio was in one foreign currency, unhedged, on a dollar-reporting account. It showed up as one slice of a secondary pie chart, with no flag and no sensitivity figure.
15.5%loan-to-value on an account whose header read “Margin Account”. No screen showed collateral, headroom or utilisation, so the question that can cost a client money overnight meant leaving the platform.
21%of the equity book was one holding. Nothing flagged it. You had to read 38 rows and do the arithmetic yourself.

All four can be worked out from data the platform already held. None of them needed a new data feed.

And what was wrong on the surface.

The old layout, redrawn as a wireframe. I’m not showing the live product.
38equity rows with no sort, filter, search or totals
10FX pairs, each shown twice, for a portfolio exposed to 6
2percentage bases on one screen, both labelled “%”
2date formats on one screen
1truncated label, on the largest non-cash asset class
1column header in the wrong currency

That last one isn’t a design opinion. A profit-and-loss column was headed in dollars and filled in yen.

04Constraints

Real constraints, and a real clock.

  • 4 days, start to finish.
  • About 40 minutes with the live product, over a screen share. No hands-on access.
  • No real users, so no interviews and no usability testing.
  • A test environment, so some content was stale or placeholder. I noted it rather than designing around it.
  • Real banking data can’t be published, so the client name is changed and account details are blurred.
05What I did

In the order it happened.

1. Read the data before the interface.

Before touching the layout, I went through the actual portfolio behind the screens. The four findings above came out of that, not out of looking at the UI.

It also showed which asset classes the interface was failing. Structured products, fixed income and derivatives had all inherited the equity column set, which is why those screens looked empty.

2. Audited the hierarchy.

I sorted everything into two buckets: what an RM checks first, and what they rarely touch. Without users to ask, this was the closest I could get to their day. I leaned on how wealth desks work, and said so, rather than pretending otherwise.

That gave me 15 findings, ranked by what they cost the user rather than by how easy they were to fix.

3. Reorganised around the workday.

Density and grouping now follow the daily workflow, not the account structure. Alerts, drift and upcoming actions moved up to where the first glance lands. The rarely used things moved down, not out. Nothing got deleted just to look tidy.

The redesigned Portfolio Summary: asset and liability table, foreign exchange rates, a single allocation bar, and platform maintenance news moved into a side card
Portfolio Summary. The same information, with maintenance news moved to the side and the allocation reduced to one bar.

4. Kept the table dense, on purpose.

The obvious move on a cramped data grid is to add whitespace. I didn’t. An RM comparing 38 positions wants them all on screen at once. Halving the rows would have made the tool worse while making the screenshot better.

Same row height, same column count. What changed was alignment, number formatting, one value per cell instead of two, and a grid that sorts, filters and totals.

The grid wasn’t too dense. It was badly ordered.

The redesigned Equities holdings table: right-aligned figures, profit and loss in red and green with the percentage underneath, a subtotal row and pagination
Equities. Same density, different order, with a subtotal and a note on which currency the values are in.

5. Replaced the pie chart with a sorted bar.

A pie answers “what is the mix”, which the RM already knows. A sorted bar answers “what is out of line”, which is the reason they opened the screen.

The currency chart kept a circular form, but it leads with the number itself, because that one figure was the largest unhedged risk in the account.

Asset allocation as a bar chart, sorted from cash at 34.91% down to derivatives at 0.01% Currency allocation as a donut with JPY 57.68% written in the centre
Asset allocation as a sorted bar, and currency allocation leading with its biggest number.

6. Added one screen, and only one.

Every existing screen was about a single client. Nothing answered “which of my clients needs me this morning?” So I added an Overview, built entirely from data the platform already holds.

Everything else stayed where it was. I didn’t want to move things that hundreds of trained people already know how to find, on the strength of four days and no user contact.

Needs your attention: five alerts ranked by client impact, covering currency concentration, cash efficiency, structured product suitability, mandate drift and an expiring customer knowledge assessment Next 30 days: dated obligations such as an autocall observation, a coupon payment, a knock-in watch, a bond maturity and an FX forward settlement
On the Overview: what needs attention, ranked by client impact, and the dated events that used to live nowhere.
Allocation vs mandate: each asset class as a bar against a shaded permitted band, with how far it sits outside the band
Allocation against the mandate. The shaded band is where each asset class is allowed to sit.
06The system underneath

Taking inventory first.

The product had no linked text styles or published tokens. So before restyling anything, I inventoried what was actually on screen: type roles, spacing, colour and gradients, with usage names inferred from where each one appeared. The new components were built from that.

Components from the redesign laid out on a canvas: allocation cards, FX rates, pagination, a chart toggle, a maintenance news card, movers today, the login card and the currency donut
The component set.

TypeTwo families, two jobs.

Plus Jakarta SansPrimary UI

Aa Bb 0123456789

Ag 09Regular · 400Ag 09Medium · 500Ag 09SemiBold · 600Ag 09Bold · 700

Navigation, headings, controls, financial tables and dashboard metrics.

InterChart support

Aa Bb 0123456789

Ag 09Regular · 400Ag 09Medium · 500Ag 09SemiBold · 600Ag 09Bold · 700

Inside charts, allocation detail, legends and analytical notes. Never a second UI family.

Plus Jakarta Sans carries the product. Inter only shows up where the data gets analytical.
Role / usageActual-size specimenSizeWeightLine heightTracking
Page headingDashboard overviewOverview36 pxMedium 500Auto0
Editorial card headingPortfolio summary / newsPlatform Maintenance & News30 pxSemiBold 600Auto0
Workspace headingAsset and portfolio pagesEquities26 pxMedium 500Auto0
Priority section headingDashboard attention panelNeeds your attention26 pxSemiBold 600100%0
User / card headingBold 700 also used for the FX headingWelcome, Sarah16 pxSemiBold 600Auto0
Announcement titleMaintenance announcementsScheduled Platform maintenance – 30th August 202515 pxSemiBold 600Auto0
Navigation / common UIFilters, navigation and common copyClient Account List / Select Account14 pxMedium 500Auto0
Active / emphasised UIActive navigation and table emphasisEquities / 86,750,40014 pxSemiBold 600Auto0
Account / actionIdentifiers and CTAs40817263 / Go14 pxBold 700Auto0
SubtotalSummary rowsSubtotal · 12 holdings14 pxRegular 400Auto0
PaginationTable footer controlsRows per page13 pxRegular 400Auto0
Secondary detailSecurity IDs, dates and percentagesJP3520600004 / 20.07.202612 pxRegular 400Auto0
Table column headingDense financial tablesDescription / Value (USD) / Allocation %12 pxBold 700Auto0
Metadata labelAccount summary labelsAccount Number / Client / Portfolio Number11 pxMedium 500Auto0

Also recurring: 12 Medium for account metadata, 11 Bold for currency tags such as JPY.

The recurring roles, at actual size. There were no text styles, so the role names come from where each one appeared.

Net asset value210,159,046

Gross asset value248,791,208

Unrealised P/L−90,742

Loan-to-value15.5%

Dashboard value30 pxRegular 40024.2px−0.44pxThe tight leading is kept to single-line metrics. It isn't a default for multiline text.

Metric kicker10.5 pxSemiBold 60015.23px+0.735pxDashboard table headings share it with +0.525px tracking, separate from the 12px Bold table headings.

Exchange-rate data0.7002 / 1.428213 pxMedium 500Auto0

Emphasised data86,750,400 / 1.16%13 pxSemiBold 600Auto0

Allocation labelsCash / 34.91%12 pxSemiBold 60017.4px0

Big numbers stay in the product family, not a monospace. Negative P/L takes the performance red.
Role / usageActual-size specimenSizeWeightLine heightTracking
Chart note / valueFootnotes, values and percentagesNotes: Shows the allocation of assets with positive positions by currency.12 pxRegular 400Auto0
Currency labelChart currency labelsJPY USD EUR SGD HKD AUD12 pxBold 700Auto0
Allocation rowAllocation table detailCash / 86,856,365 (34.91%)12 pxSemiBold 600Auto0
LegendChart series identificationCash (34.91%) / Equities (18.57%)11 pxRegular 400Auto0
Category labelChart category labelsCash Structured Products Equities Money Market10 pxMedium 500Auto0
Chart percentageValue labels above bars34.91% 27.38% 18.57%10 pxSemiBold 600Auto0
Earlier chart headingAlternate, earlier chart treatmentAsset Allocation16 pxBold 700Auto0

USD 140,460,796 of gross assets in JPY. Unhedged. USD/JPY at 162.35; a 5% JPY move is ≈ USD 7.0m on NAV.

Inline analytical emphasisInter 11.5 · Regular 400 + Bold 700 · 16.68px line height · 0 tracking
Inter, kept inside charts and analysis.
Contextual treatments, kept out of the core scale 7 styles
Role / usageActual-size specimenSizeWeightLine heightTracking
Compact dashboard headingAlso Next 30 days, Movers today, Reference FXAllocation vs mandate18 pxSemiBold 60018.13px+0.125px
Event detailDated obligations on the dashboardUSD 106,250 to settle in cash account11 pxMedium 50015.95px0
Alternate portfolio valueA portfolio-card iteration, not the dashboard default248,791,20827 pxMedium 500Auto−5%
Sign-in titleAuthentication, scaled artworkNorthstar Wealth Management29.54 pxMedium 500Auto0
Sign-in supportAuthentication, scaled artworkSign in with your workplace credentials14.77 pxRegular 40019.69px0
Form labelAuthentication formUser ID / Password17.23 pxMedium 50024.62px−0.6%
Input textAuthentication formemployee0117.23 pxRegular 40024.62px−0.6%

The 18.13px leading on 18px headings, the −5% tracked 27px value and the fractional sign-in sizes all belong to their source screen. I kept them as measured instead of rounding them into the scale.

SpaceMeasured, not rounded.

  • 2px

    Metadata text stacks
  • 6px

    Metric value / unit
  • 8px

    Chart legends / bars
  • 10px

    Title / subtitle stacks
  • 13px

    Equities cell gaps
  • 16px

    Status icon / text
  • 20px

    Chart sections, hero

Gap isn't padding

Enlarged 3×. Padding runs edge to content; a gap runs item to item.

Make the smallest distances visible

Enlarged 4×. Bars are text-layer bounds. A 2px metadata gap stays 2px; it isn't rounded up.

Seven gaps recur, shown at 1:1. It's an observed core, not a 4/8 grid.
Recurring recipeT / R / B / L (px)Where
Segmented-control wrapper2 / 2 / 2 / 2Compact outer inset
Segmented-control option6 / 10 / 6 / 10Inner option padding
Status information card16 / 16 / 16 / 16Icon and text group
Chart card / portfolio body24 / 24 / 24 / 24Content inset
Chart table row12 / 24 / 12 / 24Header and data rows
Attention row11 / 14 / 11 / 14Modern dashboard
Event row9 / 14 / 9 / 14Upcoming obligations
Compact event tag1 / 5 / 1 / 5Micro inset
Insets read top / right / bottom / left. The specimens are enlarged; the labels keep the real values.
Older and scaled measurements, kept separate 11 values
ContextMeasured gaps (px)Where
Modern attention rows11Icon / content grouping
Older, scaled UI2.17 · 4.33 · 6.5 · 8.67Text stacks, sidebar info, label / control, radio / control
Older, scaled layout17.33 · 21.67 · 26Date controls, sidebar sections, filters / meta
Header only5.06 · 7.59Logo / language, profile / action grouping
Observed recipeT / R / B / L (px)Where
Modern movers table cell≈7 / 10 / 6.13 / 10The fractional bottom is an artifact
Older sidebar row10.83 / 17.33 / 10.83 / 17.33Scaled navigation
Older control8.67 / 13 / 8.67 / 13Date and select controls
Older currency badge4.33 / 8.67 / 4.33 / 8.67Equities currency marker
Older equities row17.33 / 21.67 / 17.33 / 21.67Dense holdings table
Older filter panel21.67 / 21.67 / 21.67 / 21.67Filter container
Older Go button8.67 / 15.17 / 8.67 / 15.17Account action

Fractional values come from older, scaled screens. They stay with their source instead of stretching the core scale. 0px is an intentional flush layout, not a spacing step.

ColourGrouped by job, not by hue.

Brand, surfaces & text

Supporting surfaces

Borders & outlines

Close neutral variants across iterations. Match the source component instead of treating them as aliases.

Text

Click any swatch to copy its hex. These are observed roles, not approved accessible pairs.

Positive performance

+1,607,869#0B7A4B30% tint in the dark hero

Negative performance

−7,631,257#C0243A30% tint in the dark hero

Warning / above guide

Above 40% guide#E0A030#9A5B00 at 40% in the dark hero

Dark hero support & attention rails

Event tags

Allocation chart categories

Earlier chart palette

From older asset and currency charts. Kept apart from the modern palette and the status colours.

Performance red #C0243A is not the brand's #D71133. Structured products share that same #C0243A, so signs and labels always travel with status colour.

GradientsOverlays, not a red scale.

Black scrim · linear

90% on the dashboard · 51% on login

0% → #000000 at 0α · 100% → #000000 at 100α

Charcoal fade · source-specific

70% on the dashboard ellipse · 90% on the older portfolio

64.11% → #1A1A1A at 100α · 100% → #1A1A1A at 0α. The angle here is indicative; each layer had its own rotation.

Login ambient grey · radial

24% paint opacity

0% → #717784 at 100α · 100% → #717784 at 0α, on the login pattern stroke.

Login button sheen · stroke

100% paint opacity

0% → #FFFFFF at 12α · 100% → #FFFFFF at 0α, on a 1.23px stroke over #0E1419.

The dashboard hero artwork: red translucent panels rising in a row, darkened toward the bottom by a black scrim

Image + native overlays

The architecture supplies the red.

The dashboard and login heroes are artwork with native scrims on top. No red-to-black stops were measured, so none are invented here.

Transparent stops sit over a checkerboard so you can see what they actually let through.

Observed, not prescribed: role names are inferred from use, measurements are kept as found, and older or scaled values stay with their source.

07What I can’t tell you

No users means no validation.

I can’t say this tested better, because I never tested it. The whole redesign rests on assumptions about how RMs work. They’re reasoned assumptions, but they’re assumptions.

There are no impact metrics here, on purpose. Everything above is what I found or what I built. None of it is what happened next, because nothing happened next. Making a number up would undo the rest of the page.

How I’d have measured it.

Since I can’t show results, this is what I’d have baselined before shipping anything:

Time to answer

Six questions clients actually ask, timed on the old build and the new one. The more telling number is how many of them mean leaving the platform at all.

Off-platform work

What RMs currently rebuild in Excel, and how often. Spreadsheets retired is the honest measure of whether the tool does its job.

Risk latency

The time between a limit being breached and the RM knowing about it.

Task confidence

Rated after each task. When a wrong number can reach a client, being sure matters more than being quick.

08What I’d do next

Put it in front of RMs.

  • Watch where they look first.
  • Check my “checked first vs rarely touched” sort against how they really work. I expect to be wrong about a few of them.
  • Find out what the two undocumented columns actually mean. I designed around them rather than removing them, but I was guessing.

Looking back.

Sorting by workflow instead of by data sounds obvious in a sentence. It took longer than a sentence to get right.

The strongest findings came from reading the portfolio, not the interface. I’d start there every time now.

Four days is enough to make real decisions. It isn’t enough to prove them.