Site Mapping – Chase Mobile Banking App

This week we created a site map of one of our personal banking apps. I chose Chase because they have an app that I find intuitive and easy to use.

To start, I listed the goals and sub-goals one would have for interacting with the app. These goals came from both personal experience and what I believe a Chase would want a customer to achieve through their interface. For me, being able to check/pay off a credit card balance, view past transactions, and redeem reward points are the most important functions of the app.

Goals_Assignment 1

I then went through every page and jotted down notes regarding core, non-core, and non-functioning content. Chase has a lot of content. Way more than I ever use on a regular basis. So this ended up being a two-fold learning experience. Not only am I getting much-needed practice with concept mapping, but I now know significantly more about the options and functions available to me as a Chase customer.

ListView

After chronicling every page, I began making a low-fidelity layout showing the different areas in the Chase app. This provided a basis to begin digitizing a higher-fidelity graphic.

LowFiMap

Before joining AC4D I had never heard of Sketch. So this assignment marks the beginning of a journey into a new tool, which I rather enjoy. I found Sketch to be very similar to Adobe Illustrator, which meant that it didn’t require major changes in terms of workflow.

The Chase banking app is full of functionality, which is reflected in the site map.

Concept Map_Assignment 1

During this process, I thought about changes Chase could possibly make to improve the customer experience. I mentioned earlier that I enjoy using this app because, in terms of its core functions, it’s intuitive and incredibly easy to use. However, I do believe there is greater opportunity for Chase to convert banking clients in the investment clients. This was noted by a red ‘!’ on the site map above.

In order to open a brokerage account, for example, you can only do so by opening a small menu in the top-left of the landing page and clicking through a couple of links related to J.P. Morgan, which merged with Chase around 20 years ago. Opening a banking account, in contrast to an investment account, is an obvious option on the landing page. So if it is a goal for Chase to convert banking clients to investment-account clients, I believe they could consolidate the investments section into the existing ‘Open an Account’ option and allow the customer to choose banking or investment accounts from a single link. In this hypothetical scenario, the site map changes, but not in a substantial way.

Future State_Assignment 1

I enjoyed taking a deep dive into the architecture and content of Chase’s mobile banking app and look forward to what’s next!

Mobile Banking App IA Redesign

There are so many different preferences of bank customers. Some people want to have nothing to do with the high maintenance fuss of banking and managing accounts. Others want their hands on everything. People think they know themselves and their preferences, and then they lose their wallet, and all of a sudden their needs for the app are totally different than before. What is appropriate to have on a mobile app that makes for a functionally simple yet robust app?

When I use my Wells Fargo app I often feel like there are far too many steps in between the landing page and my goal having opened the app. If you are someone habitually checking your account balance and perusing transaction histories, then Wells Fargo is great for you. But why do I have to navigate multiple menus to get to check deposits and account transfers? The Wells Fargo App tries to do a lot, and it grows more bloated with every feature that is clumsily incorporated. I’ve represented my information architecture experience with the app below:

WF@2x

When considering redesigns I wanted to keep the main functional goals in mind. While there is no doubt that things are missing, I decided to iterate with a very clear and simple map so as to emphasize what the root functions are of the banking app. Things can get more busy in later iterations and prototyping when things are more clearly missing (under build rather than over build).

The true shape and content of the app should be informed by user scenarios and needs. Here are the bones.

WF Copy@2x

MY (very own) UFCU : A Story of Redesigning an App

This week at AC4D, I took on the challenge of redesigning my banking app. Like most adults, I have a handful of banking options because no single bank offers all the services I want and need. For this project, I chose the University Federal Credit Union’s (UFCU) mobile banking app.

Setting out on this experiment, immediately I had some choices to make between a banking app that I no longer bank with but still keep around or the new banking app that I use only one or two features out of.  I opted to audit the app of my older bank, UFCU, a seemingly simpler one. I felt like an imposter because I haven’t actually banked (as in depositing my paychecks into and use a debit card) with them for years. As I earned more money over time, I found myself not getting what I needed from UFCU. I don’t even know if my debit card is still active since I last used it in 2013!  I mostly keep my membership because I know that my tenure with them will get me a low loan interest rate, and even better customer service. And that is about the only reason I use UFCU for, loans.

