UX Case Study 3: XCEL- Mobile Banking App Redesign

Background

XCEL is a regional credit union that is looking to update their current mobile banking platform. They want to re-think their customer’s experiences by adding and improving features that will optimize their mobile app.

In order to do this, we completed research with the following aspects in mind:

  • What customers might want from XCEL that are presently not provided.
  • What draws people to use credit unions versus banks.
  • How this new digital offering can differentiate XCEL from other banks.

The emerging themes synthesized from our discovery & research led us to develop features based on specific tasks that are discussed in the next section.

Overall Goal: To improve the overall experience for credit union members who use XCEL’s mobile banking app.

Targeted Device: Mobile (Iphone 6 Plus)

Website: https://www.xcelfcu.org/

  • Original App can be downloaded from the App store

Who is on the team?

On the team for this project was Noor Haddad and Sarah Baldwin. Both of my teammates had strong research backgrounds and hence lead the main part of the research and analysis portion of the project.

Research/Discovery

For our research we did the following

  • Initial research and finding: App Map and Content Inventory
  • Survey Questions to screen for interview candidates
  • Follow up interviews (in person and on the phone)
  • Contextual interviews with another a local credit union
  • Feature Comparisons
  • Card sorting to gain information on grouping the navigation

Initial findings of the app

When we first opened the app we were quite startled. There were many things going on. It was repetitive, unorganized, and there seemed to be a lack of focus. Here is a screenshot of the first page of the app. What first struck me are the following:

  1. Security: I am not a member and I have access to everything at the same time as a member. Some of these pages have log in portals but some are open to the public.
  2. Lack of focus: When I first opened the app the fist thing I saw was “like us on Facebook”. As a banking institution, I would not expect this to be the focus. Maybe an option later on but certainly not in the middle of the page.
  3. Repetition: There were many buttons that were simply redundant. For example: 1) there were 2 chat with us options, and a third that actually turned out to be a FAQ that was names ask XCEL. 2) There were three ways to find a branch or ATM. Each one seem to have a different focus but really could be combined into one button with a filter.
  4. Below the fold: There were so many buttons on the first page that you need to scroll to see more. However there were some rather important buttons below the fold such as savings calculators. Why would social connection be more important than managing your savings?

To determine if our theory on the app was correct we did show the app to the interviewees after the interview was over to see their reaction. Here are some quotes.

“It’s yelling at me!”
“It just looks like a phishing page.”
“This doesn’t look safe.”

App Map & Content Inventory:

Additionally I did the initial app map. This task proved to be difficult because there unfortunately really wasn’t a flow. Every button went to a different place and often times there were similar buttons that should have been grouped. The app map confirmed the findings above but additionally was able to show some trends such as:

  • Buttons that linked to mobile sites vs not
  • Technology issues: dead pages, broken links, or fields that were too small to type.
  • 3rd Party connections
  • Lack of connections: because each flow was separated there wasn’t a connection other than the back button to get from one task to another. The user was forced to got back to the first page and start over.
  • Multiple buttons leading to different flows, some mobile some not
  • Cluttered and repetitive: some screens just route you to others. These can be condensed
  • Focus is misguided — Order of buttons does not highlight important features of site; ie. Follow on Facebook is thin the center and “Know more about XCEL” is below the fold
  • Advertisement at the bottom of the screen
  • Repeat features such as Contact us, Chat with Us, and Ask XCEL are presented as versus one.
  • No Consistency except for header in secondary level
  • Secondary level is a completely new flow, that does not connect to the home page (no breadcrumbs, push nav, etc, only a back button)
  • Design does not have the look and feel of the client. In fact it feels cluttered and unorganized.
  • Disorganized layout designs on some of the second level

To see the App Map or content inventory please reference the appendix files: XCEL App Map updated 2_17.jpg & Xcel Content Inventory

Screening and Interviews:

For the interviews we wanted to find 2 types of users:

  • users of mobile banking apps
  • users of credit unions and mobile banking apps

To view the full survey form click here: http://goo.gl/forms/JUsd4Hb0D5

We created a survey that screen for these participants and then scheduled calls with the.

User Interview View Questions:

  1. Walk me through your experience with your mobile banking app?
  2. Tell me what features you use most often
  3. Tell me about what type of banking transactions over the last month.

The over arching findings that we gathered from the interviews were:

  1. While credit unions “felt” better they were unable to manage many of the standard daily banking needs like depositing checks.
  2. Users really only went to a Credit Union to get better rates but still maintained their banks as they were more convenient physically and virtually.
  3. They don’t trust the security as much since they are smaller and their websites are often very overbearing.

If you want to see all the survey results please “Interview Responses” in the appendix.

Contextual Interviews: NYU Federal Credit Union:

https://www.nyufcu.com/

The contextual interviews gave us a good understanding from their perspective.

  • Most members also belong to a bank
  • Specific eligibility requirements
  • Mobile app generally for members with checking
  • Free ATM’s with the co-op partners
  • People use it mainly for loans (this was a trend we were seeing)
  • Once they get into the credit union world, they stay in it.

