Profile Section Re-design, JP Morgan Chase

Research and re-design of the Profile and Settings section of chase.com

Overview

Our brief was to redesign the Profile and Settings section of chase.com.

This section of the site is used by more than three million users every month, and contains over 40 user flows including settings pertaining to contact details, travel, paperless statements and more.

In this project I worked to define the scope, interactions and visual layout, analyse the existing pages and categorise features.

Project Goals

Increase discoverability of pages
Increase flow completion rates

Skills

Information architectureFlowsInteraction designUser research

Team

VP of digital product, 1 product designer & 1 UI engineer

Process

Research

How can we define the scope of this project?

We worked with the QA team to gather all happy-paths that existed in the profile-and-settings section. We could then understand which flows were visible to which users, and the effects that changes to one page would have on others.

Which flows are the most problematic?

I worked with the analytics team to get the completion rates for each flow we defined, so we could see which tasks users were struggling to complete.

Is there any qualitative information that might help?

We interviewed Chase call-centre workers to find out what self-serve tasks they were most frequently contacted about, and why they thought users couldn’t complete them without assistance.

Synthesis

Scope:

There were over 40 different sections, each of which had 1-4 pages in a single flow, and each of which appeared differently to different user types. In short, there were a lot of flows we would have to triage to make the biggest impact.

Looking at the data...

Some flows had abysmal completion rates. For example, some areas within Personal Details and Alerts were used by, on average, less than ten users per month. Remember, we had more than three million users every month!

And the qualitative information?

The call centre workers reported that (1) callers complained that it was difficult to find what they wanted in the maze of menus and (2), that when they did find what they wanted, there were too many action items on the page, and they didn’t know which one they needed.

Key Issues and Solutions

Menu Re-architecture

The side menu of Profile and Settings has been growing as more features are added. The section called ‘More Settings’ had been used as a dumping ground for over eight pages, many of which didn’t logically fit there. This led to the menu becoming difficult to navigate. We needed to re-categorise the pages we had, simplify the menu and surface pages that users found difficult to discover.

To address these issues in our designs we compressed the side navigation menu into just top-level categories. Once clicked they would open a hub page listing the pages in this section. We also worked with content to update the category names and re-categorised pages to help users make more informed decisions.

Interaction Simplification

Across Profile and Settings we found multiple spurious hyperlinks. They looked like links but would do things like bring up forms. One of the worst offenders read ‘How we’ll use this number’ which opened a form overlay. Hyperlinks take up a lot of space and make it harder for users to digest the page content. We found many unnecessary hyperlinks scattered across the site, which added clutter.

In the new designs, where we could, we made the hyperlinks into accessible icons and consolidated them into one or two categories, reducing the clutter on the page.

Enhance Visual Clarity

Working through the visual audit we were struck by the verbosity of pages and this was especially clear for pages that had varying amounts of content, e.g. the phone page.

When trying to design one page to suit all users we either had a sparse page or one that had too much information on it. We settled on having two layouts for these pages.

For other pages that did not have varying amounts of content per user but still had too much, the main issues were redundant copy, repetition and overly complicated page design.

Take aways

This was a complex project and there were many different scenarios to be mindful of when creating the designs. Regular feedback was critical to keep everyone involved in the project on the same page and make sure the designs were aligned with our different user types and business requirements.

Previous project