A Fortune 100 financial services firm operates two platforms with overlapping bill payment features built from completely different design languages. The firm needed to migrate Platform B’s bill payment features using Platform A’s functionality before B’s vendor contract expired. The goal was to support the firm’s unifying platform strategy, while driving adoption on an outdated system on Platform B.
Sole designer orchestrating decisions across 2 platforms and 3 design systems
Performance & Quality
30-35% faster page loading by replacing legacy components
WCAG 2.1 compliance achieved across all pages
Business & Clients
20% projected enrollment increase in Platform B bill payment
Improved satisfaction for high-net-worth clients through late payment resolution
Design & Team
Established new pattern for mobile/web separation when constraints justify it
Influenced unified platform strategy through component decisions
When accessibility rules, business goals, and platform standards conflict: one solution can't satisfy them all.
Platform A’s core experience data tables were built with outdated technology that:
Didn't work with screen readers (inaccessible for clients with disabilities)
Loaded slowly and hurt the overall experience
The firm had decided to stop using it company-wide
What made it tricky:
I couldn't just copy Platform A's legacy design to Platform B. I needed to redesign how tables worked using modern components, while making sure the solution would work for both platforms and the future unified platform.
Mobile app design made it especially tricky. Platform A’s current mobile bill payment had a scannable layout with no horizontal scrolling. Our product team wanted to preserve this better experience. But Platform B's standards required horizontal scroll for tables in narrow screens.
The tension:
Accessibility vs. user experience: Accessibility rules prohibited hiding data when screens resize. This pointed us to horizontal scrollable tables, which was not the best user experience.
Business needs vs. design languages: Business wanted to maintain A’s current scannable table on mobile, while Platform B’s existing pattern required horizontal scroll across all screen sizes.
Engineering efforts vs. design directions: Engineering preferred one simple approach for both web and mobile, while one design direction might not solve all concerns.
Mobile app is built separately from responsive web, meaning we could use different patterns without violating accessibility rules that apply to responsive experiences.
Not perfect consistency, but optimizes for what matters most to each stakeholder group.
Map the constraints clearly:
Web responsive must show consistent data format for accessibility, horizontal scroll is required for design language
Mobile app (separate build) should be scannable format
Separate mobile app from web responsive:
Web responsive: Standard table with horizontal scroll (meets accessibility + Platform B standards)
Mobile app: Custom card layout for scanning while using the same component (meets business UX goals, minimizes engineering efforts, compliant as separate build)
Walking each stakeholder through why their priorities required different solutions
The pushback:
Engineering: "This adds unnecessary complexity"
Product: "Are we compromising the mobile experience we promised?"
Accessibility & Design teams: "Will this create compliance risk or future technical debt?"
I showed to my stakeholders that how the compromise delivered each group's highest priorities:
To Engineering: Showed that the standard table works for web responsive design (reduces overall complexity). Mobile card approach is a targeted exception where business value justifies extra work.
To Product: Explained accessibility constraints prevent scannable format on web responsive, but we can deliver it for mobile by treating them separately, giving them the better UX where it's actually possible.
To Accessibility & Design leaders: Demonstrated how separation preserves compliance (no data removal on responsive web) while mobile pattern follows established card component guidelines.
The result: Secured alignment from mobile teams, accessibility teams, product managers, and all three design system leads.
What I optimized for and what I gave up to get there
I separated mobile app design into a distinct workstream with different component strategies. It influenced how a unified platform team approaches mobile-first design and when to treat mobile apps differently from responsive web, which sets precedent for strategic exceptions when constraints and user needs justify them.
What this achieved:
Better mobile UX (scannable cards vs. horizontal scroll)
Accessibility compliance on web responsive
Alignment with Platform B standards where it mattered most
Business satisfaction on user experience goals
What I traded off:
Perfectly consistent patterns across web and mobile
Simpler engineering implementation
Slightly longer design timeline (two patterns instead of one)
What launched:
Web responsive with compliant horizontal scroll patterns (Platform A & B)
Mobile app with scannable card layouts (in production, launching soon)
Broader impact:
Demonstrated how to navigate conflicting stakeholder priorities through clear constraint mapping
Mobile separation approach adopted by other teams for similar projects
Built credibility and trust that extended beyond this project
Cross-system alignment: Building the hybrid design system early forced deep understanding of constraints and gave stakeholders concrete artifacts to evaluate rather than abstract concepts. This prevented costly late-stage misalignment.
Stakeholder navigation: Visually mapping conflicting constraints (accessibility vs. business goals vs. platform standards) helped stakeholders see tradeoffs clearly rather than arguing past each other. The mobile-web separation only worked because everyone understood why one perfect solution didn't exist.
Systems thinking: Understanding how design decisions ripple across platforms, teams, and future strategy is essential. It's not just about making things look good; it's about making decisions that work across organizational, technical, and strategic dimensions simultaneously.