See Appendix for full notes: NYU Federal Credit Union

Feature Comparisons

As part of our research and out transition into the design process we looked at some feature comparisons with other online banking institutions to see how their flow and design was:

Bank Of America
  • Consolidated branch ATM’s and free/shared ATM’s.
  • Ability to deposit checks online.
  • Social media icons did not appear on main navigation.
  • More security features (i.e. Chase’s touch).
  • Travel Notice Features.
TD and Chase

As you can see in these images of TD and Chase, reviewing Home Screens showed that some of the competitors either gave you a category page or an account overview first before all the other options.

Note: we really liked the chase app and the personalized feel that it created.

Personas

After the interviews we grouped as a team and decided on 2 personas. An existing active member of the credit union, and a non active member that needs to set up the mobile banking profile and go through on-boarding to manage their accounts.

Persona 1: Eduardo:

“I want to pay off my student loans as soon as possible!”

Eduardo is a student at Columbia University. He is a member of his parent’s credit union, Xcel.

Halfway through his first semester, Eduardo realizes that he needs get a loan in order to cover the rest of his tuition; his new part time job is insufficient. He needs to start looking more closely at his spending habits.

Needs:

  • To sign up for mobile banking.
  • Take out a loan.
  • To get advice on how to make a budget.
  • Check all of his accounts, and have access to them at once.
  • To make a budget.

Persona 2:

“I want to manage/check my account on the go, wherever I am in the world.”

Claire works for the US Department of Housing and Urban Development and is a member of an associated credit union, XCEL. She also has an account with Chase and Citi Bank.

Claire’s an avid travel and spends a lot of money on camera equipment. She is traveling abroad in Honduras for a volunteer trip and wants to ensure there are no issues with her accounts internationally.

Needs:

  • Manage/deposit money
  • Save money.
  • Check & Manage things on the fly (eg While traveling).
  • Check the bank’s international travel policy.

From these personas we came up with the following tasks:

Design Considerations

  • Increased Security — Adding a login screen before almost all features.
  • Current user vs on boarding a new user.
  • My Accounts as first page instead of Main Menu.
  • Budgeting designed after budgeting apps (i.e. Mint, Simple). Remove the 3rd party and own the process.
  • Simplified & condensed features and interface.

Iterations and Feedback

Iteration 1: Areas of focus, On-boarding

Eduardo: we focused on his on-boarding process which meant signing up for mobile banking, adding his student loan account to his dashboard and making a budget.

After user testing we realized that the on-boarding should really only focus on getting the security features in place and confirming the user. Then, having 2 flows form the dashboard to add an account and then set a budget. This meant that for iteration 2 we broke up the one single flow into 3.

Eduardo On-boarding iteration 1: pushes the user through confirming personal information and adding accounts to dashboard
Iteration 2 only confirmed information then prompted them to add an account.

Other design work: condensing features:

As you can see in these images we took the 3 buttons that al went to some form of find a branch or ATM and condensed it into one button that appears on the home page for quick access ad also in the push nav.
This image shows how we merged the 3 buttons into 1 and added a filter for the different options.

Some Iteration 1 feedback

  • Add a screen to explain managing budgets and show the Credit union account.
  • Add a done button
  • I’m confused on where to go next.

Some Iteration 2 feedback

  • “I would like a confirmation page for the travel alert.”
  • “I like that it’s excited!”

User Flows

Below are the links to the user flows for iteration 1. You can now begin to see the flow from the navigation as versus from a general home page.

Features added:

Final Prototype

https://invis.io/6564LVXRQ

To be able to go through the flows properly in Invision please follow the instructions below for how to enter into those flows. Additionally, while you can do this on the computer it is designed to be on your phone. Enjoy!

Eduardo’s Flow:

  1. Click on sign up and go through the personal info confirmation until you get to the account page.
  2. Click on Add an account underneath you accounts and go through adding an account.
  3. Click on the push nav and select “Set Budget” and go through the flow
  4. Logout to go to Claire.

Claire’s flow:

  1. Click on login and USE THE TOUCH ID and you will end up on the accounts page.
  2. Click on push nav and select travel or find an ATM
  3. For travel active buttons are:
  4. International Rates (maybe we should change the verbiage since this is now get currency?l
  5. Inform XCEL
  6. Find ATM

Next Steps:

  • More user testing.
  • Personalize features.
  • Explore expanded budget features.
  • Explore “Deposit Check” camera feature.
  • Discuss sign up and API’s with developers.
  • Building out remaining features.
  • Discussing with client what features are a ‘Must Have’, ‘Should Have’, ‘Could Have’, and ‘Won’t Have’ (wish list) to further continue to reduce and combine features in the app.

Appendix: https://drive.google.com/folderview?id=0B4Xd-pvlx5SlS1ZlamlwaFZrY2M&usp=sharing

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.