Eagle Federal Credit Union Website
- Agency: Gatorworks
- Role: Lead Designer
- Responsibilities:
Wireframes, Accessibility Design, Visual Design, User Experience Design
Eagle Federal Credit Union (EFCU) has been serving members in southeastern Louisiana since 1942. Their highest priority is to provide an excellent experience for their loyal member base and attract new, younger members along the way.
Project Highlights & Key Learnings
What I Did
The biggest hurdles to get over with this project were the lack of clear navigation and user pathways to get to key areas and find information. I addressed this by creating opportunities throughout for important information to shine: defined calls-to-action in the form of strategically-placed buttons, specially-designed responsive boxes for rates and comparisons, and extra navigation tools throughout (e.g. breadcrumbs and sidebars). With visual design that invokes patriotic themes, the overall result is a clean, friendly banking experience for all users.
What I Learned
Less is more. No, even less than that!
While I thought my initial design solved the problem of too much noise at the top of the homepage, it turns out...it didn’t! I had to find a way to both de-emphasize the CTAs, and keep them easy to spot.
Accessible doesn’t have to be ugly.
This is one of the first projects where I was required to consider accessibility and WCAG compliance when making design decisions. At first I was overwhelmed by the thought of having more constraints on what was possible, but in the process I learned that it made it easier to cut unnecessary visual noise (and thus the drive to learn more about accessibility and eventually pursue certification was born!)
The Problem
EFCU wanted to bring their excellent member experience online, but their website didn’t make it easy. The navigation was complicated, and a crowded homepage design didn’t emphasize the right information. Many of the page elements were not optimized for responsiveness, making the website difficult to use on smaller devices.
Project Goals
Create a website that functions as both a resource and an online sales piece, emphasizing key market differentiators such as competitive rates, flexible terms, and excellent service.
Redesign the navigation to create direct user pathways based on the type of service they seek.
Revisit the visual design to make it more open, less monochromatic, and more accessible.
User Profiles
I considered users that we were creating this experience for, and what some of their tasks and pain points would be when visiting the site:
Current Members
Often active-duty or retired military, a wide age range from heads of the family to their teens and young adult children.
Visiting the website to login to their account
Looking up branch information
Seeking additional benefits with their accounts
Difficult to access account login - primarily lived only on the homepage and link was hidden in the navigation
Prospective Members
Civilian millennials coming into their own, looking for one provider to meet multiple needs - banking, home loans, credit cards, etc.
Researching and comparing account features
Looking for loan rates
Applying for membership or for loans
Difficult to read account comparison tables
Too many navigation choices, making it confusing to identify a good starting point
Eagle FCU Employees
Financial advisors and customer service representatives using the website as an information aid when answering queries or directing current and potential clients to make decisions.
Locating specific information to share with a customer they are assisting
Bloated site navigation making it difficult to find the right page on the first try, negatively affecting customer experience
Wireframes & User Experience
After the content team reorganized the sitemap to fall into specific user pathways, I developed high-fidelity wireframes to plan out the pages.
Making the Homepage Into A Launchpad
To achieve the goal of making the website into a useful resource and sales piece, I set out to design a homepage that would give EFCU multiple spots to encourage specific user behaviors, including:
Quick access cards in the hero leading to pages like “Open an Account” and “Make A Payment."
Two flexible content buckets that could feature whatever EFCU most wanted to promote at any given time.
A block with featured interest rates shown prominently, which would be easy for their team to update in the back end.
Easing the Account Comparison Process
In our early meetings, the EFCU team emphasized their desire for a better experience on the Checking Account pages. When we started, the different checking account offerings and features were listed in hard to read tables with too many columns and rows, and the tables weren't adaptable to different screen sizes. The information needed to be easier to digest.
To accomplish this, I designed cards that include “at a glance” information for each account type including a description and fee information, removing the need to scroll across a table or click back and forth between multiple pages. The cards display clearly on both large and small screens, making account comparison a much quicker and more pleasant experience than before.
Visual Design
With accessibility standards in mind and a desire to break out of the all-blue color scheme of the original EFCU site, I developed a high-contrast palette that expands upon the colors in the logo:
Blue is still a main feature, expanded into variants of navy, medium blue, and sky blue. In some headers, the two darker blue hues are paired in a gradient signifying the continuous forward movement of EFCU’s mission to serve their members.
Borrowing from the one stark red feather on the eagle featured in EFCU's otherwise blue logo, the blues in the palette are contrasted with a warm, attention-grabbing red orange used for buttons and major calls-to-action.
The palette is rounded out with a deep gold, used on secondary text accents and links.
To introduce a graphic element to the otherwise simple design, the eagle from the logo is used as a watermark throughout the site. All type on the website is set in the neutral-yet-friendly IBM Plex Sans for excellent legibility at all sizes.
Testing & Making Changes
After testing the website with typical users and finding that the top of the homepage was still too cluttered, we decided to simplify it further by bringing down the amount of calls-to-action in the hero from 4 to 3 options, and they were re-styled to appear uniform with the login dropdown.
The login dropdown as a whole was adjusted to be open by default on the homepage for easy access. Finally, the content below the fold was shuffled around for more focus on featured rates, and a third flexible content bucket was added since two were removed at the top of the page.
Final Designs
The final website meets the objective of being open and welcoming with much less visual clutter and a more user-friendly navigation. The flexible, responsive grid layout makes the new website a more consistent experience across screens of all sizes, and it is no longer a hassle for the user to find the information they need to maximize their existing membership or start a new one.