AC4D_2019_KimNguyen_A1bankapp_01
The sad balance of my old UFCU accounts.

This mobile app was entirely new to me. And I have to say that it was very lovely compared to the first time I enrolled in 2011-2012, on my old Motorola Razor flip phone, remember that one? Back then phones still fit in your back pocket, and we didn’t have touch screens and touch ID sign in. Everything, including UFCU’s mobile app, has changed so much. I was impressed with the new UFCU.

While auditing and mapping the feature of the mobile app I kept asking myself “Who are their customers now? Why did they prioritize the features that they did?” It certainly was not for me. Here is a look at the current state of the app.

AC4D_2019_KimNguyen_A1bankapp_02-4_png

So in my redesign, I imagined a blend of the customer I use to be, and the customer I am now.  Pretending as if this redesign was for the current project, and wanting to maintain architecture as to not alienate existing customer while surfacing the features that would have been handy when if I still had a loan with them.  Here are the results.

AC4D_2019_KimNguyen_A1bankapp_03_png

If only I can add ‘full ATM fee refund’ as a feature and ‘earning airline points with card purchases’, then I would be set to coming back to UFCU.

PNC Virtual Wallet: Concept Map Redesign


Like many banking apps, PNC Bank’s Virtual Wallet has a plethora of functions and abilities. While not the worst banking app I’ve seen, the app still struggles with finding a balance between information overload and oversimplification. This week we were tasked with mapping out the current navigation and information architecture and then redesigning it based on our own needs.

The current state of the Virtual Wallet has several features that are working well. First, it gives a sense of security. I have set up Touch ID, so I was able to use my fingerprint. It also occasionally prompted me for my pattern passcode as well. The app would not allow me to take any screenshots, which while inconvenient for this project, did make me feel more secure. Additionally, the app does offer fairly easy access to the mobile check deposit feature, which is very important to me.

Current concept map of PNC Bank's Virtual Wallet App
Current concept map of PNC Bank’s Virtual Wallet App

 

As you can see in the above map of the current state of the Virtual Wallet, the home screen after I login is my account information for all of my accounts, including my bank credit card, my savings, and my checking, which is broken into two parts: spend and reserve. On the home page, this is set up as a long list. It includes every account I have with PNC, their balances, and their transaction history. This is not the information that I usually use the app for, so seems unnecessary to have as my default view. 

In my redesign, I changed the home view, as seen below, to include less information and better guidance. It now features several large categories, including Deposit, Pay Someone, View Balance, and a link to the menu. This facilitates the fast actions that I need, but still gives me the option to view all the details of my accounts, if I want.

Proposed changes to PNC Bank's Virtual Wallet App
Proposed changes to PNC Bank’s Virtual Wallet App

Typically, when I use the app, I am either depositing a check or paying a friend. For me, those functions are now listed prominently and have very few steps to achieve them. Mobile check deposit is especially important for me because, since moving to Texas, I am an out-of-state customer for PNC and I do not have physical places to deposit my checks. When I get checks, I want them to be in a secure place as soon as possible, so I don’t forget about them or, more likely, lose them. The redesign allows for quick mobile check deposits and peace of mind for me.

The second thing that I use the app for is paying other people. While I tend to use Venmo for paying friends, I still use my banking app for recurring payments (like paying my friend for our joint gym membership) and for paying people that don’t have Venmo and want money straight from my bank (like my past landlord). I made this feature prominent as well to allow for fast banking action.

In the redesign, I also realized that these main functions may not be most important for everyone, so I included a Set Home feature, which allows the user to select which three main functions they want to see on their own homepage. For instance, if someone would rather have the fast action to pay their credit card bills, transfer money between their accounts, and use the Punch the Pig feature for quick savings, they could change these in the Set Home feature and those would be the three categories (along with the link to menu) on the homepage. I’m sure as this project continues many other uses or desired uses from other people will come into focus, but for now, I figured making the homepage modular would allow people to personalize it for their needs.

