the project
Calastone is the transaction network the global funds industry runs on. I’ve spent the last five years inside it, designing two of its institutional products: ETF Servicing, used by HSBC, and Money Market Services, used by Federated Hermes and Allspring.
etf servicing
Runs the primary ETF market, the machinery where authorised participants and issuers create and redeem ETF shares. It captures orders, prices them, triggers settlement, and reconciles the share registry with depositories.
HSBC uses it to trade funds and share classes across their management entities in Europe, Hong Kong, Singapore, and the wider Asia region, integrating with industry rails like TA2000.
money market services
It’s a newer product in the same family, a digital connectivity layer for money market fund investing. It routes trades from treasury systems into fund providers, instructs banks to settle, delivers fund data back, and auto-invests surplus cash.
Four brand tenants run live on it today, mostly on the US public-sector side: Federated Hermes’ pools (Invest PA, MMDT, TexPool) and Allspring.
Both products are designed from one shared design system.
my role
I joined ETF Servicing in 2021 as one of two designers. The first year and a half was mostly upstream work: flow charts, BPMNs, process diagrams, wall maps. We were mapping the mechanics of primary ETF flows before there was a UI to design.
From late 2022 I’ve been ETF Servicing’s sole designer, working alongside three BAs, six backend engineers, one frontend engineer, and eight QAs.
When Money Market Services started in 2024 I came in as one of three designers. As roles shifted I moved into a lead position, translating rough concepts into the design system, driving new work including the multi-trading flow, and taking on the design system rebuild that ended up spanning both products. Through the rebuild I supervised a junior designer on component work and partnered closely with an accessibility-specialist frontend engineer through implementation.
Both products carry the full corporate stakeholder tree: PMs, delivery leads, product owners, product directors. The design decisions have been mine to own on ETF Servicing since 2022, and shared with clear scope on Money Market Services.
the problem
Institutional fund operations still run on Excel, email, and phone calls in more places than they should. Trades sit in inboxes. Exceptions get resolved by hand. Settlement dates get renegotiated over chat. Calastone’s bet across both products is the same: replace the manual layer with an automated network, and give operations teams a screen that shows the state of a trade in real time.
ETF Servicing took that on for the primary ETF side, covering creations, redemptions, settlement, and registry adjustments. Money Market Services took it on for money market funds, particularly US public-sector pools where the client base is large in number and thin on per-account operational bandwidth.
The design system rebuild came out of Money Market Services specifically. The DOJ’s 2024 ADA Title II rule requires state and local governments to meet WCAG 2.1 AA, including on services delivered through contractors. Larger entities had until April 2026, smaller ones until April 2027. Both dates were pushed back a year in April 2026, but our internal deadline was already fixed.
The pool clients on Money Market Services are exactly the entities the regulation targeted, and the design system as it stood could not meet AA without a real rebuild. It was a Figma library at v1.4 that had grown up around ETF Servicing, and it showed.
ETF servicing order entry screen
the work
the order detail view
Most of ETF Servicing’s real work happens on a single screen. From it an operator can amend charges, adjust the prefunding date and amount, change settlement dates, and read a complete change log of everything that touched the order. It’s the surface the whole product hangs off. It also had to do three things at once: stay dense enough for expert users, stay legible enough that nothing gets missed, and stay forgiving enough that a wrong click can be undone. Holding that balance was the craft problem I came back to for most of my time on the product.
order detailed view
four-eyes approval
In institutional fund ops, a second operator has to sign off on a first operator’s action before it goes live. That much is standard practice. What varies is the mechanics, and every firm has its own quirks. Designing it well meant sitting with client operations teams and walking through how approvals actually moved on their side, then sketching states and iterating the review flow until it matched. The client signed off on the final process, and it still shapes how approvals move through the product.
the IDP login
Money Market Services runs on Angular, but its login flow is built separately in vanilla JavaScript because it hooks into an identity provider sitting outside the main app stack. A login screen sounds like a minor surface. It isn’t. For an institutional product it’s where a client first sees the brand tenant they signed up for, and where a lot of the product’s trust posture either lands or doesn’t. Designing it meant handling brand variability, session and error states, and the specific handshake with the provider, none of it treated as boilerplate.
the design system rebuild
This was the systems-thinking spine of the last two years. The starting point was that v1.4 Figma library, which now had to bend around a second product with a different brand, a higher accessibility bar, and a faster pace of new screens. Forking it would have been the easy call. I drove a rebuild instead.
At the centre of the rebuild sits a full variable and token architecture in Figma. Colour, font family, font weight, font size, line height, spacing, scale, radius, all tokenised. Switching the variable collection re-skins the entire component library for a given brand tenant. On the dev side, per-brand config files carry the same tokens through into the Angular build.
The result is a library, currently at v1.7.X, that every brand tenant is designed from, with no forks: Calastone and HSBC on ETF Servicing, plus Invest PA, MMDT, TexPool, and Allspring on Money Market Services. The v1.4 Figma file was retired. Money Market Services runs on the new library in production, and ETF Servicing’s front end is next to migrate.
We ran it as tight iteration cycles between designers and engineers. Frequent syncs, design QA on every junior-designer component before it went to dev, and close collaboration with the WCAG-specialist frontend engineer through implementation. Once a component landed we tested it end to end together: keyboard navigation, WAVE audit, NVDA screen reader walkthroughs, pixel checks. Slow per component, fast overall. The WCAG work compounded instead of stacking up as backlog.
figma file from inside during the wcag work
multi-trading and the scoping tradeoff
Money Market Services’ bulk order screen is an inline form inside a table, where operators enter large batches of trades in a single pass, choosing participants and accounts, trade types, entry basis, settlement methods, and cutoff windows on every row. It’s the one surface where we accepted a tradeoff on WCAG AA.
Keyboard navigation, ARIA on non-table interactive elements, colour contrast, and font scale all met the standard. The screen reader semantics for a table of inline forms did not. We could have shipped something that looked like a solution. Instead we shipped the practical wins, documented the gap, and put the semantic work on the roadmap.
what shipped
- WCAG AA compliance across the design system, ahead of the original April 2026 ADA Title II deadline. When the deadline was pushed to 2027 and 2028, the system was already there.
- One component library for every brand tenant. No forks and no per-client copies, just brand-specific config. A new tenant can come online with a token change.
- Money Market Services shipped on v1.7 from launch. ETF Servicing’s front end still uses the earlier components, and migrating it is planned.
- A design-to-dev practice that produced accessible components on the first try. Slower per component, faster overall.
Happy to walk through specific flows or screens in more detail.
All screens show public data.
