J.P. Morgan Asset Management UX Guidelines

Creating consistency across their online identity.

jpm1

Insight

J.P. Morgan Asset Management, an existing client of ours, approached us as they wanted to ensure consistency and uniformity across their online identity. They had no digital guidelines for online assets; internal efforts to develop these had been too time-intensive and were incomplete. Our brief was to create a central resource that would ensure consistency. This would detail UX and UI guidelines that could be used across the J.P. Morgan Asset Management network within both the UK digital teams and agencies. As the project would require input from a variety of different departments (brand, content, digital, marketing) we knew regular communication was key and this ensured the end product was suited to the needs of clients across all departments. The majority of our initial discovery and insights work involved us gaining an understanding of the current situation, what was common already i.e. text rendering, calls to actions, etc. and what was not. Working with our internal UX department confirmed that the document should include the following areas:

  • UI/UX guidelines, covering such areas as legals, web accessibility, fonts, images.
  • Personas; a guide to creating a persona, why you would do this and matching the user to the site.
2

Design

When designing the guidelines, we needed to be considerate of J.P. Morgan Asset Management's branding, the diverse audience, usability and the need for this piece to be visually engaging. To achieve this, we focused on keeping the document clean and clear, used language that was easy to understand and paid close attention to imagery and typography. We sectioned off the document to look at the following:

Visual identity

This covered the brand rules, details of the logos to be used, fonts, colour palette, colour contrast and tone of voice. When looking at areas including typography we had to consider the different styles, formatting and sizing and how header and copy fonts would work together.

3

Accessibility was also crucial. Complying with the Web Content Accessibility Guidelines, we ensured the content was accessible to a wide range of people with disabilities.

The original J.P. Morgan Asset Management logo was developed pre-mobile, so no thought had been given to how the logo should look on mobile devices. Our design team worked with our developers to set consistent rules around the size and how the logo should be used.

4

User Interface/User Experience

It was key that this document included all of J.P. Morgan Asset Management's online assets and the guidelines should provide scenarios of when and what to use and in which format. This standardisation would ensure consistency. When looking at the user experience we broke this section down to cover areas including ratio of imagery, CTA buttons, iconography, text links, card modules and responsive layouts, as we had to be mindful of desktop and mobile.

We also looked at disclaimers and several compliance areas and instead of designing these as functional, simple documents, they were designed within the brand structure to sit inside the site to ensure maximum engagement. Again, our design team collaborated with our developers to ensure the guidelines were viable and worked in practice.

5

Personas

We developed this section of the guidelines to explain more about why and how to create personas that are focused on the individual’s needs and goals. This helped to give a clear picture of their expectations and how users are likely to use the site.

These personas will often group people together based on age, education, technical ability, motivations and their ultimate goals. Identifying these helped tackle current pain points and enabled the website to be optimised for the end users.

 

Collaborative Working

This was a large project which had a relatively short turnaround time of eight weeks including Christmas, and therefore needed to be right first time. As with all our projects, communication and collaboration were at the heart of our project process.

6

Results

Feedback from J.P. Morgan Asset Management has been extremely positive and they were impressed by the finished piece. As an added extra, we printed and delivered hard copies of the guidelines for the team to refer to in the office.

After working with J.P. Morgan Asset Management for the last two years, we have built a solid relationship based on mutual respect and trust. Our collaborative working style meant that, together, we could hit the set deadlines and produce a quality deliverable that exceeded everyone's expectations.

“We, as a brand, faced a fundamental challenge when it came to our internal brand guidelines - we had not found a structured approach for our digital teams to revert simply and quickly to a guide that made sense to all our team members and reflected our brand accurately. The team at Yoyo took up the challenge and helped us redefine how we communicate our brand internally. The solution was a simple UX document that gave our digital team and partners a consistent UX framework that adheres to our brand best practice. The Yoyo team worked with us to understand the challenge, collaborate successfully with all stakeholders and produce a document this is not only of practical use but reflects our brand beautifully in a way that makes us proud to review.”

Jordan Chinchen, Senior Marketing Manager J.P. Morgan