As part of the financial services industry, you help people begin exciting parts of their lives via credit cards, maintain their money, and make smart financial decisions that serve them well. Finding a way to express and explain all you do on your website can seem like a gargantuan task, but it doesn’t have to be.
What is financial services website design?
This area of web design focuses on financial industries, introducing elements like clean pages, attractive graphics, easy-to-use navigation, and clear client logins to increase traffic and build more clients.
Ahead, we’ve found 11 of the most cutting-edge examples of what exemplary financial services website design should look like.
Whether you want to keep your branding and message more professional or take on the voice of a trusted financial friend, you’ll find all the inspiration and ideas you need in these examples ahead.
- 1. Morgan Stanley
- 2. Adison Partners
- 3. Goldman Sachs
- 4. KeyBank
- 5. Runway Growth Capital
- 6. NerdWallet
- 7. Brightwood Capital Advisors
- 8. Pearl Capital
- 9. Pangea Money Transfer
- 10. BNY Mellon
- 11. Stripe
Clear, clean design so you can get to what you need faster
Morgan Stanley is one of the most premier financial institutions in the country. Founded in 1935, this investment bank headquartered in New York City has such an illustrious legacy that the company doesn’t feel inclined to pull out a lot of bells and whistles with its web design. Let’s explore further.
Clean User Experience
Morgan Stanley’s homepage skips the background colors, leaving theirs a pristine white. Their site also goes light on the graphics, adding them when it emphasizes the point of the content or adds human elements to finances.
Simple Navigation for Getting Where You Want to Go
On Morgan Stanley’s website, you can navigate to a page for all their services, including investment management, research, sales and trading, capital markets, investment banking, and wealth management.
All those menus might seem difficult to neaten, but they’re anything but messy.
In the What We Do dropdown, Morgan Stanley lists each of its services in a sub-dropdown. You can then hover over any sub-menu and read more in a text box to the right before you click.
Convenient Client Logins
To the top right of any page on Morgan Stanley’s website, you’ll find the client logins. These include logins for Matrix, the Research Portal, StockPlan Connect, and Morgan Stanley Online. Choose any login from the dropdown and then sign right in.
Colorful, modern graphics and animations
Next is Adison Partners, which describes themselves as a “boutique talent management consulting firm” that favors “uncommon talent.” With their left-field approach, you’d expect a financial services website design that’s equally as attention-grabbing, and Adison Partners doesn’t disappoint.
Cohesive Color Scheme
It takes seconds upon landing on Adison Partners’ website to discover their color scheme: bright, rich purple and teal blue. Most of their graphics and backgrounds display in purple with teal text.
Such a vivid combination of colors is sure to lure in even the most curious site visitor and encourage them to stick around.
Smooth Animated Elements
Adding further to the beauty of its web design is Adison Partners’ use of animated elements. On the homepage, the images of people (in the trademark purple), shift and cut out.
As you click from menu to menu on the website, you’ll see the same effect play out here.
Great Mobile Responsiveness
All the mobile elements on Adison Partners’ website load clean, neat, and quick.
Nothing looks squished or out of place, which makes browsing their website on mobile as much of a delight as doing it on a desktop computer.
Hundreds of years of history, none of the clutter
Another major financial corporation with a great website that we want to talk about is Goldman Sachs. Since 1869, Goldman Sachs has been a trusted financial services company in areas like investment banking, securities underwriting, prime brokerage, asset management, securities, and investment management.
Here’s a closer look at their website and what makes it tick.
Like Morgan Stanley earlier, Goldman Sachs has a lot of history and even more services. Their menu placement is on the left side of the website rather than the right, with three lines denoting the dropdown menu.
As you click the dropdown, you’re greeted to a series of categories: Our Firm, What We Do, Insights, Citizenship, Careers, Investor Relations, and Media Relations. This is also where you’ll find Goldman Sachs’ client logins.
Each menu has sub-dropdowns you can explore by clicking the menu once. The black text against the white background color of the menu keeps this crucial part of the website pristine and easy to use.
Here’s a unique feature on Goldman Sachs’ website that you might want to consider adding to your own. Rather than make you go on your smartphone or tablet to type in the web address and preview the mobile site that way, Goldman Sachs has a mobile preview feature right on their desktop site.
Effective yet simple branding
As a KeyCorp subsidiary, KeyBank is a Cleveland, Ohio-based financial institution and regional bank. It’s in the top 20 banks in the country, so their website is certainly worth looking into. Here are the elements we thought most stood out.
KeyBank has a simple yet effective logo: a key. That key appears on their homepage and every subpage, including What Is Financial Wellness? and Banking 101.
Also adding brand cohesion is the red, gray, and white color scheme that’s recurring throughout.
Handy Search Feature
If you’d rather skip the menus and navigation, right at the top of any of the pages on KeyBank’s website is a search bar. It says “I am looking for…” as a default, but as soon as you start typing, that text is erased.
You can even filter your search results so you get the tailored content you’re looking for.
Modern design with clear Calls-To-Action
Runway Growth Capital is a leading venture debt provider that has done a great job showcasing who they are, what work they’ve done, and how they can help you. There are multiple items of their financial services website design that work well including the use of social proof, success stories, strong calls-to-action, and more.
Ideal CTA Placement
Runway’s website immediately grabs the user’s attention with a prominent “Let’s Connect” call-to-action placed right in the middle of the homepage. Along with this CTA, Runway provides alternate ways to convert on their website such as downloading a fact sheet, signing up for their newsletter and contacting their team members directly.
The implementation of neon green in a subtle manner provides a great accent color – highlighting important information throughout the website. Runway Growth has a very well established brand which makes the entire website feel connected.
Runway engages the user with interactive elements on the site.
Upon arriving a background video and animated image capture the user’s attention. Small elements throughout the site such as simple fade-in effects and motion effects on hover help bring life to this website.
Banking web design made easy
Although it’s a far newer institution that began in 2009, NerdWallet has made a tremendous name for itself in the years since. NerdWallet’s tone is a little different than the other financial services we’ve discussed so far. Let’s take a deeper dive into their site now.
The staff at NerdWallet want to make managing your finances less of a hassle. They uncomplicate what can be an otherwise difficult matter by keeping their copy simple and friendly. They also categorize their services right on the homepage, letting you choose where you need money help without navigating. The options include savings, personal loans, mortgage, student loans, insurance, investing, and credit cards.
Top-Down, Organized Navigation
With so many services under one company umbrella, NerdWallet’s site could look cluttered if they didn’t streamline their menu. Fortunately, that’s not the case. The site menu is at the top left of the page, with dropdowns for any of the eight categories.
Ideal CTA Placement
NerdWallet’s homepage has a handful of CTAs you can learn a thing or two from. The first CTA is for the app. In one section on the homepage, NerdWallet explains the app and then has a green CTA button that says “Get started.”
Further down on the page, if you’re looking to sign up for a credit card through NerdWallet, you can choose your credit score via a dropdown and then select the financial factors you care most about in a second dropdown. These include zero-percent, low interest, travel, rewards, building credit, and cash back. You have to click the “Find cards” CTA button (also green) to proceed.
Scrolling navigation + traveling graphics = an enjoyable user experience
Brightwood Capital Advisors is a New York-based financial advisory firm that also has offices in Dallas, Philadelphia, Minneapolis, Beverly Hills, and Chicago. From the very first second you click onto their website, Brightwood grabs you. Let’s discuss why.
Oversized, Traveling Graphics
Brightwood’s website greets you with its tree logo in white on a blue background. The double Os in the word Brightwood then expand, leading you to the homepage.
That graphical trick isn’t the only one up Brightwood’s figurative sleeve. Those double Os, which make an infinity sign, pop up again as you scroll. The graphics seem to travel with you as you explore the website, which is certainly one way to make an impact.
Brightwood Capital Advisors lets you scroll through everything on their website from top to bottom, touching on each of the site’s menus as you do.
This is a time-saving approach that might appeal to your customer base. Rather than clicking through a myriad of menus, they can just keep scrolling until they find what they need.
Easily Accessible Menus and Logins
Of course, you want to give your audience options. That’s why Brightwood’s website retains its menu across the top of the page no matter how much or little scrolling you do. Their login link remains as well, letting you conveniently click to it anytime to log in.
Cartoon graphics in a professional atmosphere
Since 2010, New Jersey’s Pearl Graphics has offered fintech financial guidance. Their website is one of the more graphically pleasing ones, so if you’d like to take a more artistic approach to your own financial services website design, you might use Pearl Capital as an inspiration.
Fun, Cartoony Graphics Throughout
Pearl Capital punches up its copy throughout its site with graphics. On the homepage is a cartoon of a businessman and businesswoman overlooking a city. The man is holding a magnifying glass since the people are Godzilla-sized. The same graphic appears in full size on Pearl Capital’s about page.
Further down on the homepage, Pearl Capital has an animated graphic of a Superman-like hero, then illustrative graphics explaining its white label solutions and syndication programs. The art, although not super serious, doesn’t take away from Pearl Capital’s messaging in the least.
Easily Accessible Contact Info
If you want to reach out to Pearl Capital to do business with them, this financial institution doesn’t make it hard at all. Even as you navigate from page to page, you can always click Pearl Capital’s social links (including YouTube, LinkedIn, Twitter, and Facebook) or a link to their email. Sandwiched between those links, you’ll find Pearl Capital’s phone number so you can dial them up quickly.
A humanized approach inspires trust
Pangea Money Transfer is a service akin to PayPal, which many people already know and love. Competing with such a big name as PayPal is far from easy, but Pangea holds its own more than well.
Here are some noteworthy elements from their website.
Graphics Promote Trust
Throughout Pangea’s website, you’ll find images of close-knit families and smiling people. Graphics like these inspire trust through the human element.
Smart CTA Placement
Pangea works hard to convert its site visitors into app users. Above the fold on the homepage is a neon pink CTA button that says “Send money”. This button is placed after a benefits list of using Pangea’s service.
That CTA is present for a second time midway down the page. Also, as you begin scrolling through Pangea’s website, their menu CTA that reads “Send money” becomes pink, inviting you to click it.
10. BNY Mellon
Upscale use of graphics
The Bank of New York Mellon was started by the Mellon family in 1869. Today, BNY Mellon is a banking services holding company that’s resultant from the merger of Mellon Financial Corporation and The Bank of New York.
Their colorful website breathes some life into financial services. Let’s take a look.
From the angular images on the homepage with swatches of vertical lines to the images of cityscapes, office meetings, and even real employees throughout the rest of the site, the graphic placement on BNY Mellon’s site is impressive. Against a white background, the graphics grab but don’t pull your attention away from the copy or navigation.
Rich Client Login Menu
Specializing in wealth management, investment management, and investment services, BNY Mellon has many, many services. Rather than dedicate a dropdown to client logins, they have a whole page. This is quite fitting.
Here, you can find the login you’re looking for in categories like wealth management, treasury services, NEXEN services, liquidity services, foreign exchange, depositary receipts, corporate trust, capital markets, asset servicing, and alternative investments.
Colors and modernity suited to its audience
The last financial services website design example we want to talk about is Stripe’s. This San Francisco-based company was founded in 2009 and offers online payment processing for both large and small businesses.
Logging upon Stripe’s website is like looking at a rainbow. The colors shift and move like in a lava lamp, making for a homepage that certainly knows how to get a point across.
Case Studies for Conversions
One way to get a potential customer off the fence is with case studies. At the bottom of Stripe’s homepage is a use cases section that encompasses enterprises, marketplaces, platforms, and SaaS. You can read a few case studies in any of these industries to see how Stripe could work for you as a customer.
Stripe also has a page where it proudly lists its current customers, including some bigger names, to further inspire user confidence.
It’s Time to Consider Updating Your Financial Services Website Design
As a financial services company, be that a bank, a money transfer platform, or an investment firm, you want to differentiate your company while maintaining a professional air. The 10 examples of fantastic financial services web design show that towing this line is quite easy. You too can create a website that boosts conversions and grows your audience base using these examples as an impetus.
By: Frank DePino
Frank DePino is Principal and Founder of Mediaboom. Since 2002, Frank has led Mediaboom’s award-winning staff of creative and technical professionals building the most effective marketing and advertising solutions for its clients.