July 10 2018

Leveraging Design Layouts for Your Financial Institution’s Website

A website design template is a customized page layout that gives site administrators a basis for adding new webpages requiring a similar content organization. Simply put, a template provides structure. In website design, templates give some conformity to similar types of pages, so that there is a familiar flow of elements for users and a consistent design aesthetic throughout the site. Commonplace in contemporary website development, digital agencies, including ZAG Interactive, develop design templates within content management systems (CMS) for use both in building and expanding websites. Let’s explore some of the most essential design templates that banks and credit unions can use to make and maintain their financial institution website.

Designing a Home Page Layout

sample financial institution home layout
The main purpose of the Home template is to provide an overview of a financial institution’s offerings and as an entry point to login portals, drawing the user into the site to learn more and take action. Home is arguably, the most unique and important design template since it is always – not surprisingly – the most visited page. Because there should be only one homepage attributed to a given site, the Home template is rarely duplicated for creating additional pages. Nonetheless, as the gateway to the rest of the site, the homepage necessitates careful consideration at the template level.

Establishing the overall digital style, the Home template provides a strategic hierarchy of key information, including the institution’s navigation, logins, brand messaging, core products and services, special promotions, latest news and events, as well as helpful resources. Additionally, it provides users with multiple paths to desired information within the site via links, buttons and other calls to action. Understanding many visitors will prefer to quickly jump to online banking, the login feature should be easily accessible on the Home template. However, the Home template must also compel the site visitor to learn more about the financial institution, by clicking through to the internal pages.

Key components of the Home template for banks and credit unions may include:

  • Online Banking and other Logins

  • Sitewide Search

  • Main and Global Navigation

  • Static or Rotating Main Image

  • Product Promotions

  • Featured Rates

  • Solutions Finder

  • Quick Links

  • Membership (Credit Unions) or Account Opening Information (Banks)

  • Customer Service Information

  • Latest News and Events

  • Community Support Information

  • Social Media Feed or Links

  • Proof Point

  • Global Footer with links to Careers, Routing Number and other key links

  • Keyword-rich Text to support SEO

For a live example of a Home page layout, check out Coastal Credit Union’s homepage.

Strategizing a Section Page Layout

example financial institution section page layout
The main purpose of the Section template is to familiarize the user with a family of offerings from a financial institution at a very high level, exploring one section of the main navigation at a time. As a functional directory type of page, the Section template gives the user an overall understanding of a division (e.g., Investment Banking), or group of products or services (e.g., Borrowing) with links to learn more. The section page layout is a template that is not always a necessity, but certainly nice to have when a bank or credit union offers multiple business lines or needs a consolidated destination for a group of digital offerings or resources or contact information.

Typically aligning to the main navigation, each section page layout features one major bucket of the overall site architecture. A section page for an institution’s site might be for the Personal business line, wherein all the underlying links to the pages within the Personal row of navigation would be surfaced in an engaging way on the page. Depending on the planned user interface, a Section template can offer one click to some or every page within a given section of the site, allowing for quicker access to drill-down pages than consolidated main navigations. The Section template offers entrees to the underlying pages, presenting concise overview text, as well as iconography, photography or other consistent graphical elements contained within bands, boxes, tabs or accordions. Complementing the featured content within each section, this template can also display additional relevant information, such as life stages, rates, promos and tools – but keep in mind that the page layout as simple as possible to get visitors to the next click.

Key components of the Section page layout may include:

  • Page Name (recommended as a H1)

  • Supportive Subtext

  • Main Header Image

  • Breadcrumb Navigation

  • Primary and Secondary Calls to Action

  • Subpage Introductions

  • Product Promotions

  • Featured Rates

  • Relevant Resources

  • Life Stages

 
The Section template most often resides in the secondary page level in the site architecture: Home > Section
 
For a live example of a Section template, check out Education First Federal Credit Union’s section page.

Planning a Category Page Template

example financial institution category page layout
The main purpose of the Category template is to provide the user an overview of a select grouping of an institution’s offerings (e.g., Checking Accounts) for further exploration within the site’s internal pages. The Category template serves as a guiding precursor to the next drill-down pages of the site but is deliberately strategized so that visitors who are ready to convert can do so without exploring a deeper level of the site. Often leading with a promotional or branding opportunity in the main header, the body well of a Category template starts with a content that captures the common aspects of a suite of a banking products or services. Introducing what’s to come after a subsequent click, content modules (commonly called “product boxes”) make up most of the Category template. Each content module includes the subpage name, optional lead-in text, the primary action (e.g., Apply now) and if applicable, a link to further explore a particular product or service on its own detail page.

