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 
Director, Lead PD, 2 PD, PM, ENG

THE CHALLENGE

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

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.

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.

THE DISCOVERY

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

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.

THE SOLUTION

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.

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.

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.

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.

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.