Matthew Finkhousen

Work

About

LinkedIn

Matthew Finkhousen

Matthew Finkhousen

Work

About

LinkedIn

JPMorgan Chase

JPMorgan Chase

JPMorgan Chase

Chase Mobile® Web View Integration

Overview

I led a streamlined approach to digital service design, enabling rapid development for the native app, enhancing chase.com mobile user experiences, and reducing maintenance down to a single source of code.

Role

Strategy

UX

UI

UXR

Prototyping

Objectives

Rapidly build and deploy features missing on the Chase Mobile app
JD Power published its first mobile banking report, highlighting that although the Chase Mobile app was the world's highest-rated banking app, it had essential feature gaps other banks had closed and that Chase customers saw as baseline. The report highlighted features that were already available online, but not available on the Chase Mobile app.


Eliminate bottleneck
Improve overall convenience through mobile and online channels, making banking seamless and accessible, no matter where a customer is.

Rapidly build and deploy features missing on the Chase Mobile app
JD Power published its first mobile banking report, highlighting that although the Chase Mobile app was the world's highest-rated banking app, it had essential feature gaps other banks had closed and that Chase customers saw as baseline. The report highlighted features that were already available online, but not available on the Chase Mobile app.


Eliminate bottleneck
Improve overall convenience through mobile and online channels, making banking seamless and accessible, no matter where a customer is.

Rapidly build and deploy features missing on the Chase Mobile app
JD Power published its first mobile banking report, highlighting that although the Chase Mobile app was the world's highest-rated banking app, it had essential feature gaps other banks had closed and that Chase customers saw as baseline. The report highlighted features that were already available online, but not available on the Chase Mobile app.


Eliminate bottleneck
Improve overall convenience through mobile and online channels, making banking seamless and accessible, no matter where a customer is.

Identifying opportunities

Chase experiences required both native and web builds

This was costly to build and maintain, and required product owners to decide if they wanted to build experiences for both web and native, or to choose a single platform to deploy to.


Lightbulb moment

If we could discover a strategy to reduce the feature gap and maintain consistency across the platforms, any future experiences could be developed on web and deployed within the native app, drastically reducing project scope and costs.

Cross platform audit

Drawing from previous audit experiences

I had led design across the native and web platforms, and knew there were significant differences between the two that we would have to reconcile and elevate. These differences meant it wouldn't be as simple as framing web pages within the native app.


To create a map of what was happening across both platforms that painted a picture of our UX and engineering opportunities, I completed a deep, thorough audit of the platforms that examined navigation patterns, competing architectures, and level of content details they provided.

Drawing from previous audit experiences

I had led design across the native and web platforms, and knew there were significant differences between the two that we would have to reconcile and elevate. These differences meant it wouldn't be as simple as framing web pages within the native app.


To create a map of what was happening across both platforms that painted a picture of our UX and engineering opportunities, I completed a deep, thorough audit of the platforms that examined navigation patterns, competing architectures, and level of content details they provided.

Drawing from previous audit experiences

I had led design across the native and web platforms, and knew there were significant differences between the two that we would have to reconcile and elevate. These differences meant it wouldn't be as simple as framing web pages within the native app.


To create a map of what was happening across both platforms that painted a picture of our UX and engineering opportunities, I completed a deep, thorough audit of the platforms that examined navigation patterns, competing architectures, and level of content details they provided.

Visual differences

I uncovered platform differences in components, typography, and color palettes. 


Components

Color and typography differed between a variety of components across the two platforms.


Typographic

Typography within the native app was not visually aligned to their web counterparts, and not AA compliant. Chase strictly adheres to AA standards as required by federal regulation.


Color palette

Color palettes were not aligned across the two platforms, evident on components, links, and body content.

I uncovered platform differences in components, typography, and color palettes. 


Components

Color and typography differed between a variety of components across the two platforms.


Typographic

Typography within the native app was not visually aligned to their web counterparts, and not AA compliant. Chase strictly adheres to AA standards as required by federal regulation.


Color palette

Color palettes were not aligned across the two platforms, evident on components, links, and body content.

I uncovered platform differences in components, typography, and color palettes. 


Components

Color and typography differed between a variety of components across the two platforms.


Typographic

Typography within the native app was not visually aligned to their web counterparts, and not AA compliant. Chase strictly adheres to AA standards as required by federal regulation.


Color palette

Color palettes were not aligned across the two platforms, evident on components, links, and body content.

Screen title differences

Native

Screen titles are displayed on the native header.

Native

Screen titles are displayed on the native header.

Native

Screen titles are displayed on the native header.

Web

Screen titles are displayed on a web inline modal header.

Web

Screen titles are displayed on a web inline modal header.

Web

Screen titles are displayed on a web inline modal header.

Navigational differences

