UX Guidelines

J.P. Morgan

Jp Guidelines 01

Project:
UX guidelines

Work:
Brand, UI, UX

Compiling the playbook that ensures digital teams present a consistent brand experience for users across properties and platforms.

Jp Ux Brand
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.
Jordan Chinchen - Senior Marketing Manager, J.P. Morgan Asset Management
Jp Guidelines 01

Helping to achieve consistency across all platforms

If your brand was born in pre-digital times, it’s likely that achieving a consistent presence across platforms presents a challenge for your marketing team.

And when you’ve got multiple digital properties across a number of geographical territories, that likelihood is multiplied. J.P. Morgan Asset Management faced exactly this challenge, risking a disjointed brand experience for digital users that was at odds with the company’s professional, high-quality service offering. Time consuming to solve internally – and with a deadline fast approaching – the financial giant looked to Yoyo for help.

Jp Ux Open Green

Building on work initiated by the internal team, we set about creating a user-friendly set of UX and UI guidelines that would act as a definitive, central reference point for both in-house teams and external agencies.

Jp Ux Left
Jp Ux Right

If attention to detail was important here, the timing was critical since the guidelines were being produced in advance of a major re-platforming project where multiple, disparate websites were being merged into a single CMS. We had eight weeks (including Christmas) to give the teams, agencies and suppliers involved a set of guidelines that would define a common visual language for J.P. Morgan, ensuring all elements - from hero images down to buttons - supported users with a consistent digital experience. Initial discovery and insight work focused on auditing existing digital properties across the company, including regional variants. By crosschecking, we were able to identify common design elements, such as text rendering and calls to action, while highlighting areas of inconsistency.

Jp Ux Open Black (1)

A comprehensive guide: on brand and on point

First and foremost, the document needed to be practical – an authoritative source of information – but we also knew it needed to be visually appealing to inspire use among the various stakeholder groups. Not only that, the output needed to be considerate of J.P. Morgan Asset Management's existing brand guidelines.

  • UI/UX: Guidelines for areas including legal information, web accessibility, fonts and images.
  • Personas: Guidelines for creating a persona - why you would do this and matching the user to the site.
Jp Ux Open Blue

Our design concept was based on beautiful simplicity. Clean, uncluttered layouts with accessible language and close attention to detail around imagery and typography.

Jp Ux Typography

The guidelines covered details of brand rules, logos to be used, fonts, colour palettes, colour contrast and tone of voice. With typography, consideration had to be given to different styles, formatting and sizes as well as how header and copy fonts would work together. Logo rules needed to specify sizing and how they should be used on mobile. Advice on compliance with Web Content Accessibility Guidelines was incorporated to ensure sites meet the needs of users with disabilities.

Jp Open Flat

Creating a consistent UI & UX system

The guidelines document all of J.P. Morgan Asset Management's online assets, providing scenarios of when to use a given asset and the format required. UX rules cover areas including image ratios, CTA buttons, iconography, text links, card modules and responsive layouts, being mindful of both desktop and mobile.

Jp Table
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 Asset Management
Related post App

Universal Music Globe Sales Pitch App

View next project

Universal Music 2