Kelly Noah

MB Financial Bank Website

Categories: IA, Prototype, Requirements, Usability Testing, User Research, Wireframes
Completion Date: April 25, 2012

I had the opportunity to lead the User Experience effort for MB Financial Bank from the initial pitch through launch of the project.

Context

MB is one of the largest truly Chicago-based banks, but they also have a personalized, community-bank feel – and they were in desperate need of a new website:

MB original home page
MB’s original home page

MB original branch locator
MB’s original branch locator

We knew from our extensive experience in the financial industry and as user experience professionals that there were several low-hanging fruit that could be fixed on the site without asking the client a single question:

  • The structure of the site itself was in obvious disarray – it was difficult to navigate and way-find through the site because there wasn’t a structure that could be easily learned and followed
  • High profile and often-shopped for products like personal checking and savings accounts weren’t given their due, with several products often being mentioned on the same page, sometimes incomprehensibly on modern browsers (see below)

MB checking comparison table
MB’s original checking comparison table

  • The branch locator was difficult to find – users were initially presented with a list of branches ordered alphabetically by city rather than a functional branch locator
  • Throughout the site, calls to action weren’t very clear – if a customer wanted to open an account right now, or ask a question, it wasn’t clear what they should do
  • MB already had a great brand with a particularly eye-catching logo, but their website was very weak on design; they were lacking a sophisticated front door for their customers and prospects

MB also had some initial goals and ideas for what the new site should include, but we all agreed that it would be wise to start with a Discovery process to truly understand the client, their diverse groups of customers and prospects, and what both sides wanted to accomplish with the new site, to truly build a solution customized to this bank from the ground up, rather than relying on best practices or just copying what other banks do.

Approach

I started by spearheading the Discovery process. Several key stakeholders from the business were identified – this included key contacts from MB’s different lines of business (Personal, Business, Commercial, and Wealth Management) along with representatives from marketing, and the most customer-facing people – branch and call center staff. Initially, we distributed a questionnaire to these stakeholders to learn about them, their place in the business, their personal goals and objectives for a new site, and their obvious pain points. How was the website potentially failing them and their business today?

These questionnaires helped guide the questions we asked during in-depth interviews with stakeholders to learn more.

Separately, we worked with a partner UX organization in Chicago to run a User Needs Analysis and understand what Personal and Small Business banking customers in Chicago are looking for from their bank. Do they bank with a high profile national bank with a branch on nearly every corner or a smaller community-based bank? What are they getting out of that relationship (or finding that relationship lacks)? What do they look for on bank websites? And finally, we observed how they accomplished several key tasks on competitor banks’ sites

From these interviews with business stakeholders and potential customers, it was natural to see several themes emerge – I organized my masses of notes into separate thoughts that we regarded as goals for the new website. The goals were further organized into different themes, or what we called the objectives for the new site. We then worked to prioritize the goals for the site – what was most important to customers? Most important to the business? How much effort is required? This helped us understand what the highest priority items were that would become our requirements for the initial launch of the website.

MB Goals & Objectives Worksheet
Click to view an excerpt of the Goals & Objectives document

MB Site Requirements
Click to view an excerpt of MB’s Site Requirements

I also conducted a competitive review of banks that MB considered their chief competitors to explore their strengths, weaknesses, opportunities and threats. This helped us understand where MB had big opportunities to outshine their competitors and what was considered a best-in-class web experience for their different audience groups.

From here, the more tangible work began. I had some idea of the content on MB’s current site that they wanted repurposed or to keep for the new site, thanks to a Content Inventory document and our goals and objectives. This, along with our requirements for the site, helped us start the initial sitemap for MB.

MB high-level visual sitemap
High-level visual sitemap

Detailed Sitemap
Click to view an excerpt of the detailed Excel sitemap

We identified several key pages, templates, and bits of functionality for the website that would be wireframed, to gain an acceptance and understanding of how the site would look and behave, as well as the types of content it could accommodate.

I wireframed the site using Axure so we could show key functionality – whether it was the interaction of clicking in-page tabs, performing a search, or finding a branch within the branch locator.

  • Wireframe Examples: Branch Locator Wireframe Examples: Branch Locator
  • Wireframe Examples: Business Banking Landing Page Wireframe Examples: Business Banking Landing Page
  • Wireframe Examples: Commercial Banking Landing Page Wireframe Examples: Commercial Banking Landing Page
  • Wireframe Examples: Wealth Management Landing Page Wireframe Examples: Wealth Management Landing Page
  • Wireframe Examples: Product Page Wireframe Examples: Product Page
  • Wireframe Examples: Online Banking Page Wireframe Examples: Online Banking Page
     

As a batch of wireframes were completed and signed off, they were passed on to our designer to begin to really bring the site to life.

  • Wireframe/Design Comparison: MB Home Page Wireframe Wireframe/Design Comparison: MB Home Page Wireframe
  • Wireframe/Design Comparison: MB Home Page Design Wireframe/Design Comparison: MB Home Page Design
  • Wireframe/Design Comparison: Personal Landing Wireframe Wireframe/Design Comparison: Personal Landing Wireframe
  • Wireframe/Design Comparison: Personal Landing Design Wireframe/Design Comparison: Personal Landing Design
  • Wireframe/Design Comparison: Checking Comparison Wireframe Wireframe/Design Comparison: Checking Comparison Wireframe
  • Wireframe/Design Comparison: Checking Comparison Design Wireframe/Design Comparison: Checking Comparison Design
  • Wireframe/Design Comparison: Product Details Wireframe Wireframe/Design Comparison: Product Details Wireframe
  • Wireframe/Design Comparison: Product Details Design Wireframe/Design Comparison: Product Details Design
     

I also used the same Axure wireframes to create an interaction design (or functional) specification for the site that was passed on to our development team. This helped to spell out what we regarded as our requirements for the Content Management System – it showed all the templates that needed to be built, but also described how everything was expected to behave.

As content got underway more seriously, I was able to further iterate the sitemap, which ultimately became one of the most key documents for the site. Through the sitemap we were able to track whether pages had source content, delivered content, and SEO data, as well as understand which template the page should use and whether it had been populated within the CMS.

Next I played a key role in QAing the work our developers were doing – were they following what was required from the Functional Specification? Was the design correct? Were things looking and behaving as they should?

And in a departure from the typical UX role, I also spearheaded the population of content within MB’s CMS, Sitecore. I partnered with other team members to finally bring the site to life within the CMS, as well as QA the others’ work to ensure we were delivering the high quality output the client deserved.

Outcome

MB launched their site to the public in the Spring of 2012 and initial feedback has been very positive. We are working with MB now to dig into their analytics and see how the site is performing. This, along with goals and objectives that were left on the table as possibilities for future phases of work during our Discovery process, could help guide how we work with MB in the future.

Take a look: mbfinancial.com