Kaytlyn Tanner

View full Competitive Analysis here

As a personal project, I redesigned Nephi Western Federal Credit Union’s current website. The original site lacked essential information for customers and the overall layout was outdated, making it difficult for customers to find what they need efficiently.

To improve the user experience, I created a modern, user-friendly interface with intuitive navigation, improved accessibility, and a responsive layout for desktop and mobile. This redesign enhanced content organization and usability, making banking information easier to find.

ROLE: UX/UI Designer

TIME FRAME: 5 weeks

TOOLS: Figma, Whimsical

Key Problems

What do users expect?

Nephi Western Federal Credit Union’s website lacks essential information and has an outdated design

Clear, visually appealing design

Easy to navigate

Professional yet friendly

User-friendly

Easy to navigate

Consistent with style (shapes, colors)

Some of the headings are difficult to read due to the white text on light backgrounds

White text on light blue background is difficult to read

Home page is messy

Transparent background on the buttons makes the text hard to read

The banking competitors I analyzed had strong information architecture, making it easy to find necessary information. While most had good UI design, a few faced accessibility issues, especially with color choices and typography. All offered online banking services, including loan applications and account openings.

I identified two key areas for improvement: making rates more accessible, and allowing customers to apply for different accounts online. To address these, I focused on enhancing the processes for applying for a home loan and savings account. My user personas below were created to help identify key touch points and ensure the designs address the user needs and frustrations effectively.

To gain a deeper understanding of what banking customers expect from a banking website, I conducted user interviews. I asked participants about the features they prioritize, the information they find most important, and any frustrations they have encountered with banking websites. Below are the key insights I gathered.

To start this project off, I spoke with my client about their design and project goals. They wanted the website to be easier to navigate and for information to be more accessible. Since the current UI is outdated, they requested a full website refresh to make it look more modern and engaging. They also wanted the hero section to include the phrase: "Lowest loan rates, highest savings rates".

With this knowledge in mind, I conducted a competitive analysis to examine the features offered by other banks and credit unions, as well as how they presented their information. I was also interested to know whether these websites included the information my participants expressed as important.

All participants use banking websites for online banking and account management.

All participants use banking websites to check rates and apply for CDs, mortgages, and savings accounts online.

Many visit banking websites to check branch hours and locations.

A few emphasized the need for a simple, intuitive, and user-friendly design.

Lacks current information

Outdated UI and layout

Difficult to navigate

Project Overview

Solving the problem

THINK

STAGE

GOAL

ACTION

THOUGHTS

MOOD

CONSIDER

DECIDE

ACT

Created by iconsmind.com

from the Noun Project

Created by iconsmind.com

from the Noun Project

Created by iconsmind.com

from the Noun Project

Created by iconsmind.com

from the Noun Project

Decide to look for a

financial institution that

offers great savings rates.

Set aside time to start

researching different

options.

Research nearby financial

institutions and compare

rates.

Decide on a financial

institution to open a savings

account with.

Open a savings account at

chosen financial institution.

Meet with a customer

service representative and

open a savings account.

Use Google or other search

engine to locate nearby

financial institutions with

great rates.

Look through research and

choose the financial

institution with the best rate.

“Wow, this bank has really good

rates!”

“I want to open a savings

account here!”

“I’d like to start saving! I

wonder who has the best

rates?”

“I’m looking forward to

spending some time

researching options.”

“It’s hard to choose which institution to bank with!”

“Which of these banks has the best interest rates?”

“I opened my first savings account! I’m so excited!”

“I’m very happy with my decision to bank here!”

Rachel’s Customer Journey Map

I created a customer journey map for Rachel, my user persona searching for a financial institution with competitive savings rates. The map outlines her thought process and the steps she took to choose the bank where she ultimately decided to open an account.

With a clear understanding of user needs from my personas, I moved on to mapping out key task flows. These flows outline the essential steps users take to accomplish their goals, ensuring a smooth and intuitive experience.

Each flow begins on the homepage and guides users through a few steps to reach the "Apply" page. For the home loan flow, I incorporated a loan calculator, as most users rely on this tool to determine their desired loan amount and repayment period.

Once I determined the best way to display the information, I used my low-fidelity wireframes as a guide for my mid-fidelity wireframes. I created digital mockups for the homepage, services, loans, accounts, become a member, and an online application for a savings account. Below are both desktop and mobile wireframes.

I designed multiple low-fidelity page variations to explore different design layout options. To determine user preferences, I conducted concept testing, gathering feedback on what participants liked, disliked, and found confusing. Through this process, I identified the most effective layouts for the homepage, rates page, and savings account page.

Exploring layout options

The vast majority of participants preferred the first design over the second. They liked how clean the design looked and how easy it was to see the different rates.

While participants favored the first design, there were mixed opinions on the online banking login in the hero section in the second. Some thought it looked out of place while others liked that it was very accessible.

Success

Concerns

Apply for a home loan

Apply for a savings account

LOANS TAB

HOME LOANS

LOCATE RATES

LOAN

CALCULATOR

HOME PAGE

APPLY

