Enterprise Component Redesign
View Live Page
U.S. Bank offers a wide range of financial products for Small Business Owners across web and mobile. However, inconsistent implementations of product comparison tables made it difficult for users to evaluate options clearly. To address this, I led a UX initiative to redesign the comparison table focusing on standardization, clarity, and accessibility.
As lead UX designer, I conducted competitive analysis and user testing to identify pain points, then defined a scalable interaction model that supports multiple product lines. I partnered with product managers, content strategists, and engineers to align the table with the Shield Design System, ensuring responsive behavior, and simplified financial comparisons.
Platform
Time
Problem
The existing global comparison tables on U.S. Bank’s website were dense, cluttered, and hard to navigate. Users struggled to identify key differences between products, leading to confusion, lower engagement, and missed conversions—especially on educational pages where clear decision support is critical.
Solution
I redesigned the tables to improve usability, clarity, and scannability. The updated layout simplifies content, emphasizes key differences, and improves readability—empowering users to confidently select the best product. This redesign drove stronger engagement and helped increase application conversion rates.
Research & Discovery
To uncover usability issues, I started with a heuristic audit of the original comparison tables. This revealed key problems like poor visual hierarchy, dense content, and lack of scannability. I then conducted usability testing with 15 Small Business Owners from diverse backgrounds. Participants were asked to compare accounts and identify the best fit for specific business needs. Consistent frustration around layout clarity and decision difficulty shaped the redesign strategy.
Heuristic audit uncovered structural friction
Clutter: Too much information presented at once
Lack of visual hierarchy: Important features are not emphasized
Poor Scalability: Users cannot quickly scan and compare key details
Inconsistent layout: Inconsistent alignment and grouping of information
User testing exposed key decision barriers
60% of participants said users struggled to locate key features due to the cluttered layout
Participants felt overwhelmed by the amount of text and often missed important details
The lack of visual hierarchy made it difficult to quickly identify differences between accounts
Design Process
To address these challenges, I redesigned the comparison tables to be dynamic, allowing users to select which items they want to compare. This approach is particularly effective when offering more than 5 products or services, as it scales well and provides flexibility without overwhelming users.
User-Controlled selection
Dynamic columns allow users to select which checking accounts they want to compare, reducing clutter and improving readability.
Improved scanability
Visual hierarchy: Key features are emphasized using color coding, icons, and consistent text alignment.
Sticky Headers: Column headers remain fixed as users scroll, reducing cognitive load.
Mobile optimization
The mobile version uses a tab-based layout for easier navigation.Feature columns are integrated into rows to maximize space and readability.
UX Specification & Developer Guide
This annotated handoff serves as both a user guide for developers and a detailed spec of the redesigned table structure—built for clarity, accessibility, and responsive behavior. It outlines how key UX improvements like sticky headers, semantic markup, and mobile-optimized layouts were implemented to ensure a consistent and scalable experience.
Mobile Optimization
To maintain clarity and comparison integrity on mobile, I preserved the horizontal table layout rather than stacking content vertically. Users can view two products side-by-side and scan feature rows line-by-line—mirroring the desktop experience but optimized for smaller screens. This structure helps users evaluate key differences without excessive scrolling or context loss.
A/B Testing Result
With the introduction of a new checking product (Business Essentials), I was tasked with redesigning the comparison table on U.S. Bank’s business checking page. The objective was to clearly communicate differences between the new and legacy products, guiding users toward the best fit with minimal confusion. This redesign also offered an opportunity to validate whether a more educational, mobile-friendly table could improve engagement and drive better application behavior. A/B testing results confirmed significant improvements in decision confidence, mobile conversions, and information retention—demonstrating the impact of UX on both comprehension and business outcomes.
Key Observations
Uplift in decision confidence
Users interacting with new version scrolled further and made faster selections, suggesting reduced cognitive load.
Higher conversion on mobile
The redesigned table improved tap targets and collapsible sections, driving a 4.2% mobile-specific lift.
Improved information retention
Participants in follow-up surveys recalled key account features more accurately than current version users.
Reflection
What I learned
Redesigning the enterprise component wasn’t just a UI challenge—it was a systems challenge. I learned that creating a scalable, enterprise-grade component requires much more than designing a better layout. It’s about creating clarity where there was fragmentation, and building infrastructure that multiple teams can trust, adopt, and evolve over time.
I deepened my understanding of:
Designing for Sustainability
Rather than solving for a single use case, I focused on building a flexible design model that could serve many teams—without diluting usability. It pushed me to think beyond visual patterns and into governance, adoption, and long-term maintenance.
Working Within System Constraints
Building within the Shield Design System and AEM required tight collaboration with dev teams and system owners. This taught me to approach limitations not as blockers, but as design parameters—and to treat technical alignment as a core part of design craft.
Challenges I faced
Competing Priorities, Distributed Teams
One of the toughest challenges was aligning stakeholders across different product verticals with different needs. Everyone wanted something slightly different from the table—and I had to guide the group toward a common, scalable solution without losing nuance.
Balancing Consistency with Customization
The core tension in this project was designing something both rigid enough to be reusable and flexible enough to feel product-specific. I ran multiple design explorations, gathering input from PMs, engineers, and content strategists to find that balance.