Lastly, there were several redundant and unnecessary features. In the original design, there was a category in the menu called Account Activity, which effectively just took you back to the homepage. This was redundant and potentially confusing, so I did away with it. I also renamed a few things to make their function more explicit and clear for the user. I also broke up a couple categories to allow for quicker comprehension. For instance, Rewards and Offers were originally categorized together, but realizing that the Rewards were things that I could claim immediately and Offers were things I needed to sign up for (like new credit cards and auto loans), I decided to separate them.

In the breakdown of the app and the redesign, I was able to get a better understanding of the core functions of the app and discovered features that I never knew existed. From there, I was able to restructure the navigation and information architecture to better suit my needs as a user. Coming soon, I plan to get more feedback from others with the hopes of serving more needs beyond my own.

 

 

Wells Fargo App Diagnosis

This week for class we had the opportunity to really analyze the system of a banking app, by creating a concept map, which is a diagram that depicts suggested relationships between concepts.

I had the pleasure of analyzing the application of the large banking corporation, Wells Fargo. The application has many functions.

It is not the most user friendly application as many paths that the user can take lead to a page asking the user to call a number or visit one of their locations. It also has many paths that overlap others that already exist.

IMG_2945 (1)

To create this map I began by taking screenshots of the various pages of the app and printing each of them out. Once I did that, I was able to identify what the various functions and call to action on each page was.

From there, I started mapping these interactions and loosely found a way that each interacted with the other.

Quickly, my map became a mess. Four iterations later I created the one you see above (which still has many intersecting lines) but revealed many things about interactions within the app.

Generally, there are a lot of paths. And many of those paths lead to the same place as others. It can be difficult to know the one (ideally intuitive) place you should go to find a specific function.

To add, some prompts simply lead to a page asking you to call a number or visit a location, which feels like an unnecessary path.

IMG_2946 (1)

As such, as I considered my redesign, I wanted to make information on the app (which most all seems apt and important) more equitably distributed.

This was a very challenging exercise mostly taken up by creating a readable concept map design that showed the layout of information within a extremely robust and complex app.

Aspiring to Model a Banking App

Aspiration dubs itself a “Financial Firm with a Purpose”. My favorite features are the ability to earn interest on my checking account balance, use any ATM in the world for free (because they don’t have any brick-and-mortars), and that I have the autonomy to decide how much I would like to pay Aspiration as their monthly service fee.

I began inventorying existing functionality by taking screenshots of each individual screen within my banking app. I found that over 80 separate screens with potential actions are possible within what I thought was a relatively simple and straightforward app! This is partly because Aspiration offers an investment component to its users which comes with the ability to buy and sell shares, adding an extra layer of complexity into the app’s functionality.

Next, I mapped out the functionalities in the below concept map:

Aspiration_Concept Map

I am overall relatively satisfied with the functionalities in my existing Aspiration banking app and would suggest only minor redesigns for the next iteration. First, while it was helpful to be able to view my personal info (name, address, phone number, etc.) from within the app, there was no functionality to edit that personal information, so I would add that feature.

Aspiration_Concept Map_Redesign

Also, it would also be nice to have the ability to set alerts on my account balances, send notifications when transfers have completed, and create recurring payments from within the app. These are important functionalities to integrate in order to keep Aspiration competitive with today’s market.

Concept Map Redesign of a Digital Banking App

For our first assignment in our Designing Digital Interfaces class we focused on mobile banking apps. I chose University Federal Credit Union’s mobile application. With the goal of outlining all the application’s functionality to better understand where changes could or should be made I started by clicking through every single button in the existing application and taking screen shots to look back at and reference. I also quickly sketched out the hierarchy of the buttons and pages. This sketch helped me visualize the flow in the application as well as start to differentiate the main product areas, subsections, non-core functionality, and non-functional areas.

Then, I was ready to start laying out my concept map. After struggling for a bit to find a program that I liked I decided to just pin what I had to the wall so I could look at it all at once. This was really helpful for me to be able to move portions and play around with layout.

Early drafts of UFCU concept model
Early drafts of UFCU concept model

Finally, I digitized my concept map using arrows and element placement to show hierarchy and feature flow within the application.

Concept map of current UFCU mobile application
Concept map of current UFCU mobile application

