Wells Fargo Case Study

Online and mobile banking are becoming increasingly prevalent in today’s world . With COVID-19 limiting in-person interactions, people are adapting to a more digital-centric world and they are relying on online banking to keep their finances in check.

In this study, my goal was to understand how Wells Fargo currently utilizes content design on their website to help customers with their personal finances and how I might help improve the existing system.

WELLS FARGO HOMEPAGE

 

Wells Fargo has 3 customer bases — individual, small business, and commercial banking.

I focused on personal banking because individuals are the primary user base and because this is the page users land on when they visit the website.

The corporate giant has “become one of the nation’s largest financial institutions, serving one in three U.S. households and employing one in 500 working Americans.”

1 “The Vision, Values & Goals of Wells Fargo.” Vision, Values & Goals - Wells Fargo, www.wellsfargo.com/about/corporate/vision-and-values/index.

RESEARCH: COMPETITOR ANALYSIS

 

Indirect Competitors:

  • Payment Space - ApplePay, Stripe, PayPal

  • Investments - Robinhood

  • Loans - Sofi

  • Homebuying - Opendoor

Direct Competitors:

  • JP Morgan Chase

  • Capital One

  • Bank of America

what’s done well

 

I also think it’s important to note the homepage does a few things well.

Wins:

  • Use of plain English — Jargon-less financial speak is important! Reducing the text to make it easy to understand is key. I think there’s an opportunity to make it more natural like the company is speaking to you in person

  • Showing the breadth of what Wells Fargo is able to offer in a limited amount of space

  • Visual balance - the use of images and icons to make the experience more human-oriented and friendly. Colors are in-line with the branding and are kept to two main colors that don’t overwhelm the user

RESTRUCTURING THE HOMEPAGE

Before I started writing any new text or creating new designs, I figured out how I wanted the website to be structured and what content to feature. I made sure to include placeholders for any images and icons that should be included at a later stage.

Homepage: Main content structure

 

Homepage: Footer structure

RESEARCH: COMPETITOR ANALYSIS (CONTINUED)

I noted commonalities and stand-out features on direct competitor websites

JP MORGAN CHASE

  • Language indicating the power is in the customer’s hands

  • Emphasizing “simple + easy” for the process

  • Highlight “Quick” + “efficient” banking

  • Clear hierarchy - headlines, tag-lines, body text are clearly structured

  • Balance of images and text

  • Color palette that is in line with their branding & is not overwhelming

CAPITAL ONE 

  • Tone - Approachable, knowledgeable, supportive

  • Tailor the experience so that the customer can find exactly what they need (“I am look for _____ so that I can _______” search component)

  • Only top priority services are featured on the homepage - edited to not overwhelm

  • Good design philosophy - simple, limited color palette in line with branding

BANK OF AMERICA

  • Content is structured with most important/most common tasks featured at the top and more informational/educational content listed further down the page

  • Tone is knowledgeable and reassuring - building trust with customers

  • Emphasis on security and safety

  • Limited color palette - design simplicity to not visually overwhelm a customer/user

key goals

 

3 Key Goals:

  • Reduce cognitive load

  • Make the site more readable and scannable

  • Edit existing copy for clarity and tone

VOICE + TONE

KNOWLEDGEABLE + CONFIDENT

People turn to financial institutions for their expertise. The website should be prepared to answer questions fully and confidently. The tone here is particularly important to build trust with your customers.

STRAIGHTFORWARD + HONEST

Wells Fargo is a bank responsible for the personal finances of countless people. The language should be straightforward and honest to help customers complete a task and get the help they need.

APPROACHABLE + ENGAGING

Navigating the finance space can be intimidating and honestly, dull, at times. Designing your language to be approachable helps eliminate fear while being engaging at every stage of the journey keeps customers from dropping off.

RESTRUCTURING THE HOMEPAGE

Before I started writing any new text or creating new designs, I figured out how I wanted the website to be structured and what content to feature. I made sure to include placeholders for any images and icons that should be included at a later stage.

Homepage: Main content structure

 

Homepage: Footer structure

HIGH-FI MOCKUPS

Below are a series of high-fi mockups I created and designed to show how I implemented my strategy.

HERO IMAGE + CONTENT

Before

After

Rationale

  1. Avoid overwhelming a customer before they even begin a task

  2. Too many options in one component—need to reduce cognitive load. Prioritize top 3 services/features and make them accessible on homepage

  3. Overpowers the page—the red banner becomes the focal point, not the written content

  4. Font size differentiated for easier scanning & readability

  5. Clarify the exact action users should take and what they should expect next

  6. Navigating personal finances can be overwhelming and dull — adjusting tone helps eliminate fear and motivates customers

  7. Imagery should clearly match the advertised services —simplicity it key for clarity

Change

  1. Remove carousel and focus on 1 product feature (current iteration includes 3)

  2. Remove Overlay

  3. Remove red banner

  4. Define text hierarchy

  5. Edit CTA text

  6. Adjust tone — make more approachable

  7. Icons in place of stock photos

MAIN CONTENT

Before

After

Rationale

  1. Too much information in 1 component—forces users to expend too much energy & time to find the services they’re look for

  2. There’s an opportunity here to make the copy more human-centered and less technical

  3. Better readability and easier for users to scan; reduces friction

  4. Distracts user from the content— associate 1 image to signal what is being offered.

  5. Keep it short & to the point — tell users how to proceed & what to expect next

Change

  1. Remove Carousel

  2. Adjust tone to be knowledgeable & engaging

  3. Define text hierarchy

  4. Identified 1 key image for each feature

  5. Reduced button microcopy

FOOTER

Before

After

Rationale

  1. Categorizing all links provides framework for user when looking for answers

  2. Still accessible but doesn’t interfere with most pertinent legal information

  3. Still falls in line with the content hierarchy but calls out “Investment and Insurance Products”

  4. Formality trumps personality here because this is a legal disclaimer and therefore should evoke a straightforward, serious tone

Change

  1. Created broad categories and reformatted individual links into columns

  2. Social icons moved to the top corner

  3. Dropped the box around “Investments and Insurance Products” and opted for a bolded title

  4. Tone is straightforward

FULL HOMEPAGE FLOW

All designs were created using Figma, resources from Flaticon, and Wells Fargo.