NBC Bank

NBC Bank

Delivering Financial Services to Neighbors and Small Businesses

Project Overview

Project Overview

Challenge

NBC Bank (formerly National Bank of Coxsackie) came to us in search of a complete refresh of their online presence. Their current website was outdated and lacked cohesion, which was counterintuitive to the all-in-one banking services offered to their members.

Objectives

  • Design a website that reflects recent brand revamp

  • Push all-in-one banking message in website structure and information architecture

  • Display services in a clear and easy to understand fashion for both current and new NBC members

Project Scope

Website Redesign

Tools

Figma, Photoshop, Illustrator, WordPress CMS, HTML5, CSS3, Asana, Ziflow

Role

UI/UX Designer (In-House)

Duration

2 Months (60 hours)

Our Approach

Brand Refresh

In addition to redesigning their website, our team also gave their brand a complete facelift, including a new logo, colors, and even a name. They wanted to get away from a name that ties them to a specific region, as they now have branches all over the Capital Region and more. The result: a modern, much more approachable brand.

Focus on Products & Services

While modernizing the interface of the new website, we also focused on presenting their products and services in a way that would be much easier for users to digest. It was difficult to compare products such as accounts, as it was not possible to view more than one at once. Additionally, the old website lacked interactive elements. CD charts were static, and their list of branches consisted of a couple lines of text and a small image.

Information Architecture

Information Architecture

Home Page Layout

The home page would include all major products and services as well as useful resources for anyone to use. There would also be an interactive mockup of their mobile app showcasing available features. Other callouts would include Zelle® and personal loans.

Modernized User Interface

Modernized User Interface

Collaboration with Developers & SEO Team

With a rather large site and some pages being added post-launch, we collaborated with the SEO team to come up with a plan that would make the process of uploading content much more efficient. This plan consisted of designing "reusable blocks" in Figma and piecing together page layouts in the same way they would be built in WordPress. This enabled the SEO team to add content to current pages or even create new pages with little-to-no help from the web team. This also sped up the process of designing the mockups as any page that was not mocked up could be built using strictly the pre-built blocks. Lastly, the blocks were built using Figma's auto layout and variants, making them versatile and easily editable for revisions and different treatments.

Iconography

I designed a complete icon library for all products and services as well as their mobile app's primary functions. This was especially useful on pages such as the loan landing page where each type of loan was easy to identify (ex. auto versus mortgage versus commercial.)

Dynamic Charts

Further improvements to the website would include the addition of dynamic charts. The new CD chart would allow for users to calculate how much interest they would earn without having to leave the website, ensuring that the user journey would not be disrupted.

Interaction Design & Prototyping

Interaction Design & Prototyping

Client Presentation

This project would serve as a test run for a new proofing software called Ziflow, which had the ability to embed Figma files into its proofing tools. To make the process of viewing each page template easier, I created a Table of Contents and a short guide explaining how to navigate the prototype. The logo would take the reviewer back to the Table of Contents, where they could then navigate to any template they like.

Interactive UI Elements

As shown below, interaction design was an important element of the new website's user experience. An additional navigation system containing anchor links served as a table of contents for each page. Additionally, the several NBC branches were visible with minimal scrolling, and details could be revealed for each one via an accordion design. Lastly, tabs were included to display different charts for loan rates and terms.

Finished Website

Finished Website

The All-New Digital Branch

The new NBC Bank website captures what it is like to step in one of their branches: modern, welcoming, and customer-centric. Users can open accounts, apply for loans, or use any of their financial calculators. The new website is as an extension of the hometown, neighborly touch that NBC Bank delivers to its communities.

Final Thoughts

Final Thoughts

Better for the Experience

This project has pushed my boundaries the most during my journey as a UI/UX Designer. I had the opportunity to acquire and hone skills with several Figma tools and curate a design system. With these experiences, I have seen improvement in my craft both in quality and efficiency.

Serving Our Community

As an advocator for financial education, I am honored to help NBC Bank serve more members of our communities by offering them the products, services, and tools they need to reach their goals. Thank you for reading.

Let's Work Together

518.506.6706
derekhallorandesigns@gmail.com
© 2024 Derek Halloran Designs

Let's Work Together

518.506.6706
derekhallorandesigns@gmail.com
© 2024 Derek Halloran Designs