Concept Maps: Mobile Banking App

We’re at the beginning of a class on rapid iteration and creative problem solving. Over the course of the next several weeks, each of us will be redesigning a mobile banking app. To start, we are creating Concept Maps, which are low fidelity, highly abstracted models of a system. Essentially, they capture the concepts necessary to be a successful system along with the relationships and organization of those concepts. All of the user interface content and controls are stripped away, leaving a visualized conceptual overview of the system.

Concept maps are valuable in the case of a redesign because it allows us to strip away any particular solutions that have been previously implemented and easily reorganize the concepts in ways that are coherent, meaningful, and appropriate. Because of the extremely low level of fidelity, the artifact that is a concept map may not be overly meaningful or useful to anyone other than its creators. The map acts as a bridge to get from the existing implementation of the app to new and more valuable ways to organize and emphasize content.

My concept map is of the U.S. Bank mobile banking app. Here is the full version:


Beginning with this excerpt showing the Login section, I’ll point out a few elements that I tried to capture about the system that is this app.

Screen Shot 2015-11-03 at 5.52.09 PM

Right away, you can see that the Login page is a emphasized through size. That’s because it’s one of the primary sections of the app, a hub off of which the user can take several paths to secondary sections of content, such as “ATM/Bank Locations” and “Help”. The relative size of other bubbles shows their relative levels of emphasis throughout the app as well as navigational depth.

Here’s another excerpt, showing the Transfers section of the app:

Screen Shot 2015-11-03 at 6.19.30 PM

Here, you can see a few of the flows the user is taken through to accomplish particular tasks such as setting up a same day transfer between accounts. You can also see some of the particular terminology used in the app that hints at some of the history of how banking works/worked and the technical constraints involved. For example, the label “Same Day” has a parenthetical qualifier, “(Immediate)”. It probably used to be that you set up a transfer and it would take several hours, if not days, to complete. Instead of changing the label entirely to simply “Immediate”, the original label was kept due to the inertia of terminology with a long and established history.

In addition to documenting the existing app structure, we took a stab at redesigning the app, staying at the same level of fidelity. Here’s the full, redesigned concept map:


Since this is the first time for me diving into concept mapping, I took the opportunity to play with the form. Rather than only straight navigational lines, I tried introducing curves. I think it helps to show flow, especially through some of the sub-flows like entering the details of a transaction.

Screen Shot 2015-11-03 at 6.43.28 PM

My overall strategy with the redesign included an identification of the core features of the app as well as using a consistent interaction model across different types of transactions. To identify the core features, we used a concept relationship matrix, though I feel the exercise in this instance did little more than confirm my assumptions. By plotting the same banking concepts on two axes in a matrix, we were able to tally up all the existing relationships we perceived between each item. The following image gives you a sense of what that looked like.

Screen Shot 2015-11-03 at 6.47.56 PM

Here’s an example of the consistent model that I created for different types of transactions:

Screen Shot 2015-11-03 at 6.43.28 PM

The user enters transaction details, receives a confirmation message, and then is returned to the original entry point.

Moving forward, we will be iterating on the representation of the app, introducing higher and higher fidelity and more detail at each stage.