Mikel McCavana
JPM-Site-Thumbnail.jpg

J.P. Morgan Asset Management

1-iphone7mockup.jpg

J.P. Morgan Asset Management

 

Redesiging J.P. Morgan’s Asset Management product landing pages for a simplified reading experience and a modern look and feel.

 

UI Design / UX Design / Responsive Web Design

J.P. Morgan was looking to overhaul its Asset Management site, starting with the heavily-trafficked product landing pages. Moment was asked to spearhead the redesign effort.

The existing product landing pages were packed with useful information, but they were visually cluttered and lacked hierarchy. We needed to create a clean and modern reading experience that would entice financial advisors to stay engaged and learn more about J.P. Morgan’s fund offerings.

Working alongside another designer and JP Morgan’s internal development team, I designed a responsive product landing page that would quickly enable financial advisors to find all the information they needed – at any screen size. Check out the live site here.

Overview

2-laptop-tablet-phone-mockup.jpg

Defining

A previous project had resulted in an incomplete set of desktop-only landing page wireframes for just a fraction of the site’s more than 500 funds. Using these wireframes as a starting point, we identified the additional fund categories and data points that our designs needed to accommodate.

As each type of fund needed to display different information, we started by exploring low-fidelity sketches of a modular card-based design that would flexibly stack to support every possible grouping of fund information.

Exploring

3-block-model-Money_Market.jpg

After we ironed out the logic of the card-stacking system, we identified a subset of representative fund pages that would represent the full range of different card layouts across all funds. Then we created wireframes for each of those representative fund across mobile and desktop breakpoints

Expanding

4-Perspective-Website-Mock-Up.jpg

Refining

After our low-fidelity wireframes were complete, I took them into high-fidelity, creating a visual design that showcased the new look and feel of the Asset Management brand in a prominent hero banner at the top of the page.

To simplify the scanning experience for financial advisors, our design prioritized quick access to fund facts, performance data, and product documents.

An improved “jump to a fund” experience promoted product findability and encouraged lateral navigation across fund types.

The hero banner at the top of the landing page enabled the marketing team to upload custom campaign assets if a fund was going to be spotlighted in a marketing campaign.

5-MacBook-Clay-White-Frontal-Mockup.png

I handed off the detailed visual and functional spec to J.P. Morgan’s development team and consulted with them throughout the UAT process. Once development was complete, I helped QA the redesigned pages across multiple breakpoints before they went live.

Building

6-device-family-clay.png