Mobile App Redesign
NAVY FEDERAL CREDIT UNION
CASE STUDY
How might we redesign NFCU's mobile app to simplify the navigation system, incorporate new products and features while increasing discoverability of existing features
Visual Mocks created by Visual Designer Jean-Luc Girard
Background
I've had the pleasure of working on the UX Design Team at Navy Federal Credit Union for 6+ years. I've worked on many different high level projects for NFCU, but the mobile app redesign released October 1, 2018 is one of my most intensive. For the purposes of this case study I'll focus on global navigation and card management.
I led the UX design as a Design Lead.
Our team worked together alongside multiple business units in a collaborative year-long workshop to release our MVP.
WHAT ARE OUR GOALS?
1. Launch our Mobile App redesign MVP
​
2. Simplify the navigation and reduce redundancy
​
3. Increase discoverability of key features and products
​
4. Visual Design refresh
​
5. Target some core ADA needs
Design Thinking Process
1. Empathize
RESEARCH & DISCOVERY
NAVIGATION
With the growing list of new features being added to the mobile app, members found the navigation to be disorienting and not intuitive.
​
Most apps were starting to implement the bottom navigation because it was more intuitive to most users. By not having this familiar navigation system, we aren't adapting to our users need or comfort level.
CARD MANAGEMENT
Member research and operational reporting have uncovered that some of card features are not discoverable.
​
Members who use their mobile app for banking are missing out on core card management features.
​
Another thing to consider is that the most used card features have to do with either losing the card or needing to report it lost or stolen. These are features that we want our members to be able to access quickly while in panic mode. Imagine you just lost your card and you need to freeze it quickly.
2. Define
ASSESSMENT OF CURENT EXPERIENCE
NAVIGATION
-
One long hamburger menu used to navigate through the app.
​
-
As we were adding more features to mobile, members would have to scroll down a lot to see all the entry points to features.
​
-
Member access number and routing number are not visible.
​
-
Contact us is a most used feature, The user has to scroll down the long list to find it.
​
-
The grouping and hierarchy of each feature makes sense.
​
-
When navigating to a feature, the menu closes so you can't see where you are in the app. You'd have to open the menu again to see where else you can navigate.
CARD MANAGEMENT
-
There were multiple entry points for the same feature.
​
-
Card functions were combined with account management making it difficult to differentiate each feature type.
​
-
As the mobile app started getting more features built in, these screens were getting longer and harder to scan.
SCOPE OF REDESIGN
NAVIGATION
-
17 existing entry points (currently in hamburger menu)
-
New navigation menu items
-
Sign in and Sign out
CARD MANAGEMENT
-
13 existing features
-
9 new features (Apple Pay, Card on file, disputes, and more)
-
Centralized location for both Credit and Debit card management
CHALLENGE & OPPORTUNITY
Growing mobile usage presents opportunity to address the current architecture that no longer fits with our strategic objectives.
We want to elevate existing features and add new functionality to grow with our growing member base and mobile app usage growth.
​
Reorganize the architecture based on member identified critical tasks with centralized access to relevant features.
3. Ideate
NAVIGATION
Defining the navigation system and architecture are always my first step when I start my designs. It allows me to envision all of the entry points and connections at a high level.
This Site map only shows the high level navigation for the main navigation, card management and the more menu.
We moved our navigation from a hamburger menu to a bottom navigation with core features exposed for quick access. We chose these top level screens based on user feedback and our analysis of most used features. We added a more menu for the less frequently used features.
.png)
MORE MENU
We condensed our menu by combining similar features and relabeling the menu item. For example, tax statements and account statements can have the same entry point with a singular hub on the next screen to reduce redundancy on the more menu. This also makes the screen easier to scan.
​
Removed infrequently used features like "text banking"
​
Organized the list based on feature usage and member preference from interviews
​
Locations, Profile & Settings, and Contact us, the most used features, moved to the top of the screen and made into large buttons for emphasis.
The sign out button was enlarged and moved to a more accessible location based on thumb reach.
CARD MANAGEMENT
We found that having a designated area for managing debit and credit cards would help with discoverability. We separated account features from card features by adding a button just for card features at the top of the screen. This button takes you to the Card Management Screen where the user has access to all card related features.
​
The visual redesign includes a large image of the card with notable attributes for easy recognition, for example, the color, name of the card, and the last 4 digits. We also included some micro interactions for swiping and scrolling to add more appeal.
We held user testing sessions for getting user feedback to determine exactly how to group the card features. We wanted to make sure we weren’t assuming anything and that this would make sense to our members for better discoverability. Having just the right amount of groups was also important for scanability.
.png)
4. Prototype
I created a prototype of the entire app in low fidelity. This is what we used for user testing and stakeholder interviews.
5. Test
USER TESTING OBJECTIVES
-
Test a mix of members and non members
​
-
Assessment for entire app with a focus on navigation
​
-
How do members feel about giving card features their own management screen?
​
-
What is the discoverability of card management features and how easily can they perform a task, for example, freeze card.
​
-
What are the expectations around the more button and where to sign out
​
-
Feature order of importance review to confirm our hierarchy
USER TESTING RESULTS
Card management task were easy to perform and the entry points were easy to find. Frozen icon wasn't easily understood without having gone through the process of freezing the card.
45% members and 71% non members manually sign out instead of closing the app. Most prefered more prominent sign out button at the bottom of the screen
Bottom navigation was well received along with the label for the "more" button. Participants felt that the items in the more menu were familiar and their location in the app was intuitive
Majority of participants chose the correct location for each task.
Order of importance closely matched usage data from analytics
Roles & Responsibilities
THE TEAM
MY ROLE
2 UX Designers
2 Visual Designers
1 UX Writer
2 Product Owners
2 iOS Developers
2 Android Developers
2 Business Analysts
1 Systems Analyst
UX Design Lead
TOOLS I USED
Adobe XD
MY KEY CONTRIBUTIONS
Journey Mapping, Strategy, UX Design, Presentation
Outcome and Impact
USAGE INCREASE
Interaction with features increased 6x. Some of those features include opening new products like Certificates and IRAs, the use of move money feature Zelle, set notifications, redeem credit card rewards, and freeze card.
PRODUCT AWARENESS
Between October 1-14, there was an increase of 1.78 million in digital usage and 92% of that was via the mobile app with a decrease in calls to our contact center.
ROOM FOR MORE FEATURES
The new navigation architecture gives us the ability to continue to add new features with an intuitive location within the app
TOP FINANCIAL APP
The NFCU Mobile App was voted top 5 financial app by Forester reports in 2018, 2019, 2020, and 2021, and 2022.
REDUCTION IN CALL VOLUME
Self service features allow for more autonomy and reduce call volume