I uncovered significant navigational differences between web and native platforms. I brought these findings to design and engineering leadership in order to identify potential solutions that create a unified method of navigation and result in a customer being unaware they were navigating between web and native pages on the Chase Mobile app.

Back navigation

Native

Interacting with the Chase Mobile app back arrow will return the customer to the previous screen.

Web

Interacting with the web inline model header back arrow will return the customer to where they began their flow. Interacting with the browser back will navigate the customer back to the previous screen.

Ending a flow

Native

Interacting with a Cancel/Done/Close button will take the customer back to where they began their workflow.

Web

Interacting with a Cancel/Done/Close button will take the customer back to the account dashboard.

Content differences

Content differed across the native and web platforms due to the web experience containing the robust, full-functionality of what Chase offers. The Chase web experience is designed to be used primarily on desktop, containing full content details and complexity.


In contrast, The mobile app is an on-the-go companion, with bite-sized tasks, simplified functionality, and less content density and details.

Principles and definitions

I crafted principles and definitions to establish a strategic solution that would enable Chase to frame any webpage within the native app, and for it to be indistinguishable from a native page visually and from an interaction standpoint.

Principles

Unified

Customers should not be able to tell that they’ve left a native environment.


Simple

Areas with a lot of functional complexity that don’t make sense to mobile users should be suppressed when possible.


Fast

Performance should be on-par with a native experience.

Definitions

Hero (fully native)

Chase defining experiences, such as Send money, Zelle, Pay card, view and search transactions.


Core (native +css)

Expected experiences, such as Edit email address, change phone number, update password, view credit score, FAQs.


Long-tail (css)

Non-core experiences such as terms and conditions, MVP experiments, temporary partnership promotions.

Hero (fully native)

Chase defining experiences, such as Send money, Zelle, Pay card, view and search transactions.


Core (native +css)

Expected experiences, such as Edit email address, change phone number, update password, view credit score, FAQs.


Long-tail (css)

Non-core experiences such as terms and conditions, MVP experiments, temporary partnership promotions.

Hero (fully native)

Chase defining experiences, such as Send money, Zelle, Pay card, view and search transactions.


Core (native +css)

Expected experiences, such as Edit email address, change phone number, update password, view credit score, FAQs.


Long-tail (css)

Non-core experiences such as terms and conditions, MVP experiments, temporary partnership promotions.

IA mapping

To ensure a seamless integration of web pages into the Chase Mobile® app, I documented the pattern differences between the two systems, providing recommendations that would achieve pattern parity and make web and native pages indistinguishable.

Pattern alignment

To ensure a seamless integration of web pages into the Chase Mobile® app, I documented the pattern differences between the two systems, providing recommendations that would achieve pattern parity and make web and native pages indistinguishable.

Component alignment

Typographic alignment

Release

I was able to quickly update and deploy the missing features that were highlighted in the original JD Power report, with no visual or interaction differences between natively built web pages, and the framed ‘hybrid’ pages.

I was able to quickly update and deploy the missing features that were highlighted in the original JD Power report, with no visual or interaction differences between natively built web pages, and the framed ‘hybrid’ pages.

I was able to quickly update and deploy the missing features that were highlighted in the original JD Power report, with no visual or interaction differences between natively built web pages, and the framed ‘hybrid’ pages.

Experience parity

Using the same source of web code, experiences on native and mobile web have typographic, component, navigational, and color palette parity. The only visual difference between the two is visual of the Chase Mobile app native header, and the Chase.com mobile web header.

Using the same source of web code, experiences on native and mobile web have typographic, component, navigational, and color palette parity. The only visual difference between the two is visual of the Chase Mobile app native header, and the Chase.com mobile web header.

Using the same source of web code, experiences on native and mobile web have typographic, component, navigational, and color palette parity. The only visual difference between the two is visual of the Chase Mobile app native header, and the Chase.com mobile web header.

Native

Web

Framed experiences

Using the established principles and playbook, other Chase teams were able to quickly create experiences using the framed approach, allowing them to deploy quickly, and maintain a single source of code.

Framed experiences

Design and deploy once

Chase lines-of-business can now decide on the products or features they want to deploy, build once, deploy on both platforms, and maintain a single-source of code. It opens new experimentation opportunities via Chase Mobile app, and significantly reduces budgeting of resourcing the native mobile design team.

Chase lines-of-business can now decide on the products or features they want to deploy, build once, deploy on both platforms, and maintain a single-source of code. It opens new experimentation opportunities via Chase Mobile app, and significantly reduces budgeting of resourcing the native mobile design team.

Chase lines-of-business can now decide on the products or features they want to deploy, build once, deploy on both platforms, and maintain a single-source of code. It opens new experimentation opportunities via Chase Mobile app, and significantly reduces budgeting of resourcing the native mobile design team.

Back to home