Project date: 2013-2014
I planned out and managed the entire redesign of LGFCU's 200+ page website, which averages over 260,000 users and one million sessions a month. I oversaw the mapping out of our content strategy, front-end design with our freelance web designer, Matt Pusateri, and implementation of the site into Drupal. I also designed the interface layout, built responsive wireframes and managed two rounds of user testing. The site's goal is to be a financial advice hub for credit union members that is accessible on any device.
This project won a 2015 Marketing Association of Credit Unions (MAC) Gold Award for Website Redesign.
Homepage
We wanted the user to have easy access to log into online banking (Member Connect) on the homepage, but also draw their attention to our main call-to-action banner ad, which is why the login was placed on the far right. The color blue is used very specifically for items inviting interaction, and the custom font Tisa is used for a friendly, but professional feel in the headers and ads.
Product Page
Most interior pages feature a three-column layout incorporating a subnavigation menu at the top right along with related documents, financial calculators and rates, if applicable. The Member Connect login is available as a drop down from the header on every page, but doesn't distract from the main page content.
Aim Blog
LGFCU's member magazine is called "Aim," and the launch of the new website debuted a blog component to Aim featuring useful financial tips and advice. Custom icons identify the article's topic category, and dynamically-generated site links, using taxonomy, display in the sidebar to let the user know if there are related products, services or news items.
The homepage header features direct links to the Rates page and Contact Center, which opens the user's phone app. Every page on the site has header buttons for Member Connect (online banking) and a link to find branch locations.
The mobile menu works just like the desktop view with a vertical accordian and uses large, touch-friendly select areas along with color indications of the navigation level.
Internal pages feature subnav menus for faster access to sibling pages while keeping the main links for mobile users, Member Connect online banking and finding a branch, accessible at all times.
One of my initial wireframe sketches for the homepage layout underneath the main header and navigation in mobile and desktop widths.
Refined digital wireframe using Justinmind wireframing software. At this time the content is getting closer to the final layout.
The finalized homepage content and layout displayed in responsive wireframes, built using the Zurb Foundation framework. These wireframes were used as a reference for building the content types in Drupal and constructing the accordion navigation, as well as the first round of user testing.