MB Financial: Updated Features and Wireframes
After creating concept maps for the current and future state of the MB Financial banking app, I’ve worked on making flows to create new tasks. I’ll be discussing two of the flows I’ve created, checking you balance and depositing a check, in this post.
The current MB app is very clean and simple to navigate although it is light on features. For me, this meant using imagination and referencing other apps that perform similar tasks was crucial in building out flows.
The first flow is checking your balance. One of the features I most appreciate about the MB app is the “instant balance” feature you can activate so that you can view your balance without logging in. For the sake of the assignment and future user testing, I built out the traditional process for checking balance. The first 4 screens are for entering in your user name and your password. Once you have logged in to the site you will be greeted by name and can choose your account. To access additional information the user can press an arrow next to the account to see the list of transactions. In my user scenario the person next deposits a check by selecting the deposit tab to reach the next screen.
The second flow is going to begin with login and once the user lands on the welcome screen with balance, they will click deposits in the bottom menu bar (icons coming for user testing). The deposits screen begins with selecting an account and the user selects an arrow which will initiate a pop-up window to select and confirm an account. The screen is darkened and the pop up is bright white to maintain a users orientation by not going back and forth between screens. Once the account is confirmed the user returns to the main deposit screen and enters in the amount, which is in a large dark font. After entering in the amount, the next step is to take a photo. Pressing the photo button takes you to the camera and the screen contains a grid line and re-iterates what and how you are shooting. When I tried to do this in the MB app it just showed a black screen instead of alerting me to give the camera permission in the app settings (and after I changed the settings there was an error message my check could not be sent).The steps are repeated for the backside of the check. I added fields that auto populate the account number and routing number that appears on the check. The confirmation screen is again a popup against a shaded out screen. The final screen is a confirmation with a visual check mark. One of the challenges in this section was keeping the process streamlined and to minimal screens while still enforcing enough ‘check-points’ to confirm actions.
This assignment has been enjoyable because a) mapping the screens feels like a scavenger hunt and b) it is empowering when you find frustrations in the app (the pot of gold!?) with the goal of redesigning. I mentioned earlier about the app not alerting me to adjust the security settings to allow access to the camera. I’ve also given consideration to where the flows end. For example, when I click “log out” the app currently takes me to my geographic location (Austin) in Apple maps. When I click on the link for the bank mailing address, I am sent to Apple maps again and given 18 hours of driving directions to the bank headquarters in Illinois. It has been fun to find these anomalies and provided good lessons on thinking of the entire flow.