Concept Mapping: Redesigning a Mobile Banking App
Designing Digital Interfaces
Quarter three has begun in earnest with a big shift towards learning about the later phases in the design process. The class Designing Digital Interfaces with designer Chrissy Cowdrey will challenge us to comprehend existing digital infrastructures, and build out redesigns through sketching, building wireframes, presenting and eliciting feedback. Since most design solutions will have some digital touchpoint, learning how user interface components and controls function to support interactions and design goals is critical.
Building on what we learned in quarter two in our Designing Systems class, the first assignment for Designing Digital Interfaces is to create a concept map of the existing navigation and information architecture for a mobile banking application and then rearrange the elements to optimize for usability.
Concept Mapping: Current State
The first step to redesigning a digital system is to capture its current state. I chose to map the Bank of America app, beginning with exploring and writing down terms of key elements. I then drafted a diagram by hand and recreated it in Sketch.
Below is my current state map.
There are three tiers of importance for each component represented by circle size. Larger circles are more important elements than smaller circles. The lines and arrows represent how elements are related by indicating the flow of access to one another.
Concept Mapping: Designing the Future State
Next, I considered elements that seemed awkwardly placed or perhaps did not belong at all. I shifted elements around in order to simplify interactions or make them more intuitive to optimize usability.
Below is my future state map.
In the current app design, Bank of America has a “My Dashboard” link that seems redundant in some ways, and hides other features. My redesign proposes putting those features in the Accounts section with an option to customize what is displayed, and doing away with “My Dashboard” altogether.
Furthermore, there is a catch-all area in the current state called “menu,” which leads to one’s profile, some personal settings, support options and features that also appear elsewhere, such as checking one’s FICO score. This term confounds the user as to where it might lead, essentially hiding those options. In the future state, I have simply renamed this button “Profile” to make it more clear. Considering several essential components are already visible in the top level navigation and the term “menu” could mean any number of things, using “profile” to describe this section will not only indicate that this is where users can find profile information, but will also make those extra features and support section more discoverable as users are more likely to click on a button they understand to be valuable to them.
Ultimately, these the changes in the future state are not a great departure from the current one, but they do simplify and clarify existing navigation to increase usability. Every change that decreases the cognitive load on the user contributes to an easier and more pleasurable digital experience.