Eastern Bank

Overview

Eastern bank, a bank based in Boston, Massachusetts, was in need of a revamp of its homepage hero area. This area of the page was used to highlight important information for bank account holders, investors, and businesses. The bank wanted to make the login process more prominent, as it was previously hidden under a dropdown button. In this project, I was tasked with exploring options for positioning the account login area and balancing that with the carousel of highlights. The bank needed high fidelity prototypes to be used for testing to see which direction was the most effective.

Best of Breed Examination

Working in collaboration with the Eastern Bank marketing team, we began to look into best of breed examples for handling the arrangement of the log-in area on various banking and finance-related homepages. We noticed a large majority of financial institutions positioning the login area on the top far left or top far right of the page, above the fold. Most apparent was the fact that the login area was not hidden under a dropdown; this was a very important pattern to take note of because previously, the Eastern Bank login area was hidden under a dropdown.

Approach

I set about creating different layouts in Figma taking into account all of the insights, pain points, and best of breed information gathered in our initial conversations. I created four options:

Version A

This version positioned the login area on the right side of the page, with the highlights carousel positioned to the left. The copy within the highlight area is positioned on the left; the thought here being that the copy for the highlight should be in the area of the “spine” of the “F-shaped pattern” that users typically move in while scanning a page.

Version B

This version uses the same positioning as version A, but within the highlights carousel, we positioned the copy for each highlight to the right, in close proximity to the login area. The thought here being that because users would be looking for the login area initially, placing the copy for the highlight near the login would ensure that users would actually read the copy associated with the highlight image. In addition, the background for the copy bleeds to the edge of the highlight area.

Version B Alternate

This version is a modification of Version B where the copy area is positioned on the left instead of the right.

Version C

In this version, we took an unconventional approach, where the login area was presented horizontally, occupying the full width of the content area, above the highlights carousel. The thought behind this option was to create less competition between the highlights carousel and the login area.

Testing

When it came time to test, the research team made use of the prototypes developed for each of the layouts for testing. In the moderated usability tests, users were asked questions about how they would find certain types of information for each of the four different designs. In the end, the version that came out most successful was version A, which eventually ended up being built and implemented on the Eastern Bank website.

View the Figma File Prototypes:

• Prototype A
• Prototype B
• Prototype B Alternate