Landscape Orientation Pattern
2023
Mobile
Design Systems Team @ Chase
Modernized the Chase Mobile experience by implementing responsive landscape support patterns, ensuring full AA/AAA accessibility compliance for users with fixed-orientation assistive devices and tablets.
Design Philosophy
Design Philosophy
Person first, user second:
Person first, user second:
I want to re-center the experience around a user's physical reality
I want to re-center the experience around a user's physical reality
Inclusive Growth:
Inclusive Growth:
I want to ensure that an experience remains structurally sound and visually balanced across an infinite array of viewports and devices
I want to ensure that an experience remains structurally sound and visually balanced across an infinite array of viewports and devices
The Problem
The Problem
Chase’s portrait-only constraint created critical accessibility barriers for assistive-device users
Chase’s portrait-only constraint created critical accessibility barriers for assistive-device users
Why?
Why?
Why?
Governance:
Governance:
Governance:
Eliminating WCAG 1.3.4 non-compliance to safeguard brand integrity
Eliminating WCAG 1.3.4 non-compliance to safeguard brand integrity
Eliminating WCAG 1.3.4 non-compliance to safeguard brand integrity
Protection for the Firm:
Protection for the Firm:
Protection for the Firm:
Defending against significant per-instance regulatory fines and legal exposure
Defending against significant per-instance regulatory fines and legal exposure
Defending against significant per-instance regulatory fines and legal exposure
Inclusive Growth:
Inclusive Growth:
Inclusive Growth:
Expanding our reach by removing interaction barriers for the assistive-technology community
Expanding our reach by removing interaction barriers for the assistive-technology community
Expanding our reach by removing interaction barriers for the assistive-technology community
My Role
My Role
My Role
As Senior UX Designer, I built the governance framework from the ground up:
defining the landscape standard, stress-testing the design system
resolving cross-team conflicts and
ultimately creating the documentation that every designer and engineering team across Chase would use to ship landscape across the app.
After a competitive analysis of a sample of 36 apps, only 4 supported landscape mode (11%). Among them, some utilized fixed-width layouts, while others employed full-width designs.
After a competitive analysis of a sample of 36 apps, only 4 supported landscape mode (11%). Among them, some utilized fixed-width layouts, while others employed full-width designs.
applications that were available on landscape at the time
applications that were available on landscape at the time
competitive analysis of 36 apps (within and outside of finance)
competitive analysis of 36 apps (within and outside of finance)
Ideation
Ideation
Ideation
With only 4 of 36 apps supporting landscape orientation, and only 1 within the financial sector, the competitive analysis revealed landscape orientation to be an industry blind spot.
There was no playbook to reference, which confirmed that Chase couldn't look outward for a solution. We would need to define landscape for Chase from the ground up, creating governance documentation that could scale across every business line and design team
With only 4 of 36 apps supporting landscape orientation, and only 1 within the financial sector, the competitive analysis revealed landscape orientation to be an industry blind spot.
There was no playbook to reference, which confirmed that Chase couldn't look outward for a solution. We would need to define landscape for Chase from the ground up, creating governance documentation that could scale across every business line and design team
Pressure Testing Components
Pressure Testing Components
Pressure Testing Components
Before defining any patterns, we needed to know what we were working with.
I collaborated with our design systems team to pressure test core components at full width and at a maximum of 575px (the breakpoint where mobile transitions to tablet) to assess their behavior under screen rotation and determine what was feasible before any design decisions were made.
Before defining any patterns, we needed to know what we were working with.
I collaborated with our design systems team to pressure test core components at full width and at a maximum of 575px (the breakpoint where mobile transitions to tablet) to assess their behavior under screen rotation and determine what was feasible before any design decisions were made.
Components tested in full width
Components pressure tested in 575px
The results were mixed.
Layout breakdowns surfaced across key UI elements.
Rather than designing around them in isolation, I partnered with the design systems team to triage each finding.
Some were resolved directly within the system, others were documented as known limitations.
Either way, every finding had a clear outcome.
This triage process became one of the first concrete outputs of the governance pattern itself.
The results were mixed.
Layout breakdowns surfaced across key UI elements. Rather than designing around them in isolation, I partnered with the design systems team to triage each finding.
Some were resolved directly within the system, others were documented as known limitations. Either way, every finding had a clear outcome.
This triage process became one of the first concrete outputs of the governance pattern itself.
Pressure Testing Pages
Pressure Testing Pages
Pressure Testing Pages
With the component landscape established, the next step was stress-testing at the page level. I started with our hub pages, prioritized based on product timelines, as the first pages slated for launch. Testing at both full width and 575px quickly validated my team's preference for 575px width, where layout consistency and readability held strongest.
With the component landscape established, the next step was stress-testing at the page level. I started with our hub pages, prioritized based on product timelines, as the first pages slated for launch. Testing at both full width and 575px quickly validated my team's preference for 575px width, where layout consistency and readability held strongest.
Home tested in full width
Home tested in 575px width
Wealth Plan tested in full width
Wealth Plan tested in 575px
With our width recommendation, the next step was aligning the hub page teams.
But what I anticipated to be a straightforward alignment, became the project's first major roadblock
With our width recommendation, the next step was aligning the hub page teams.
But what I anticipated to be a straightforward alignment, became the project's first major roadblock
Analysis
Analysis
Analysis
From assessment to action, I prioritized the critical gaps most likely to derail delivery:
Zero Precedent: No existing landscape documentation or architectural patterns in the JPMC ecosystem.
Component Volatility: Unpredictable Design System behavior under horizontal reflow.
Legacy Technical Debt: Custom components failing modern accessibility and responsiveness standards.
Viewport Fragmentation: UI elements and typography conflicting with hardware notches and system overlays.
QA's first fuzzy screenshot that I received during testing
QA's first fuzzy screenshot that I received during testing
🚨Roadblock: Full Width vs. 575px
🚨Roadblock: Full Width vs. 575px
When I presented to the hub page teams, I was met immediate pushback on two fronts:
Tech Constraint: The team hadn't migrated to the design system — 575px would require developers to set component widths manually, adding unplanned lift to their roadmap
Ownership Dispute: They questioned whether their team should be designing these pages at all, pushing responsibility back to us
When I presented to the hub page teams, I was met immediate pushback on two fronts:
Tech Constraint: The team hadn't migrated to the design system — 575px would require developers to set component widths manually, adding unplanned lift to their roadmap
Ownership Dispute: They questioned whether their team should be designing these pages at all, pushing responsibility back to us
We faced significant stakeholder pressure as teams vied for dashboard visibility.
I had to intervene to prevent a "wall of ads" experience: a cluttered UI that would have compromised core user task success and diluted our primary value props.
💡The Strategy:
💡The Strategy:
Facilitated a quad discussion to work through both concerns
Explored their design system migration timeline
Proposed a fixed-width container to be built by the design systems team, removing the need for manual configuration entirely
Facilitated a quad discussion to work through both concerns
Explored their design system migration timeline
Proposed a fixed-width container to be built by the design systems team, removing the need for manual configuration entirely
🤝 The Outcome:
🤝 The Outcome:
Phase 1: Launch landscape at full width, removing the immediate development burden
Phase 2: Introduce Size Classes for adaptive design, progressively moving teams toward the 575px standard
Phase 1: Launch landscape at full width, removing the immediate development burden
Phase 2: Introduce Size Classes for adaptive design, progressively moving teams toward the 575px standard
an introduction to size classes: our home page is regular width & compact height
an introduction to size classes: our home page is regular width & compact height
an introduction to size classes: our home page is regular width & compact height
App Testing
App Testing
App Testing
After agreeing on full width, our engineers compiled landscape for assessment.
Finally, landscape changes were in QA!
Here, I spotted and documented more gaps like platform differences, fixed components, & much more.
After agreeing on full width, our engineers compiled landscape for assessment.
Finally, landscape changes were in QA!
Here, I spotted and documented more gaps like platform differences, fixed components, & much more.
Example 1: Fixed Components
Example 1: Fixed Components
Static components such as headers, tabs, and search bars at the screen's top restricted scrolling space for landscape users. Zelle sticky (left) vs Zelle scrollable (right)
Static components such as headers, tabs, and search bars at the screen's top restricted scrolling space for landscape users. Zelle sticky (left) vs Zelle scrollable (right)
Example 2: Notches & Safe Areas
Example 2: Notches & Safe Areas
Android (left) supports many notch sizes, or lack thereof, resulting in the addition of a black box. In contrast, iOS (right) offers safe areas where content can be placed but should be avoided.
Android (left) supports many notch sizes, or lack thereof, resulting in the addition of a black box. In contrast, iOS (right) offers safe areas where content can be placed but should be avoided.
Defining the standard
Defining the standard
I translated those insights into a comprehensive set of landscape guidelines covering iOS and Android patterns end-to-end.
I translated those insights into a comprehensive set of landscape guidelines covering iOS and Android patterns end-to-end.
The guidelines were only the beginning.
From there, my role shifted from maker to mobilizer:
Scaled the standard — presented the guidelines to 500+ executives and designers across Chase
Refined through feedback — fielded inquiries from designers and iterated on the guidelines accordingly
Enabled delivery — supported product and development teams through active project launches
Governed implementation — reviewed engineering demos, proofread designs, and authorized work before it shipped
Built capability — conducted training sessions to equip designers across business lines to implement landscape independently
The guidelines were only the beginning.
From there, my role shifted from maker to mobilizer:
Scaled the standard — presented the guidelines to 500+ executives and designers across Chase
Refined through feedback — fielded inquiries from designers and iterated on the guidelines accordingly
Enabled delivery — supported product and development teams through active project launches
Governed implementation — reviewed engineering demos, proofread designs, and authorized work before it shipped
Built capability — conducted training sessions to equip designers across business lines to implement landscape independently
Results
Results
Results
Landscape is now live to 87 million Chase users.
Since launching in February 2024, the experience has accumulated 780 million+ landscape page views and counting. If you bank with Chase, flip your phone and see it for yourself.
Landscape is now live to 87 million Chase users.
Since launching in February 2024, the experience has accumulated 780 million+ landscape page views and counting. If you bank with Chase, flip your phone and see it for yourself.
Reflections
Reflections
Reflections
Strong Alignment:
Working with a lean team across a firm-wide initiative reinforced that influence without authority is a huge design skill.
Research:
I would have advocated harder for even lightweight user research. Without it, decisions were constraint-driven rather than user-validated