My Role: For this project, I was the lead designer. I designed the structure and system for the app, created all the wireframes, and conducted 6 rounds of usability testing.
Project brief
New World Bank has noticed a significant drop in use of their existing mobile app. They want to redesign the app in order to better meet the needs of their growing millennial clientele. Based on research into the lives of New World Bank clients, the executives need the app to deliver on a simple value promise: That users should be able to bank whenever, wherever and access professional help when needed.
Addressing the information architecture
The information architecture of the original app clearly displays feature overload. The redesign should focus on streamlining options and connecting all of the core features in a seamless experience. By using an information architecture map, I was able to show how different parts of the app connect in a single view. The IA map helps ensure core features are front and center and designates a place for all other features of the app to live.
Options duplicated in multiple places throughout the existing app:
Existing Account View
The multiplicity of features has a negative impact on the account view presented to the user. With so many features shoved into a single view, core actions, like viewing one’s account balance and reconciling transactions are deprioritized.
Updated Account View
Existing Home View
The existing home screen does feature many options for the user, but they are hidden. When a user first opens the app, they should be able to take action immediately. The app should in a sense ask the question, what did you come here to do today?
Additionally, the feel is very transactional. Banking, however, is a personal business and this should be acknowledged when a user logs on.
Updated Home View
The updated home view welcomes the user and asks the question - what did you come here to do today? While giving them options so they can take immediate action.
New Work Flows
Given the changes I had made in the two core views of the app, I needed to ensure that no functionality had been lost with the redesign. I created low fidelity mocks-ups of all the key flows, building them out feature by feature starting with the most commonly used.
By creating wireframes without color or fanfare, I was able to work quickly and communicate the idea without the visuals causing a distraction. Additionally, working in this way allowed me to coordinate common interactions between the key features and design them cohesively within the system.
Usability testing
Next, I wanted to understand how real users would think and interact with the interface as they moved through each flow. Where are the biggest hang-ups? I intercepted strangers at coffee shops and conducted usability tests using the Think Aloud Protocol. I went through 6 rounds of testing and iterating on the key flows.
Usability testing with strangers at coffee shops
Key Learnings
#1 The Hidden Swipe Problem
When I originally updated the account view, I carried over the “3 dot” ui element from the existing view and put options for users behind the swipe mechanism. When asked to make a mobile deposit NONE of the users utilized the swipe and all of them looked for options in the menu instead.
It seems obvious now, but the swipe function was unfamiliar and didn’t actually afford swiping.
Solution
To solve for this, I removed the swipe entirely and put the main buttons front and center so they could be accessed easily. They are obvious, but still don't detract from the other information on the screen.
I chose to keep the "Transfer Money" and "Make Deposit" options because these were the features users I spoke with utilize most. I put the other items in the menu.
#2 Language Confusion
Originally, when I restructured the menu to accommodate for the changes in the system, I used the same language to categorize features as the bank had. However, I quickly learned that these categories don’t resonate with users. Users look for options that mirror the action they are looking to take. When asked to send money to a friend, one woman said, “I’m looking to send money. I don’t see it, I guess I’ll just click on everything.” The option she wanted was under “Transfer or Pay”, but that wasn’t apparent to her.
“I’m looking to send money. I don’t see it... I guess I’ll just click on everything.”
Solution: Updated language in the menu helped users navigate to the functions they needed.
With the updated menu, I changed the language to reflect the actions a user would look to take instead of the category.
#3 Rabbit Holes
In the original design, the system had several places in which a user would get stuck when navigating to a new section of the app. For example, if they clicked "transfer money" and decided they didn’t want to transfer money, they would have to go through the menu to find their way back to where they started.
My first solution to improve navigation problem was to implement back buttons that allow users to return to a previous section of the app. However, I ran into a problem. When there are embedded options within a given section of the app, like “make an appointment” within “locations” the user is taken two steps away from their starting point, and has to hit the back button twice. It can be disorienting to be taken further and further away from a starting point, so instead, I utilized modals to allow the user to stay on their current view.
First Iteration of the workflow
Solution: Use of modals allow the user to work in-context to the screen
Final Key Workflows
After building out the flows I linked them together to create prototypes. This was really helpful for me to make sure I wasn't missing a step in the flow. It also helped me share the concept with New World Bank.
View accounts
Bank clients can log on and quickly get a snap shot of their accounts. Additionally, they can move between accounts easily using the tab bar at the top.
Make a payment
Here users can make a payment to their credit cards quickly. The modal allows users to stay on the page, which cuts back on the navigation energy required.
Mobile deposit
Lastly, mobile deposit is one of the most used features. It can be accessed from the home screen or within a selected account. After making a deposit, the user is dropped back into the account so they can see their updated balance.
