Credit Union Websites
I created multiple award-winning, feature-packed websites for credit unions.
Overview
A website is a credit union’s face online. The site must be fast, look nice, and have the features the visitor needs. I have had the opportunity to design responsive, data-driven websites for a credit union and its subsidiaries. The websites have won multiple awards and recognition from industry leaders.Features
Responsive Design
The websites are designed to work on screens of all sizes from tiny mobile phones to large monitors and TVs. The design adjusts automatically as the window changes size so it will give the best possible view for the amount of space it has available.
Mobile Navigation
On mobile devices, navigation has to be handled slightly different than a larger desktop window. When the website is viewed on a mobile device, a “hamburger” menu icon is displayed. When the icon is tapped on, the website displays a flyout menu with the same menu options as the desktop version but in a more compact format. The search feature is brought to the top to allow someone to easily type in what they are looking for instead of tapping through several menus.
Rates Database
Rates are important to credit unions and credit union members. They must be really visible, accurate, and up to date. Rates can change at any time. Sometimes rates, such as mortgage rates, change multiple times daily. Rates also must be consistent across multiple pages of a website. Big problems can arise if a rate is updated on one page and not on another.
Rates are also displayed elsewhere in the credit union. For instance, digital signage outside and inside the credit union’s branches also must be accurate and updated frequently.
This is why I created a rates database that centralizes the management of nearly all of the credit union’s rates. When rates change, they are changed in one database. Then all of the credit union’s websites and digital signage read from that one database (via an API) to get the most current and accurate rates.
Mortgage Rates Integration
Mortgage rates, by far, are updated the most frequently. They can change multiple times every day. Keeping them accurate on every system is important.
The Mortgage Department at the credit union has a system they to manage their mortgage process. This system contains their current rates. It also has an API that I accessed to get the most current rates from that system and store them in my rates database. That rates database is the source for rate information for all of the credit union’s website and digital signage.
Branch Locator
The credit union has over 40 branches. The website has a feature that lists all of those branches by state, county, and city. It also displays the branch locations and nearby ATMs on a Google Map.
When website visitors access the Branch Locator feature, they are shown the branches closest to them.
Each branch listing has a details page that displays the branch name, address, phone number, a map of the branch’s location, and a list of services and ATMs available at the branch. It also displays other nearby branches and Co-Op Network ATMs in the area.
ATM Locator
In addition to the ATMs the credit union owns, there are approximately 30,000 other ATMs throughout the country that members of the credit union can access free of charge to withdraw cash and check account balances.
I created a feature that displays the location of those ATMs on a map. As the visitor scrolls around on the map, the map loads and displays the locations of ATMs in the area the visitor has scrolled to.
The ATM icons on the map can be clicked on where the visitor is directed to a page that shows the ATM’s details including address, accessible hours (if applicable), a map of the location, and driving directions.
Because the data coming from the Co-Op network is not as accurate as I would prefer, I created a self-reporting feature that visitors can use to report inaccurate location information. If they submit that report, I receive an email so I can review the complaint and update or remove the listing as necessary.
Glia Integration
The website contains a feature that will allow visitors to chat, call, or video conference with an employee at the credit union in real-time. I helped integrate that chat feature into the credit union’s website.
I also wrote some custom Javascript that displays the real-time status of each contact type (chat, voice, video) on the Contact us page of the website. This makes the chat feature more visible for people to see what they can do to contact the credit union without looking at the bottom, right corner of the window for the chat icon.
Employment Listings and Application
I created an employment listings feature that allows the credit union’s HR department to add and edit available employment listings themselves. Website visitors can view those listings and then apply for the open position right on the credit union’s website.
I built a backend management feature for the HR department to manage the job listings and manage the employment applications that come in. It is integrated with the company’s intranet system so HR employees can forward the employment application to the hiring manager without needing to download a resume and manually emailing it. The hiring manager can review the employment application, download the resume, and update HR with the status and disposition of the application all within the web portal.
The system I created also tracks the number of employment applications received by month.
It also has a feature that allows website visitors to enter their email address to receive notifications when new positions are added.
To help the job listings be more visible on the internet, I added schema.org microdata markup (json+ld) to the job listing. This made the job listings show up on multiple websites including, most importantly, Google.
Blogs
The websites have a blogging feature built in that supports multiple blogs per website. The articles can be added to the blog with pictures. Comments can be added to the blog articles. Comments can also be disabled per article and the comments feature is automatically turned off after an article has been posted for a certain period of time to control spam.
Twitter Integration
The website utilizes the Twitter API to display tweets from the credit union’s President and also from the credit union’s marketing account. The listings are displayed on the blog websites next to the articles. When someone clicks on a tweet, they are directed to the Twitter page for that tweet.
Every page on the website also uses the twitter meta tags to better display content in Twitter if a credit union page is referenced.
Newsroom
The websites have a newsroom feature to post news articles related to the credit union. The newsroom has an area to post general news articles and a separate area to post employee advancement news articles.
FAQ
The websites have a frequently-asked questions area where the credit union can post help articles for any topic they choose. The topics currently include the online banking system help documents, branch information, ways to contact the credit union, information about Visa cards, shared branching information, fees, Apple Pay answers, and other.
The FAQ area also has its own search feature so people can search for things only in that section. The site’s main search feature also includes results from the FAQ area.
Employee Directory
There are certain employees in the credit union that have public-facing jobs - insurance agents and mortgage loan officers for example. I created a feature that gives these employees their own page on the website. The page shows their name, a photo, a short bio, and their contact information. For mortgage loan officers, the page also has buttons for people to apply for a mortgage.
Repo Lot
Click here to learn more about the Repo Lot feature.
Matrimoney
Matrimoney is a feature where couples can create an account online to receive money from friends and family (similar to a registry). The couple’s account is registered in a database which creates a unique page for the couple. The couple can then send out the URL of that page to their family and friends.
When a family member visits that page, they can enter an amount to give to the couple, enter a brief note of congratulations, and then enter their credit card information. When they submit the form, the system charges their credit card and a backend process puts the money in their account with the note. The credit union covers the credit card charge fees.
Account Activation
Click here to learn more about the Account Activation feature.
Search Integration
For the search feature, I started out building an indexing program myself and using SQL server’s full text indexing feature to provide search results on the website. This worked okay but not great.
So I decided to use Google’s paid search API to provide the search results. I re-purposed the indexing program to continue crawling the website but instead of indexing the results, it builds a list of pages in the site’s sitemap. Google then crawls that sitemap daily and indexes the pages.
Then the site’s search feature uses the keyword(s) entered by the visitor to query the Google API and display a list of results on the page. Google’s results are much more accurate.
Golf Tournament Registration
The credit union sponsors a golf tournament for Utah State University’s alumni association. I built a registration process for the tournament’s sponsors and participants. It collects participant information for multiple game and sponsorship types. It also handles the credit card processing.
Race Registration and Timing
Click here to learn more about the Race Registration and Timing feature.
Credit Card Integration
The website takes credit card payments for multiple features including Matrimoney, Race Registration, and Online Donations. It communicates with a backend, real-time, third-party credit card processor using an API. The system accepts all major credit card types.
Loan Calculators
I created loan calculators for most vehicle types on the website. The calculators simply show the payment amount given the vehicle price, loan term, and the rate. The rate is automatically updated on the calculator from the rate data in the rate database.
SEO
I constantly keep watch of how the website is doing with search engine optimization. There are several things I have done for it to make rankings high.
These efforts include:
- A sitemap to allow Google to index the site easily. The site map is updated every day by a backend crawler.
- Microdata for organizational data, job listings, credit cards, branches, and ATMs.
- Properly sizing and compressing images (the Marketing team has gotten lazy with this as of this writing).
- Including caching information in the http headers for images, CSS, Javascript, and other assets.
- Including city and address names in the branch location pages (more could be done there).
- Lazy loading images.
- Minify CSS and Javascript
- Use HTTPv2 to serve the content.
- Use open graph protocol for social media integration.
- All pages have a canonical tag and a useful description meta tag.
- The language of the website is specified in the header.
Accessibility
These are some of the things I did to make the websites accessible to people with special needs:
- Use ARIA descriptions.
- Provide an anchor tag to allow screen readers to skip past the navigation.
- Use HTML5 tag elements like header, main, and footer.
- Use proper hierarchical html structure to make it easier for screen readers to navigate.
- Use descriptive image alt tags for all images.
- Ensure font sizes are large enough and color contrast is wide enough for people with vision impairment.
Security
These are some things I did to make the websites more secure:
- Removed various http response headers which identify the server type, application framework used, or other identifying information that could be used to target the web application.
- Added a content security policy to protect unauthorized third party content from being injected into the site.
- Added cross site scripting protection headers.
- Ensure TLS is the most recent version the server will support.
- Scan the website regularly with SSL Labs for TLS vulnerabilities.
- Real-time email notifications of any error that occurs on the website.
- A nightly email of the most traffic generated by IP address in the logs (a program I created does this).
- A program I wrote that runs every 5 minutes to scan the logs for referrers to monitor for phishing attempts.
- A secured continuous integration system with approvals required for a production content push.
- Email trail of every content and code change.
- An alerting system that watches for specific content on the website’s home page. If that content changes or the page does not load, I get an alert.
My Involvement
I was the initial developer of the entire website and created all aspects of the website including the graphic design, HTML, CSS, Javascript, pages, C# controllers, web services, database backend, and SQL database schemas. I also configure and maintain the web servers and load balancers. I manage the DNS entries and TLS certificates.
There are others now in the Marketing department who contribute content and images. So many of the original layouts that I created have been modified since launch (for better or worse).
Most of my work now involves creating new features that are above adding content. And I still maintain servers, databases, and load balancers.
Results
The websites have received two industry awards over the years: one was a Diamond Award from the Credit Union National Association and the other was a Golden Mirror award from CUES. The website was also featured in the Financial Brand industry magazine.
The two websites receive around 8,000 visits with approximately 17,000 page views per day currently.