The Settings interface, designed in 2009, was outdated and ADA non-compliant. It hindered basic tasks like password changes and account upgrades, lacked governance, and offered no reliable usage tracking.
As lead designer on the Platform team, I led a complete redesign. We implemented a new React app that streamlined task completion, improved efficiency for customers, CX advocates, and feature teams, and addressed accessibility and tracking issues.
1. Enhancing our product’s core would increase efficiency for business owners, accountants, and financial professionals, allowing them to focus on key tasks.
2. Implementing a design system would enable product teams to deliver settings features faster and with higher quality.
Many feature teams, particularly those with subject matter expertise, owned specific parts of Settings.
Cross-functional collaboration was necessary to understand product roadmaps, UX ripple effects, technical constraints, and customer support needs.
Communication and buy-in across product stakeholders were essential, particularly for external channel partners.
Uncovered functionality or breakage buried deep inside user flows were present.
To understand the landscape, scope integration strategies, and identify pain points, I audited our current state and 10 competitors. I uncovered at least 125 Settings pages. I found that navigation, consistency, find-ability, scan-ability, scalability were all in need of improvement.
To gain insights and buy-in, we interviewed 23 internal product owners from 9 teams. Conclusion was lack of clarity, inefficient navigation, too complex.
I conducted a two-part card sorting exercise. We got solid agreement to inform decision making on categorization.
1) Eliminate guesswork from settings for greater clarity. 2) Streamline navigation for a more concise and intuitive experience. 3) Empower users to confidently complete tasks and understand the impact of their actions.
Simplify, while improving find-ability and usability.
Informed by research, I made an application map to reflect the “ideal state”. The map inventory included sections, categories, objects, pages. This visual representation helped the team keep track and scope our work.
I explored and iterated upon many different interaction models, navigation ideas, and layout options which were reviewed extensively with the team.
The team landed upon two promising ideas I presented for considerations.
A focused modal experience was designed to be deliberately neutral to make it easier to theme for private label bank channels. Bank channel currently in discussions to move 100% to the new Settings
The new interaction and navigation models tested well with users.
All other pages were successfully migrated into SOLO. Several teams launched updated settings experiences within the new framework.
I created a toolkit in Figma that enabled other designers to create new Settings pages.
This enabled product teams to quickly design and build new Settings, with autonomy. To encourage adoption, we demo’d the new system during the product team all hands and consulted widely with others.
Break up the work to shorter achievable milestones.
Be on the lookout for ripple effects and communicate broadly.
Some things are out of my control, for example the design system progression and the technical constraints.
Questions of ownership should be answered early to ensure ownership and governance for the future.
CASE STUDIES