On a financial site, the category page might be for the Checking product line, where its product boxes invite users to click through to discover more details about each individual checking account. Category pages can also present a comparison chart that stacks up similar products with distinct features, so users can quickly and easily assess which solution is the right fit for their unique needs. A comparison chart can be in place of product boxes or in addition to them, whereas the user can toggle between an overview of offerings or compare them.
Unlike a Section template, most financial institution sites have a Category template. Both the Section and the Category templates are intended to summarize and organize subpages, which is why there is a judicious placement of limited content on these page layouts.

Key components of the Category template may include:

  • Page Name (recommended as an H1)

  • Supportive Subtext

  • Main Header Image

  • Breadcrumb Navigation

  • Pages Within the Category Navigation Links

  • Primary and Secondary Calls to Action

  • Summary Paragraph

  • Product Boxes

  • Optional Comparison Chart

  • Resources Band

  • Testimonials

  • Promotions or Cross-Promotions

 The Category template is most often at a tertiary page level in the site architecture: Home > Section > Category

For a live example of a Category template, check out Dime Bank’s category page.

Plotting a Detail Page Layout

example financial institution detail page layout
The main purpose of the Detail page template is to give the user comprehensive information about a specific product or offering from the financial institution. The Detail template is what the Home, Section and Category templates guide the user to along the sales funnel and as such, the Detail template is the most content-rich page layout of the site and the most versatile, too. The detail page offers a deep dive into a singular offering from the institution, focusing the user’s attention to increase conversion rate.

Focused on just one product or service, the Detail page generally presents a header graphic with promotional messaging. Prominently displayed at the top of the detail page as can’t-miss buttons, the primary calls to action encourage the user to apply for a loan or open an account, while the optional secondary calls to action may include visiting a location or contacting the financial institution. The whole point of the Detail page is to get the user to take the next step with the bank or credit union, so every aspect of the information hierarchy is devised to nurture a lead.

The body well of the detail page is laden in easy-to-follow explanatory text, features, benefits and specifications. Bands, boxes, tables, tabs and accordions provide practical containers for even more product details, providing rich content, while minimizing scrolling. At the product detail level, only the most compelling promotion, rate and cross-sell opportunity is displayed that’s tied directly to what’s being communicated on that page.

As a hallmark of the Product detail template, contextual resources allow the user to interact with embedded calculators, interactive videos, frequently asked questions and contact forms that are directly related to that page’s content, rather than linking out to a repository page or third-party site.

The most multi-purpose page of an institution’s site, the Detail template might be used to provide particulars on a Signature Checking account, as well as serving as the basis for each of the other checking accounts as their own standalone pages. Because it offers the most flexible and highest quantity of content modules, the Detail template can be leveraged for pages focusing on singular rates, locations, calculators, news items, blog articles, financial literacy, customer service pages and more.

And, unencumbered by the distinctive trappings of the Section or Category templates, the Detail template can be used in place of those templates when further drill-down pages are not needed, or budget does not allow for additional recommended templates.

Key components of the Detail template may include:

  • Page Name (recommended as an H1)

  • Supportive Subtext

  • Main Header Image

  • Breadcrumb Navigation

  • Pages Within the Category Dropdown

  • Special Promotion

  • Featured Rate

  • Summary Paragraph

  • Feature and Benefit Bullets

  • Embedded Resources

  • Cross Sell

  • Disclaimer Verbiage

 
The Detail template is often the fourth page level in the site architecture: Home > Section > Category > Detail but may exist at any level above as well.

For a live example of a Detail template, check out Paducah Bank’s detail page.

Collaborating on Design Templates for Site Success

While offering table stakes for creating similar types of pages, templates can still be highly customized on an individual page level basis to present a unique experience on the live site. Site administrators can elect to turn special widgets on or off depending on the content and functionality desired for each page, as well as the CMS the site is built upon. Beyond the fundamental templates of Home, Section, Category and Detail, other specialized templates can be conceived, including Landing Page, Blog, Location and Contact templates.

When determining which page layouts your financial institution might need, consult with a digital agency about your different needs, budget and timeline, as well as the search engine optimization (SEO) and usability improvements that can result. Due to the high level of strategy and creativity required to establish design templates, this phase of website development requires a great deal of collaboration between the financial institution and digital agency.

ZAG Interactive strategizes, designs and develops the dynamic templates, providing the basic building blocks for the financial website based on information gathered during discovery sessions, website architecture and often wireframing. Our clients are involved in the creative process and content strategy, from approving a set number of design templates within the initial scope of the project, to providing input and reviewing concepts. Because our financial institution website builds are scalable and modular, additional design layouts can be addressed based on emerging needs before, during or after the project lifecycle.

  • Banks
  • Credit Unions

posted by
Christopher Rinaldi
Christopher Rinaldi

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.
Related Article
First-Quarter Website Launches Mark a Strong 2018 Start