Emma Lawton
boldee_icon_268.png

J.P. Morgan

CLIENT: J.P. MORGAN ASSET MANAGEMENT
PROJECT TYPE: WEBSITE
ROLE: DESIGNER (AT PRECEDENT AGENCY) 


The J.P. Morgan Asset Management team needed a clean, functional design that could be rolled out across their UK and European sites and give the newly refreshed USA web presence a run for its money. 

The challenge

J.P. Morgan are one of the biggest names in finance. They approached us, after working together on a number of smaller projects, to re-skin their Asset Management site with a style that would take them into the coming years standing confidently, visually, alongside their American counterparts. Our experience of working with financial organisations told us that our major challenges in creating a clean, uncluttered new site would be finding a neat way to display the endless disclaimers and small print required by compliance and making the charts and tables which sat alongside them feel easy to digest. We'd also have to lean more towards typography as a visual lead as imagery would be hard to come by.

The solution

As they would be developing the site in-house we opted for a modular approach to the design, allowing them flexibility and growth. We looked at global elements such as the header, navigation and footer first to ensure that they'd provide a consistent structure to the site while the other modules could be used more freely. It was vital for the navigation to change for their 2 main audiences so we factored in an audience switcher.  


The global navigation with audience switcher.

The global navigation with audience switcher.


We used simple clean typography in their brand typeface Amplitude to style promo and way-finding boxes giving them a consistent feel. We mirrored styles found elsewhere in their on and offline materials such as using different weights of Amplitude to highlight key words.


jppromo

The 'Personal' section of the site has a homepage which guides users through to 3 main product types aimed at their needs, ISA's, Pensions and Investments. Under this the user can find tools and advice to help them find an investment solution that's right for them.


The 'Personal' investor home page.

The 'Personal' investor home page.


Making complex content digestible

The site needed to house a large amount of data so we designed an assortment of space saving content modules that could be used across the fund pages.


Large tabs which filter the content that sits below them.

Large tabs which filter the content that sits below them.


To help visualise some of the more complex data we created an easy to read chart style which smoothly plot themselves as the page loads. 


Compact fund lists display multiple options and allow the user to find out more.

Compact fund lists display multiple options and allow the user to find out more.


We added an audience landing page, one of the only pages to include imagery, to direct the user to the correct area of the site. The 2 audience panels flip over to reveal deep links into key areas of the site best suited to the type of investor.



Passing the baton

To help their internal team roll out the new design across the site we created comprehensive guidelines, breaking down pages into their component modules to show the flexibility. We also created a pocket sized reference guide to help their staff write snappier, more focussed copy to populate the new site. With regular check ins we kept an eye on the development work making sure our guides were easy to implement and answering any questions their team might have.


Our content guide is short and snappy to reflect the style of content we've suggested for the site.

Our content guide is short and snappy to reflect the style of content we've suggested for the site.


Rolling it out

After completing the UK site we adapted the design of the modules to suit the brand colour palette for their European sites. This gave them a much needed refresh and brought them in line with the UK site whilst allowing them a personality of their own.


central_profiles

We've since worked with the J.P. Morgan team on a number of microsites which continue to evolve the styles set during this project. These include a retirement microsite and an internal web analytics dashboard.


We created an analytics dashboard to act as a factsheet for time poor senior staff to refer to.

We created an analytics dashboard to act as a factsheet for time poor senior staff to refer to.

The J.P. Morgan Smart Retirement site animates to show key life milestones and suggested investments.

The J.P. Morgan Smart Retirement site animates to show key life milestones and suggested investments.