US Bank
When I joined U.S. Bank in 2022 the sky was the limit and I had free reign on a fresh look for our platform.
Before I go into the journey, I’d like to explain the theme of this case study. The bank traditionally names teams after Marvel's Avengers. Since I primarily enhanced components that were presented to the Shield team, I chose to theme this project around Captain America. If you are in a rush you can jump to outcomes to see all we accomplished.
Mission
Enhance the usability and visual aesthetic of the commercial One Card application process for mid-sized businesses.
Previously, onboarding involved manual data entry and lengthy paperwork, taking up to 54 days to complete.
Discovery
The start of this project felt like bootcamp, so much to learn and not a lot of time to get everything sorted out. I decided to start with a heuristic analysis, and I quickly identified key UX pain points: inconsistent content, unclear calls to action, poor navigation, proximity issues, and accessibility concerns with font size and contrast. Pairing these findings with user feedback helped prioritize impactful solutions. I also found many in-development screens missing in Figma, causing confusion and hindering user flow discussions, worsened by a near-waterfall process adopted for speed, which limited design collaboration.
To address this, I led efforts to add missing screens and collaborated with the product team to create a new three-phase process: Content & Research, Development Collaboration, and Ready for Dev. Each phase had a dedicated Figma page, organizing designs by progress status. This clarified "ready for dev" screens, reduced back-and-forth discussions, and streamlined workflows.
The shift improved team efficiency, moved us toward an iterative design process, and fostered better collaboration, marking a significant win for the UX team.
Product evolution
I wireframed flows and aligned designs with the updated system, refining hierarchy, simplifying language, and improving navigation across hundreds of U.S. and Canadian screens. Key updates included better font size, weight, and contrast for legibility, and enhanced navigation to address user control issues. Post-implementation, the product team noted a "more professional" look, and the business team reported fewer issues in problematic areas.
Key Insights from Feedback:
Navigation: Users struggled to identify clickable items.
Control: Users wanted to skip questions and return later.
Role Flexibility: Account Owners needed to reassign roles.
Dated Design: The design felt inconsistent with the bank’s other pages.
Key Updates:
- Simplified paragraphs for better context, moving away from accordions.
- Removed card shadows, adjusted hierarchy, and embraced flat design for better visibility.
- Updated alt text for accessibility.Added a collaborators section for role assignment.
- Restructured flows, reduced steps, and allowed skipping questions for greater user control.
- Designed nearly 20 new components, with the vertical nav bar being one that inspiring adoption by other teams.
Teamwork
With the project moving at a rapid pace and numerous ad hoc tasks to manage, I developed a system to empower non-designers to update design files without disrupting components tied to our design system. I created WYSIWYG-style templates, enabling the content team to edit components with minimal oversight. While I’ve included a sample recreation in the video (original bank files couldn’t be shared), it reflects only a fraction of what I built. This approach saved hours for both the content team and me, fostering independent work and removing design skill barriers for non-designers eager to contribute visually.
A platform for all
Collaboration was key to ensuring inclusivity throughout the redesign. I worked closely with accessibility specialist Tracey Jackson to address design challenges and build a platform that prioritized accessibility. In the video, Tracey and I discuss our approach, highlighting key aspects of the design phase. While I can’t share all original screens, I’ve recreated some to illustrate our daily work. This focus on accessibility not only strengthened the platform but also reinforced the importance of inclusive design in every decision we made, ensuring a seamless and equitable experience for all users.
Production
New application sections launched with positive feedback from users and stakeholders.
Key feedback included:
- Navigation was clear, and accessible
- Collaborator view/edit was now easy to access
- Content is easy to read with no jargon
- "Skip for Now" was greatly appreciated by those who were working through the application at there own pace.
These changes addressed major pain points across the application. The project aligned with the bank’s design standards and demonstrated the impact of collaboration, persistence, and a user-centered approach in achieving both user satisfaction and business goals.
KPI’s & Outcomes
We aimed to transform commercial One Card onboarding into a seamless digital experience. Today, our team is recognized as a model of collaboration and efficiency, setting the standard on our side of the bank. Before my departure, our product owner highlighted key achievements in a stakeholder presentation, showcasing the impact of our work.
- Adoption Rate: Increased from 50% to 96% across the Corporate Payment Services pipeline, including bankcard and transportation.
- Processing Time: Cut down the average time from application submission to card issuance from 54 days to just 20 days.
- User Satisfaction: Exceeded our target of 90%, reaching a remarkable 98% satisfaction rate by October 2024.
On my last day I had a chance to chat with my team members, who expressed their appreciation for my efforts. I truly enjoyed working with everyone and made many friends along the way.