SAVINGS ACCOUNT PAGE

SELECT TYPE OF SAVINGS ACCOUNT

ACCOUNTS TAB

HOME

APPLY

My client wanted the phrase “Lowest Loan Rates, Highest Savings Rates” to be the first thing users saw when visiting the website, so that was my top priority when designing the hero section.

Although opinions in concept testing varied on the mobile banking login on the homepage, I chose to keep it, as accessing online banking is one of the primary reasons users visit a banking website. After conducting usability testing, participants mentioned that having the login in the hero section was a helpful and convenient feature. That helped to reinforce my design decision.

The Credit Union already had a “Become a Member” page, so I took the information from their site and redesigned it with a better layout. Since applicants couldn’t submit the application online, I wanted to make that possible to make the process easier.

Since rates were a top priority for many users, I wanted to ensure they were clearly displayed on the homepage and easy to access.

I designed the loans page to clearly display each type of loan along with its subcategories, making it easy for users to explore their options.

On the Accounts page, users can view the types of accounts the credit union has to offer. If “Apply Now” is clicked, users will be taken to an online application.

Although not shown here, if users select “Apply”, a pop-up window will appear asking users if they are sure they want to submit. When yes is selected, a “Success” page is loaded, informing users their application was received.

I then transformed my mid-fidelity designs into high-fidelity prototypes and conducted usability testing. My participants interacted with the prototype as if they were using the website, completing all tasks without any errors. The feedback I received was positive, with many noting that the designs were clear and easy to use. They appreciated having the rates displayed on the homepage, as that’s the information they’d most likely look for. They also found it helpful to be able to apply for an account online.

Overview and Goals

For this project, I worked on redesigning the website for Nephi Western Federal Credit Union to make it more modern, user-friendly, and informative. The current site lacks detailed information for customers, especially about services like online banking, interest rates, and account applications. My goal was to understand what current members expect from the website and design a site that would meet those needs.

Research and Insights

In order to understand what members truly wanted from the website, I conducted research through user interviews and a competitive analysis. I discovered that users prioritized easily accessible information, such as interest rates, branch locations, and online banking services. They also expressed a desire for a simple, intuitive design that made navigating the site straightforward. From these insights, I was able to create user flows and wireframes that streamlined the most common tasks, like applying for loans or opening accounts online, ensuring that these processes were as clear and efficient as possible.

Mobile layouts

Nephi Western Federal Credit Union had recently introduced a new logo and color scheme, so I chose to keep their existing design.

Final Thoughts

Test the Prototype

Final Usability Testing Results & Wireframes

I designed cards for each loan type and included an icon to enhance visual engagement. If a user were to click on “View Rates”, a pop-up window would appear and users could easily access loan rates, terms, and a loan calculator to estimate their monthly payment.

Participants thought the design was intuitive and appreciated the convenience of viewing rates and applying online.

Using my high-fidelity designs, I created mobile layouts for the various pages to ensure a seamless experience across devices.

I decided to include just the “Login” button in the hero section, as it’s the most important action for users.

In the Competitive Loan Rates"section, users can scroll through the various loan rate cards to explore different options.

On the Services page, I decided that the best way to display the information was in a vertical layout.

I decided that a drop-down menu would be the most effective way to display the loan and rate information. This approach keeps the page clean and organized, making it easier for users to find the information they need.

LOANS

Nephi Western Federal Credit Union offers low interest rates for just about everything.

Auto Loan

Personal Loan

Home Loan

Conventional

Refinance

5.51%

APR

As low as

APPLY NOW

VIEW RATES

Address:

500 N Main Street

Nephi, UT 84648

Phone Number:

435-623-0000

Hours:

Monday-Friday

8:00AM-5:00PM

Online Banking

Careers

Become a Member

Services

Terms of Us

Legal

SERVICES

Explore our comprehensive banking services, including checking and savings accounts, loans, and mobile/online banking.

Address:

500 N Main Street

Nephi, UT 84648

Phone Number:

435-623-0000

Hours:

Monday-Friday

8:00AM-5:00PM

Online Banking

Careers

Become a Member

Services

Terms of Us

Legal

Enjoy hassle-free banking with our online platform! Access your accounts 24/7, transfer funds, and pay bills securely and easily.

Online Banking

LEARN MORE

GET THE APP

Bank anytime, anywhere with our mobile app! Enjoy instant transfers, bill payments, and real-time balance updates. Download now and take control of your finances on the go!

Mobile Banking

We offer low interest rates for vehicles, homes, RV’s, and personal loans.

Loans

Enjoy easy access and growth with our checking and savings accounts! Open both today!

Checking & Savings Accounts

Boost your savings with our savings certificate! Enjoy higher interest rates and secure, guaranteed returns. Click on Savings accounts to learn more.

Take control of your spending with our Prepaid Visa! Load funds, shop anywhere Visa is accepted, and enjoy the flexibility. Get yours today by visiting us!

Simplify your spending with our debit card! Enjoy easy access to your funds, secure transactions, and the convenience of shopping anywhere.

Savings Certificate

Prepaid Visa

Debit Cards