Concept Mapping for Banking Applications
One of the most important skills a designer can develop is the ability to untangle and synthesize understanding about systems and complex concepts. In our first assignment for the Rapid Ideation and Prototyping class, we continued our development of this skill through the creation of concept maps.
Concept maps are representations that convey ideas, processes, comparisons, relationships, and other phenomena through visual means. A geo-spatial map itself is a particular kind of concept map used to represent places, distances, and other features. A storyboard is another type of concept map that represents things happening over time and what happens in those snapshots of time.
For our assignment, we took on making concept maps for a banking application. Over the quarter, we will iterate on our representations of how banking works, how existing banking apps work, and we will also develop our own re-design of a banking app.
In this first assignment, we developed two types of concept maps. The first map represents the relationship of words and ideas related to the concept of banking. This map is a diagram that defines how concepts are related in the complex system of banking. The figure below shows an example for baseball.
The second type of concept map we created is called an Information Architecture map. This diagram illustrates the features in a software system like a mobile application in order to understand the structure, function, and relationship of features and parts in the application. The figure below is an Information Architecture map of a train ticketing application.
Concept Definition Map
I began the assignment by first tackling the words and ideas relationship map, which I refer to subsequently as a concept definition map. I began here so that the process of creating the map would force me to think about banking, how it works, and what is most essential and valuable in banking.
To begin, our class developed a list of words and concepts that have to do with banking. Next, I partnered with a teammate to put these words into a ranking matrix. We reviewed each word-pair and indicated if the words had close relational value by marking a one in the intersecting matrix field.
At the end of the exercise, we tabulated which words had the highest frequency of relational value with other words. The output from this exercise was a list of about eighty words related to banking in rank order of frequency. The purpose of this exercise is to develop a rank-order of a large set of items which are complex to rank. This type of technique is valuable for the design process given how essential it is to learn to deal with large sets of complex data.
I then developed a core backbone to the concept definition map by creating a sentence linking the most important words related to banking. This sentence can be seen in the resulting diagram in the black boxes down the center of the concept definition map below.
Once the backbone was set, I then arranged and re-arranged most of the remaining words on sticky notes, creating sentences that defined what I felt to be the most important aspects of banking.
Once this map was complete, I moved to a digital tool and created the resulting graphic in Omnigraffle, a digital diagramming tool.
Information Architecture Map
Our assignment over the next two months is essentially to develop a banking app. To do this, we started by analyzing a banking app of our choice. I chose Wells Fargo since it’s the bank I have the most accounts with. From this analysis, we will continue to redesign the app and develop skills in communicating ideas, creating meaningful product features, and creating intuitive user interactions.
To create the information architecture map for the existing Wells Fargo app, I did the following:
- Print and organize screen shots of every screen and interaction within the Wells Fargo app into a “screen inventory”
- Develop a sketch that represents how the features are organized within the app
- Create a digital concept map using Omnigraffle
I went through various iterations of how to organize the information visually, starting by using stickies on brown paper and eventually moving to Omnigraffle for a digital product.
One of the most important decisions was on choosing how to represent the main feature sets within the app. I chose the vertical layout of bars instead of the bubble diagrams I saw in sample concept maps because it most accurately mapped the top-down menu that is prominent throughout the app. The priorities of features is represented in a top-down fashion, which I believe represents how Wells Fargo also prioritizes information.
Additionally, the menu and sign-out features are accessible throughout the app. Rather than include arrows pointing every time from a feature to the menu and sign-out, I included them as bars connected to each main feature set.
Afterward, I differentiated the enclosed features with a color hierarchy ranging from black boxes as the most essential to the banking apps core function to the white boxes with grey text as the least essential.
To indicate connectivity between features and to the web, I added lines. Dotted lines go to external web links and solid lines connect internally or are used for sign-out.
The enclosing dashed line surrounds the app assets, enclosing both the app assets while logged in and logged out. One major breakdown in the app was the non-functioning Make an Appointment feature. When clicked, nothing happens.
Next I needed to redesign the app. I reviewed my own diagram and made notes about my changes, and then developed a new sketch and digital illustration.
To redesign the app, I made the following changes:
- Correct the Make an Appointment breakdown so it links to it’s resulting action
- Move Deposit Checks function into Transfer Money. I don’t think it needs to be another item on the menu’s top level hierarchy. Checks are on their way out and will be used less and less often.
- Rename Transfer Money to Manage Funds. This overarching term is more representative of its enclosed features.
- Eliminate a majority of the externally linked features. More content will need to be created within the app but I believe it will be useful to have more features available in case someone is not within network or does not want to use data.
- Move Online Security Guarantee, Privacy, and Ad Choices from the highest level menu hierarchy and into the Security and Settings containers. This frees up menu space and puts them in logical places.
- Rename Settings to Set-up since the contained features are not settings that are normally changed often and instead are about setting up features like Apple Pay and Touch ID. The Settings name is also misleading because many of the settings exist in other containers like Manage Alerts, Profile, and Security.
- Add a Starred Tools organizing feature. The landing screen is the Account Summary screen, and it includes many items that Wells Fargo changes based on a blend of what they want users to utilize and what users want. These tools also exist elsewhere in the app, such as Deposit Checks and FICO Score. Instead, I suggest that many of these tools on the primary landing screen should be optionally included so they are at hand when a user first signs-in. The Starred Tools feature in the Set-up container would allow users to select from a variety of tools that could be linked to from the primary landing screen.
These changes would make the Wells Fargo app more useful, less cluttered, and more independent of external assets otherwise linked to.
This project has proven to be challenging in a way different from past projects. Before, some of the greatest challenges were in developing a narrative that summarized concepts and drawing characters and storyboards that communicated both ideas and emotions. This time around, the organization of concepts is much more abstract. There are many sets of features that could be used at any time, not one set used by one person in one scenario. The organizing of so many ideas is challenging, but it’s definitely a critical skill for designers to have.