A major bank, design system redesign
Kind
Internal IT infrastructure management tool
Year
2022-2026
status
Live internal system
Tools
Figma
solutions
Design system change, User research
The "After"
The final design is shown upfront — not to skip the process, but to give you the destination before the journey. The decisions that shaped every screen are laid out below.
The final screens are shown upfront — the reasoning behind them comes after.
The Problem
The overhaul was a much needed system requirement as the previous design was not designed to hold this many functions and features. So I decided to make some concepts and create a concept that would hold in the current functions and features and let them grow to address the elephant in the room.
The starting point wasn't a Figma mockup, but the product as it actually existed in production. UX feedback was positive; users understood the flows and completed their tasks. But the UI was a different story: "when is the new design coming?" was a consistent signal across all of the user base. That signal became the brief.
The Process
Every component had to be aligned with the front-end engineering team, who needed to assess the implementation cost before anything could move. That assessment surfaced a longer-standing tension: the engineers had been pushing for a front-end refactor for a long time, and the redesign was a natural opportunity to finally do it.
That created a decision point, that sounded as "fold the refactor into the project scope and do it properly", or cut scope, ship faster, and give upper management something visible sooner. It wasn't solely my call to make. In the end, the engineering team and I negotiated a middle ground: a partial code rewrite, scoped specifically to the parts of the codebase that were affecting interface load times. The redesign moved forward, the engineers got meaningful technical debt off their plate, and the timeline stayed defensible.
The process began with one designer and no reliable AI assistance — this was mid-2025, when the tooling hadn't caught up with the workflow yet. Every component, every decision, every alignment session was handled manually.
I ran a series of component-by-component feasibility reviews with the engineering team — each element was assessed for implementation cost before it was locked in the design.
Every element's change must have been meticulously documented so that the engineering team knew what exactly was changing:
One thing that held up well through the redesign was the token architecture — it didn't need to change. That was a good sign: it meant the foundation had been right even when the surface hadn't. What I did extend was the coverage. The existing token set had gaps — states that were specific to this system and hadn't been accounted for. I added a few dozen new tokens to close them, the most notable being a system-specific declined state for the full button set. Small additions on paper, but they were the kind of gaps that had been quietly generating inconsistency throughout the UI without anyone being able to point to exactly why.
Of everything produced in this project, the token guide is what I'm very much proud of — not because of how it looks, but because of what it enabled. Engineers referenced it unprompted, came back with thanks more than once, and used it as a foundation rather than a constraint. When engineering says thank you unprompted, the design system is working.
Dark mode had already shipped with the previous version, but production revealed gaps that testing hadn't caught — backgrounds read as unfinished in a way that wasn't visible in Figma.
I used the redesign as an opportunity to address them systematically: rather than patching individual screens, I restructured the background layer around a four-level elevation system — analogous to Material Design's elevation model by giving every surface a defined depth and a consistent relationship to the layers around it. What had felt unpolished became intentional.
Component documentation went beyond Figma's dev mode. Each component was delivered with a visual state matrix — every state, every variant, every interaction laid out in a single reference frame. Engineers could see the full picture without reverse-engineering the file. The date picker alone covered seven states across four interaction contexts, with a separate diagram showing how elevation levels interact on hover.
