How ToT2 Dark_1200x303

57% of the time people spend on our fintech homepage is dedicated to the content above the fold. Knowing this, what kind of first impression do you think your hero image makes with prospective users? If you’re not feeling confident that it’s a good one, here are 5 ways to fix that.

When it comes to designing your fintech app’s website, there’s one component in general you have to be careful about creating: The homepage hero image.

It’s usually the first thing people look at when they enter your website and it could realistically make or break their decision to click the “Download” or “Sign Up” button.

In this post, we’re going to look at what makes for a click-worthy hero image design for fintechs along with some examples you can follow.

Designing the Hero Image for Fintech

What is the goal of the hero image? Similar to splash screens for apps, the website hero image allows you to provide users with an attractive and descriptive introduction to the product. If it doesn’t quickly convey what the product does and make an enticing offer, you’re likely going to lose a lot of people.

We’re going to leave the copy accompanying the image to your writer. For now, let’s focus on five things you can do to enhance the design of your hero images and encourage more app signups in the process.

1. Take It to the Fold

An NNG study in 2018 took a look at the correlation between the parts of a web page and how much attention was paid to each.

Here’s what it found:

A 2018 NNG study found that 57% of all time spent viewing web pages was focused on content above the fold. The second screenful received 17%, while the rest of the page received less and less views, with only a few percentage points apiece.

57% of the total time spent on a page is focused on the content above the fold. While that might suggest that it’s better to shorten the hero image so that more content and sections can be visible at once, I’d argue that it means the opposite.

The first reason why is because internet users are smart. They know that if a website prevents them from scrolling—which is a natural instinct at this point—they need to go to the navigation. So, it’s not like the visibility of the next section of content provides a signal to scroll.

Secondly, the hero image deserves to be seen without distractions. When you allow more content to peak out from above the fold, you risk giving visitors too much to process at once. And with a technical solution like a financial app, that could be a problem.

Instead, make the first impression really count. Design a simple, yet eye-catching and visually descriptive banner to match your writer’s concise and convincing sales pitch and CTA.

Here’s one example of how to do this from Honeydue on desktop:

The HoneyDue homepage hero design is simple. It has an orange-purple gradient background, the message “Outsmart Money, Together”, app store links, and smartphone graphics that show how a couple would manage their bills and spending together.

There’s no doubt what this app is for, and the preview even allows users to get a sense for its ease of use, too.

On mobile, the same exact hero image is used. The only difference is that the surrounding white space is gone:

What the HoneyDue homepage hero design looks like on mobile. It has an orange-purple gradient background, the message “Outsmart Money, Together”, app store links, and smartphone graphics that show how a couple would manage their bills and spending together.

The banner doesn’t go all the way to the fold, but that’s okay. While we can see the darker part of the next section, it doesn’t take anything away from the engaging visuals as well as the promise that sit front and center.

2. Leave Users with One Clear Choice

I know it’s tempting to present prospective users with a variety of options:

  • Learn More About the Product
  • Download on the App Store
  • Try the Demo

But, really, if you know your user persona, then you know the journey they’re most likely going to take from discovery to conversion. And knowing this, your hero image should present them with the CTA that makes the most sense for all visitors.

Let’s use the example of Venmo:

The Venmo homepage briefly sums up what the product does — “Fast, safe, social payments” and pairs it alongside images of the actual app. The call-to-action then invites visitors to “Get Venmo”.

Here’s how people might view this hero image based on where they are in the sales funnel:

Top-of-funnel visitors (those in the discovery phase) will look at this and think:

  • “Fast, safe, social payments” sounds promising.
  • Looks like I can pay and get paid really easily with this app.
  • Hmmm… Not sure I’m ready to sign up yet. Let me scroll down and see what else there is.

Even though they might not be ready to convert, the seeds have been planted. They know what they potentially stand to get by downloading this app and they know where and how to get started.

Bottom-of-funnel visitors (those ready to take action) who return to the site or page will look at this and think:

  • Yep, this looks perfect for my needs.
  • 60 million+ users will come in handy as I expand my network of people to pay and get paid by.
  • Alright, let’s do this.

If the banner contained a variety of CTAs, though, the choice might not be as fast or as clear a one to make. Go ahead and make that choice for them by simplifying next steps. People who are still on the fence know what they need to do to better inform themselves and can go hunting for more information on the app while the rest can instantly click through to get started.

3. Choose the Right Imagery

There’s no specific formula when it comes to designing a background or imagery for your fintech hero banner. That said, here’s something to think about before you settle on a design:

What’s the goal of the product?

I’ve seen fintech hero images where smiling users take a front seat to the app that’s barely visible on a device placed in the background. Here’s what I’ll say to that:

Of course you want your users to be happier once they start using your app. However, that’s not typically the end goal. Users download and/or purchase fintech apps for more pragmatic purposes.

They have a problem that they need solved by a highly technical solution. Budget management. Investing. Invoice generation. And your app is designed to take that complexity out of their lives.

So, doesn’t it make more sense to position your product front and center and show them right away what they can accomplish with it? As opposed to highlighting some superficial response to using the app, like people smiling around a conference table?

Here’s an example from Acorns that I think works nicely:

Acorn’s homepage hero image is simple in design. The background is a dusty light blue color. On top of that is a brief message explainin how “Acorns helps you grow your money” alongside images of the mobile app and VISA card.

