( 01 )
Business Context
A Fortune 100 financial services firm needed to migrate bill payment features across two platforms before a vendor contract expired, while fixing late payment issues affecting high-value clients and driving adoption on an outdated system.
( 02)
My Role
Sole designer orchestrating decisions across 2 platforms and 3 design systems
( 03 )
Impacts
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
( 04 )
The Core Problem
When accessibility rules, business goals, and platform standards conflict and one solution can't satisfy them all.
The tension:
Mobile bill payment had a scannable, user-friendly layout with no horizontal scrolling. Product wanted to preserve this better experience. But Platform B's standards required horizontal scroll for consistency, accessibility rules prohibited hiding data when screens resize, and engineering preferred one simple approach for both web and mobile.
What was tricky:
Mobile table layouts also appeared in web panels — mobile decisions affected web patterns
Web responsive design (large to small screens) must maintain data consistency per accessibility standards
Platform B required horizontal scroll across all screen sizes
Business didn't want to compromise mobile UX quality
Every stakeholder had valid priorities that conflicted with others
( 05 )
My Strategic Approach
( 06 )
Navigating Resistance & Building Alignment
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?"
How I built buy-in:
To Engineering: Showed that standard table works for web across both platforms (reduces overall complexity). Mobile card component is 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.
Secured alignment from mobile teams, accessibility teams, product managers, and all three design system leads by showing how the compromise delivered each group's highest priorities.
( 07)
Key Decisions & Tradeoffs
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
( 08 )
Outcome
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
( 09 )
What I learned
Key takeaways:
On 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.
On 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.
What I'd do differently: Involve accessibility and design system teams even earlier — during initial component evaluation rather than after narrowing options. Their input would have surfaced the mobile-web tension sooner.
Systems thinking: Understanding how design decisions ripple across platforms, teams, and future strategy — is what differentiates senior designers from executors. It's not just about making things look good; it's about making decisions that work across organizational, technical, and strategic dimensions simultaneously.
DISCOVER MORE
