Brand, UI, UX
Compiling the playbook that ensures digital teams present a consistent brand experience for users across properties and platforms.
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.
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.
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.
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.
Our design concept was based on beautiful simplicity. Clean, uncluttered layouts with accessible language and close attention to detail around imagery and 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.
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.