The design is simple, clean and very descriptive. It would take a visitor no more than a couple seconds to realize Acorns gives them an app and a VISA card with which to grow their money.

If you feel as though something this simple and tech-centric doesn’t conform to your branding, that’s fine. There are other ways to handle designing the background and imagery for your hero image.

Here’s an animated example from Betterment:

Betterment uses animated imagery in its homepage hero banner. It shows a Retirement Goal, Home Goal, and Build Wealth Goal. The Home Goal is opened up, a Goal Name and Target Amount are entered into the fields, and then a success message appears

This design is unique in that it’s not just an image of a smartphone or desktop monitor with the app on it. This one actually shows people how easy it is to set goals—which is a critical component of an app like this. And it keeps you from having to settle for a stock photo of people that won’t be very effective at selling the solution.

4. Add Meaningful Trust Marks

Any time you build an app where money is involved, trust needs to be baked into the design.

With fintech, there are a number of ways to gain the trust of prospective users without overwhelming the hero image design or messaging.

Take a money management app like Emma:

The homepage for mobile app Emma is designed like other fintech homepages. However, this one includes a 4.7-star rating from 3000+ App Store reviews to help build trust.

Look below the app store buttons and you’ll find Emma’s trust mark. It’s a 4.7-star rating (as opposed to an unrealistic 5-star) from over 3,000 app store reviews. Someone wondering if it’s worth taking the leap might need only see that to be convinced to convert.

Here’s a different type of trust mark found on the FreshBooks hero image:

FreshBooks includes privacy trust marks beneath the CTA in its hero image: links to the Terms of Service, Privacy Policy, and Security Safeguards pages.

FreshBooks provides prospective users with links to three of its policy pages:

  • Terms of Service
  • Privacy Policy
  • Security Safeguards

And it does this right beside the very first form and CTA on its website. As we’ll see in tip #5, this is a much better way to inform users about privacy matters while gaining their trust early on.

Of course, there are other ways to build trustmarks into this section. You might want to include a notice about being an FDIC member, a TRUSTe privacy certification seal or a testimonial from a powerful organization or publication that vouches for the app. It all depends on why users may be doubtful or concerned about taking the next step and what sort of trust builder will ease those fears.

5. Minimize Distractions

Just as it’s a good idea to design your hero image to hit the fold, it’s also wise to remove any distractions that would keep visitors from focusing on the hero image.

Let’s look at the example of Blend:

The Blend homepage hero image is overshadowed by two distractions. The first is a small pop-up widget that accepts visitors to “Allow Cookies” or “Decline”. The second is a sticky bar promoting a Forrester report.

I’m willing to bet that heatmaps and user recordings would reveal that visitors are immediately drawn to the pop-up messages at the bottom of the screen instead of the hero image.

The one in the corner is, of course, an essential notice to share with visitors. However, considering how pervasive these cookie consent notices are, chances are good that most visitors will blindly accept the terms without considering the ramifications of that decision. There’s a better way to handle this, which I’ll explain below.

The other distraction promotes a Forrester report. There are two reasons why this one needs to go.

For starters, it can’t actually be engaged with until visitors deal with the cookie consent notice, so it’s likely to cause undue frustration within seconds of someone entering the site. Secondly, something like this should play a secondary role to the primary goal of the site (i.e. to turn visitors into paying users), though it’s not designed that way.

It gets worse on mobile:

Visitors to the homepage of the Blend website on mobile see a short message “Be there for every financial milestone” before being shown a large cookie consent notice.

This is the first thing visitors see when they enter the site. Only the headline is visible above the large cookie consent notice.

While this notice is necessary for GDPR and CCPA compliance, there’s nothing that says it needs to be given the second someone enters the site. In fact, it’s probably better to insert this notice when it becomes relevant—like someone filling out a form or making a purchase.

Here’s the second problem with Blend’s mobile site:

Visitors to the homepage of the Blend website on mobile see a banner promoting a Forrester report under the main headline of the hero image. The big blue banner takes up about a third of the screen.

After visitors deal with the cookie consent bar, they see the big blue bar promoting the Forrester report. Still, the hero image remains compromised as roughly a third of the screen is covered by this sticky pop-up.

This banner should only appear on pages where it’s relevant or, at the very least, once visitors get further down the homepage. There’s no reason the main message of the site should be covered up like this.

Only after the two pop-ups are dismissed do mobile visitors see part of the hero image:

Part of the hero image is visible on the Blend mobile website. “Be there for every financial milestone” headline is present as is a brief description of the banking product.

Even then, the image and the “Request demo” button are hidden beneath the fold.

Rather than take up so much precious space and so many valuable seconds to capture the attention of prospective users, move the distractions out of the way.

Wrap-up

Considering how much time is spent looking at the content above the fold on your homepage, you should pay extra special attention to the design of your hero image. Do it right and you could make a strong and lasting impression with prospective users in a matter of seconds. Do it wrong and you could lose them to the competition forever.

The five tips above will help you remove the distractions, ease the decision-making process and boost confidence so that yours is the only app they want to use in the end.


SuzanneScacca-headshot
About the Author

Suzanne Scacca

A former project manager and web design agency manager, Suzanne Scacca now writes about the changing landscape of design, development and software.

Related Posts

Comments

Comments are disabled in preview mode.