Two weeks ago, Wells Fargo rolled out a new homepage design. Based on a quick Google news search, it doesn’t seem to have received any negative comments. And that’s good.
Wells Fargo has maintained its overall good design for almost ten years (see previous versions below), so most visitors are accustomed to the bank’s no-nonsense approach to content and navigation. The new site maintains the look and feel of previous generations, while overhauling top-level navigation. While it may not win design awards, the new layout works really well, and that’s very good.
The most noticeable change shows that Wells finally eliminated its mid-page “link farm” navigation, in use since 2004 (see screenshots). It was replaced by fly-out “mega menus” that expand over the top half of the page when a cursor hovers over a primary navigation item. While these menus can be annoying when they hide content you were looking at, most website users are accustomed to them, and they are a good way to expose the broad offerings of a large commercial bank.
The other big change is something more unique to Wells Fargo: the “financial needs ribbon” (Wells calls it a “carousel”). It’s a swipe-able/clickable link to seven major financial topics:
- Home Lending (see arrows, example below): Mortgages and first-time buyer education
- Banking Made Easy: Pitching checking, savings and online/mobile banking
- Borrowing and Credit: Promotes entry-level credit services
- Retirement: Savings, IRA, etc.
- Protect What Counts: Insurance
- Fraud Information Center: Security and identity-theft protection
- Going to College: Budgeting, scholarships and student loans
On a desktop, my first impression of the ribbon was that it cluttered the page with redundant links. But the more I looked at it, especially after being briefed by the Wells Fargo homepage team this week (note 1), the more it makes sense.
The drop-down menu and/or the search box are efficient for visitors who know exactly what they are looking for. But for those that are not thinking in specific banking-product terms, the needs-based terminology may strike a chord, e.g., “Protect What Counts” instead of “Insurance.” The ribbon also allows the bank to showcase important services more prominently and more thoroughly.
But to truly appreciate the new approach, you must open the site on a tablet (I tested on full iPad). On a touch-screen, the ribbon, and the underlying content, are smoothly swiped from left-to-right or right-to-left, making for a very professional looking tablet-website.
Bottom line: While the homepage is still slightly cluttered for my tastes (do they really need 4+ “happy family” shots on the homepage?), I think the bank has done a good job managing the tradeoff between simplicity and exposing all that it has to offer. And the touchscreen-friendly content-ribbon is a design innovation I think we’ll see at other financial institutions in the future.
———————————–
New Design: Launched June 8, 2013
Before: June 2012
Before: June 2008
Before: June 2004
—————————
Notes:
1. For a more thorough recap of the Wells Fargo redesign, see Mary Wisniewski’s American Banker interview of Shannon Lundgren, Wells Fargo VP Product Management of Digital Sales & Service.
2. Hopefully, I can convince my friends at comScore to send over some before-and-after data once they’ve had a few months to measure the new site’s performance.
3. We continually look at website design and UX in our industry subscription service, Online Banking Report. All-Access subscribers are entitled to a complimentary high-level website review each year.
Smithsonian Magazine features how BehavioSec authenticates users.
Corduro 