I also used element size (large to small) to show which features I deemed the main product areas, subsections, non-core functionality, and non-functional areas. Depicting digital forms and questionnaires in the application was a little tricky. I chose to use boxed outlines and dotted lines to identify and group form elements.

Concept map legend
Concept map legend

This is an application I’ve had for years, and I’ve always thought it works great for my needs. I usually use the mobile app to check my balances, transfer money between my own accounts, and deposit the rare check. Looking at the whole concept map, that seems very small, maybe only a third of what’s available.

Concept map of redesigned UFCU mobile application
Concept map of redesigned UFCU mobile application

I found this model of the existing application very useful as I began thinking about the second portion of the assignment which was a redesign of the application. If you’d asked me before what should be changed or added, I’d probably one have thought to add the ability to make mortgage payments through the app, and definitely wouldn’t have known where that might fit. Being able to visually look at the entire application was really useful in identifying the missing functionality, and choosing the best place to add new functionality.

For example, in the ‘Bill Pay’ section I didn’t have any payee’s setup, and there is no functionality in the mobile app to add one. This is a dead end for a user so in my redesign I added that functionality.

The existing ‘CardKeeper’ screen has two buttons that currently open an info box with a phone number to call, but this number is not linked for a user to click on it and immediately dial. If this app is redesigned I think that would be more helpful for users who are likely already frustrated about their missing card. Other functionality that was added in the re-design includes the ability to setup and manage notifications under the ‘More’ button, transfer money to other financial institution accounts in the ‘Transfer’ section, and updated payment options.

Ally Bank Mobile Infrastructure: This Had Better Work

Intro: Ally Bank is an online-only bank. There are no physical locations besides a large impenetrable office in Philadelphia for employees. Being one of the first online banks, Ally’s mobile features have since proliferated all banking apps, most of which have physical branches.

So for Ally, this app had better work, because there is no physical alternative.

Fortunately, it does. For the most part. Here is a “Concept Map” which shows all the current functionality of Ally’s app:

Ally Mobile App Existing Infrastructure

Here’s my redesign, which had to include all original functionality:

Redesigned Ally Mobile App Existing Infrastructure

All changes are signified through a new “purple-glow” color. But there are two significant revisions to the app’s infrastructure to point out:

Revision 1: “Explore” is now “Invest.” This is the fourth major menu item and a huge bucket of content. The main purpose is to sell other Ally products to users. I made the judgement that people who use Ally (one of the first online-only banks) are less interested in traditional, low-risk banking products like CDs or Bank IRAs. Investment-type actions should be tiered accordingly. And “Invest” speaks to a more specific action for a user’s money, rather than the tepidly labeled “Explore.”

Revision 2: Consistent “Tasks”. There’s lots you can do in this app, but there’s discrepancy in how you reach all viewable tasks. For example, a user can reach most tasks (order checks, report a lost debit card, i.e.) by selecting a bank account in “Snapshot,” but cannot through the more prominent “Tasks” menu item. All available tasks should be reached by both the “Snapshot” route or “Tasks” route.

Process Notes: Using Sketch, I began by centering the key menu bar items from the app to be the center of my working canvas. I then created horizontal and vertical structures from there, mapping every function. With one hand on my iPhone with the Ally app open, I walked through the application. This helped to create every piece of content as a circle first, then get feedback of how to move, group, or simplify areas with lots of content.

 

Service Design at Buzz Mill

We are wrapping up our second quarter and that means finalizing our team service design projects. Through our research process Sara Miller, Shelly Stallings, and I have identified opportunity areas for our client, the Buzz Mill in Austin, and have design recommendations that will help them to achieve their goals.

Our team had created a website to document our research process, which we invite you to explore.

Buzz Mill Coffee Shop in Austin
Buzz Mill Coffee Shop in Austin

Service Design at the Castle

Jen Figueroa and I have spent the last 16 weeks conducting a service design project for Castle Hill Fitness. Our research focused on understanding the new member onboarding experience. Please visit the website we’ve created to showcase the many deliverables that came out of this project, and be sure to read back through our blog posts to learn more about our process along the way.

CHF_WebsiteImage