Problem

When users selected an individual account, most of their account information lived inside a slide-in panel that overlaid the screen from the right. It let people check information without leaving the page, but it also boxed important financial details into a cramped space instead of giving them a real destination. That made it harder to navigate, harder to understand account details, and harder to keep track of transactions.

Design Goal

We replaced the overlay with two dedicated pages: Account Summary and Transactions. Account Summary gave people a clearer place to understand the most important information about an account, and Transactions gave them a dedicated space to review and manage their activity. This was also the first project at Chase to migrate functionality already in production into the new Octagon framework, so beyond redesigning the experience itself, we were figuring out an approach that could inform every migration that came after ours.

Both pages were built on Chase's existing design system, MDS, which was only about three years old at the time. It gave us a strong foundation, but it had real limits once we got into some of Account Uplift's more complex use cases. Three components we leaned on constantly, the Tile Accordion, the List, and the Data Table, had already gone through several rounds of enhancement. Instead of piling more specific functionality onto shared components, the MDS team suggested we use those as a reference point and build custom versions for our product. That let us keep MDS's tokens and visual language while giving our engineers room to build what Account Uplift actually needed. That's how we ended up with our Custom Accordion, DIY Table, and DIY List, each one extending the system instead of working around it.

A design system is more than a Figma library of components. It gives designers a shared foundation, but product designers still have to establish the patterns, hierarchy, and interactions that turn those components into an actual experience.

Challenges

The biggest challenge was balancing real improvement against Chase's "do no harm" principle. Millions of people were already familiar with the existing experience, so we couldn't reinvent how they interacted with their accounts just because we were moving to a new framework. We had to figure out what should stay familiar, what could actually be improved, and what shouldn't change just for the sake of changing it, all while knowing that even small shifts in hierarchy or interaction could ripple out to nearly 67 million users.

On top of that, I was regularly working across four separate scrum teams, which meant keeping design, engineering, product, and stakeholders aligned was a constant part of the job. We had checkpoints throughout the project, design discoveries, IPBRs, desk checks, just to make sure decisions stayed aligned from early exploration all the way through implementation. None of this happened in isolation either. A decision made for one part of Account Uplift could become the pattern another scrum team would later be expected to use, so we couldn't just think about a single screen. We had to think about how every decision would scale across the whole account experience.

Mockups

Given the complexity of this project, I would regularly meet with 4 separate scrum teams and accessibility advisors to stay on track. We had design discoveries, IPBRs, and desk checks to ensure the designs stay on track. We also had four additional rounds of research to prove our designs were resonating with users, and that they could locate their transactions smoothly and perform necessary tasks.