JPMAM Product Discovery

JPMAM Product Discovery

J.P. Morgan was on a mission to completely revamp its Asset Management site to help reassert themselves as a major player in the modern age of investing. My team at Moment was tasked with jumpstarting the initiative by redesigning the highly-trafficked fund explorer (FX) and product detail pages (PDP). These pages were redesigned to allow investors to quickly and easily discover, compare, monitor and deep dive into J.P. Morgan Asset Management's (JPMAM) various fund offerings.

I leveraged site analytics and user research to create wireframes and high-fidelity comps and worked with engineers to build the project to perfection across five breakpoints.

Agency
Moment

Year
2017

Team 
Yixiu Wu, Jasmine Lai, Pratima Mani, 
Mikel Mccavana, Taylor Poulos

THE CHALLENGE

Quick and easy discovery

Quick and easy discovery

The fund explorer is a comprehensive list of all J.P. Morgan's products that is meant to surface high-level information to help investors quickly find and compare funds. From there, investors can deep dive into each fund via the PDP for more detailed information.

But based on user research and site analytics, investors were having a hard time navigating and finding the information they needed on these pages, contributing to user frustration and drop-off. Our task was to redesign the FX and PDP for quick and easy product discovery. 

THE APPROACH

Definition by research

Definition by research

The product redesign was further defined by three research activities:

  1. Conduct audits (FX + PDP, competitive)
  2. Gather site analytics
  3. Gather user research

These methods highlighted the shortcomings of the two pages. The FX page, for example, displayed an overwhelming amount of data and filters without regard for a sensible hierarchy, making it hard for investors to do quick and easy exploration. The search bar and less important data points took center stage (ex: ISIN, rather than Ticker), while more important data points were often not available or hidden behind convoluted filters (ex: performance data points). Furthermore, the FX page was not fully responsive or mobile friendly—the mobile FX was merely a long list of funds without any data points.

JPMAM_old.1

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

JPMAM_old.2

The original fund explorer was made far too complicated with nearly 30 different column categories to choose from.

The original fund explorer was made far too complicated with nearly 30 different column categories to choose from.

The original fund explorer was made far too complicated with nearly 30 different column categories to choose from.

In our competitive audit, we chose to focus on industry-shaping, forward-thinking, user-centric competitors such as BlackRock and Goldman Sachs. We dissected their own FX and PDP pages to further define industry standards and optimal designs.

BR-FX

BlackRock FX

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

BlackRock FX

BR-PDP

BlackRock PDP

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

BlackRock PDP

GS-FX

Goldman Sachs FX

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

Goldman Sachs FX

GS-PDP

Goldman Sachs FX

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

Goldman Sachs FX

THE DISCOVERY

Insights and Opportunities

Insights and Opportunities

We worked closely with the business (while referencing user research and site analytics) to learn about investor needs, workstreams, and preferences. Several key insights emerged, which in turn created opportunity areas for our redesign:

FX Insight
Users spend most of their time navigating a small number of product categories.

FX Opportunity
Design a more usable experience by surfacing only six product categories.

FX Insight
Users were crippled by the overabundance of filter options.

FX Opportunity
Design a search and filter mechanism that most closely represents the mental model of our target users.

PDP Insight
Important data points are lost in a sea of information, creating a cumbersome experience for users.

PDP Opportunity
Allow for quick access to the most important data points and documents.

PDP Insight
Users are frustrated by the multiple steps it takes to get from one fund PDP to another.

PDP Opportunity
Design an omni-directional experience that caters to user’s workflow.

IDEATION AND ITERATION

Sketches, wireframes and prototypes

Sketches, wireframes and prototypes

Our design exploration began with timed sketching sessions focused on a specific feature or element of the FX or PDP. Then we presented our sketches to the team and pulled together working pieces from different concepts. From there, I created wireframes from our best ideas and began to iterate on information architecture and feature functionality. I created prototypes along the way and presented different design options to the client on a weekly basis.

FX sketches

FX header sketches

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

FX header sketches

FX wires

FX wireframe

The original fund explorer was made far too complicated with nearly 30 different column categories to choose from.

FX wireframe

FX_iteration (1)

FX sticky header iteration

The original fund explorer highlighted less useful information and hid or didn't support more important information and functionality.

FX sticky header iteration

THE SOLUTION

Responsive and modern design with robust functionality

Responsive and modern with robust functionality

For the FX header, six product categories emerged as the most useful to investors in their exploration. We also implemented a robust filter system in the header that allows investors to filter by important categories like asset class and share class, as well as popular distinctions such as high Morningstar rating. The header collapses into a sticky header on scroll that can easily be expanded so the user can change filters at any point.

Header_Desktop.5
Header_mobile.4
Header_mobile_sticky

Once we landed on the most important information to surface in our desktop FX table, we sketched out different ways of presenting all that data without overwhelming the user. We landed on a split table with two tabs, one for prices data and one for performance data. As most users visit the site through desktop, we were able to heavily scale back the FX table data on mobile to show only the essentials, fund name and nav price.

Once we landed on the most important information to surface in our desktop FX table, we sketched out different ways of presenting all that data without overwhelming the user. We landed on a split table with two tabs, one for prices data and one for performance data. As most users visit the site through desktop, we were able to heavily scale back the FX table data on mobile to show only the essentials, fund name and nav price.

The new design also has helpful viewing and sorting functionality to accommodate the different working processes of investors. Once filters have been applied, the user can toggle between a single, ungrouped list of funds, or a list which is grouped by asset class.

The new design also has helpful viewing and sorting functionality to accommodate the different working processes of investors. Once filters have been applied, the user can toggle between a single, ungrouped list of funds, or a list which is grouped by asset class.

Group_by_asset_class.2

For the PDP page, we implemented a card-based, modular design that is flexible and can be repurposed for every type of product. Key fund facts like NAV and Yield are prioritized in the header to improve scannability. For easy navigation, all fund information is broken out into category tabs, which remain sticky on scroll for desktop and follow an accordion pattern on mobile.

PDP
PDP_scroll
PDP_mobile

Visually speaking, the FX and PDP pages have a much clearer hierarchy and cleaner layout than before, utilizing the full width of the screen for more white space and larger type size. It was also important that our designs were ADA compliant for users with poor eyesight. Therefore, we used shape, not just color, to signify hover state or table row differentiation.

Translating the designs

Translating the designs

Once the FX and PDP for the U.S. site were complete, I worked with the business to translate our designs to J.P. Morgan’s other markets: EMEA, UK and APAC, all of which have different data points and legal requirements.

Building the product

Building the product

When it came time for development, I handed off detailed visual and functional specs to J.P. Morgan’s internal engineer team and consulted them throughout the UAT process. I also built out global specs based on our FX and PDP style and functionality to guide the redesign for the rest of the site.

Recent Projects

A Vision for Asset ManagementEmpowering investors for the future

ElectroluxHelping shoppers find, locate & purchase appliances

AspireSetting refugees up for financial success

Website design and content © 2019 Sam Szerlip.

Website design and content © 2019 Sam Szerlip.

Website design and content © 2019 Sam Szerlip.