Wireframing the Capital One App

Our assignment this week is to create wireframe flows based on the banking app concept models we’d made for Assignment 1. It’s at this point that I understood how lacking my original concept map was. (The grade I received on it was also a good indicator.) If someone were to try and build an app from my map, well, they couldn’t.

On the plus side, I found that creating a complete picture of the app through wireframing was much easier for me than through concept mapping. On the slightly more negative side, I was getting into the weeds quickly by trying to build every possible path. I think I was overcompensating for my concept map’s inadequacy because I started to turn my wireframe flows into if/then statements. Which was not the assignment. (That’s the next assignment.)┬áLuckily I was able to back out of it and create specific flows (e.g. Depositing a Check) vs. every possible flow ever.

Here is one I did for turning on notifications. The Capital One app will prompt you to turn on notifications every time you log in (unless you’ve already turned them on). Using this function, I’ve shown how it will take you to the iOS settings and allow you to set your notifications. (Not pictured are 2 more notifications screens [Show Previews & Notification Grouping] that I did build but omitted for this image so the words would be legible.)

Set_Alerts_Notifications_JF

Another wireframe I built was born out of a need for accessing my security code. Capital One has a specific security code that users need in order to import transactions into third party apps, such as You Need a Budget. I needed that code this week for, yes, You Need a Budget and it’s not accessible via the Capital One app. It has to be done online. So in my wireframe I added it as a category under Profile > Security.

Security_Code_JF

I also gave it a Reveal/Hide function in case you hit it by accident and don’t want people to see it.

Once I stopped thinking about every possibility and zoomed in on what screens will take you from point A to point B, this got a lot easier for me.┬áNext week we’ll be building the prototypes and testing users to see how well our wireframe designs are working. Stay tuned!