Big Bank

Project Overview

The bank’s goal was to modernize their existing site while emulating a friendly and personal banking experience online. Early adopters already bank online. Big Bank wants to entice the next wave of users with a simple and human online experience.

As with any project of this size, there were challenges. This project marked the company’s first foray into Agile, which can take some getting used to. Also, Big Bank was very reluctant to make back-end changes. It was a constant struggle to not let the siloed back-end dictate our design.

The team members for this project numbered in the hundreds and were spread out across the country. My contribution was to:

  • Promote modern UX practices
  • Aid in research planning, create clickable prototypes for user testing
  • Think through flows, create and present wireframes
  • Solicit feedback and approval from stakeholders
  • Propose improvements to IA and Navigation

Working on such an enormous project and getting consensus on designs from so many stakeholders was often challenging. A few “big wins” are described below.


Accept Money

The header space of the site contains a list of notifications that users treat as a To-do list. We enabled users to "Accept Money" without leaving the header area and reduced the steps of this flow from 6 to 2.

The 3 images below show the old design. Notice that the user is taken from the home page to "Payment Activity" (because that’s where the “Accept Money” code lives). Once finished, it's up to the user to re-expand the message list in order to return to their To-dos.

The old flow takes the user to Payment Activity. Good luck finding your way back! AcceptMoney

In our new design, when the user clicks "Accept Money", the message refreshes to show a confirmation. When the user dismisses the confirmation, the message disappears and the next message in the list moves up to take it's place.

The new design keeps the user focused on their To-do list. Much better! AcceptMoney

Read Only Mode

Sometimes the site goes under scheduled maintenance and enters a non-editable "Read-only" mode while the user is logged in. The development team wanted to rely on generic error messages to inform the user that much of the site would be disabled for the next few hours. I insisted we come up with a better solution.

When the site goes into Read-only mode, Development's design had the user click on disabled components to see generic error messages ("component X is temporarily unavailable"). Presumably, after encountering enough component errors, the user would eventually log out and back into the site, at which time they would see an error message explaining the site's loss of functionality. What a frustrating experience!

Instead, our new design dicates that as soon as a user clicks on a disabled component during Read-only mode, a full screen overlay displays an error message explaining the site’s lost functionality. This message remains at the top of the site until full functionality has been restored.

A full screen takeover alerts users to the Read-only mode. AcceptMoney When the user closes the full screen takeover, the error message shows at the top of the site. AcceptMoney

Collapse and Spinner Rules

The header of the site houses many valuable tools, however, it makes sense that this area should collapse when users focus elsewhere. I established rules governing when the header area collapses, as well as when to display loading spinners. After feedback and revision, I created wireframes to describe these rules.

Essentially, we interpret certain clicks to mean a user wishes to move their focus from the header, so it collapses.

Detailed wireframes define the collapse rules (in warm colors) for Development. Collapse Clicks which do not collapse the component are shown in cool colors. Don't Collpase

I also defined rules for loading spinners. Some cases, like when a user is awaiting confirmation of a transaction, are too important to allow the user to move on. In such cases, we cover the site with a white overlay and spinner during load, to indicate it's disabled state.

A spinner shows over the disabled site while the user awaits confirmation. Spinner

Whenever possible, we should not impede the user with a spinner. I found many occasions to not show a spinner at all while non-essential components struggle to load.

The search suggestions are not loading, but that's no reason to keep the user from searching. No spinner necessary in this case. Spinner

IA and Navigation

As I gained perspective during the QA process, I found the site’s structure and navigation to be confusing. Our individual teams worked heads down for so long that the site felt disjointed and lacked cohesion.

I began to identify which patterns worked best and where we were being inconsistent. I then came up with low overhead solutions that would simplify the site's IA and make navigation more intuitive. I created mocks to illustrate my proposed changes for a presentation to the design department.

The delivery of these ideas was politically tricky. We needed to gain consensus for site-wide changes. After weeks of refining ideas and laying groundwork, we presented to a very receptive design department. Our proposal will guide the next iterations of the site.

Slides from presentation: Proposed updates to IA and Page Patterns. patterns

Takeaways

Working on such an enormous project taught me a lot about the importance of politicking with stakeholders. I also gained valuable experience thinking through flows, creating wireframes, and presenting to large groups. During the process I became very interested in Patterns and Information Architecture, which I hope to focus on more in the future.

If I had to do it again, I would change my approach to the IA presentation. We struggled to express complex IA ideas in a simple, visual way that would be received positively by our designers. In essence, we dumbed down some concepts in order to avoid showing ugly IA docs that required reflection. Instead, I wish I had built a quick prototype that demonstrated the new IA. A prototype would have helped me work through my ideas as well as clearly communicate the proposed changes.