Delivering Financial Services to Neighbors and Small Businesses
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.
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.
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.
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.
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.
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.