Product & ux work

Eagle Federal Credit Union Website

  • Agency: Gatorworks
  • Role: Lead Designer
  • Responsibilities:
    Wireframes, Accessibility Design, Visual Design, User Experience Design
About The Client

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.

See the live site

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 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!)

Screenshots of the Eagle Federal Credit Union website homepage, desktop and mobile size

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.

Old Eagle Federal Credit Union homepage design at desktop size.
New Eagle Federal Credit Union homepage design.

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.

Primary Tasks:
  • Visiting the website to login to their account

  • Looking up branch information

  • Seeking additional benefits with their accounts

Pain Points:
  • 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.

Primary Tasks:
  • Researching and comparing account features

  • Looking for loan rates

  • Applying for membership or for loans

Pain Points:
  • 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.

Primary Tasks:
  • Locating specific information to share with a customer they are assisting

Pain Point:
  • 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.

Screenshots of homepage wireframe at desktop and mobile  sizes.

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.

Screenshots of checking account comparison cards.

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.

Examples of fonts, colors, and visual styles used for the Eagle FCU website.

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.

Screenshots comparing original homepage wireframe layout to final homepage design layout.

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.

Screenshot of a savings account description page at desktop size.
Screenshot of the locations archive page at desktop size.
Screenshot of the checking account comparison page at desktop size.
Screenshots of the open navigation, checking comparison, and location pages at mobile size.