Wireframing: Redesigning Mobile Banking

For the second part of our Mobile Bank App Redesign project – recap for the first part here – we dived into wire framing.

We developed a few scenarios inspired in different types of people. This allowed us to think of different banking needs that other people might have and helped us understand what would motivate them to use a mobile banking application.

Using a – Character, Background, Context, Goals, Story – framework, we came up with three characters and four different scenarios they might encounter which would lead them to interact with their bank through a mobile application.

Isaac, 38

To start creating scenarios for our characters, we first started by “humanizing” them by giving them an identity, describing their motivations and unattained goals, and assign them a level of competence of the technology that we will be using to help them, in this case – a mobile application.

One of my characters is 38 year old Isaac, who is a freelance designer and has a 13 year old daughter. He works from his home office most of the time, while his partner works full time at a consultancy company. As part of his day-to-day activities, he takes care of grocery shopping, and everything that has to do with bills. He uses his computer for many of his activities but appreciates having his phone around to notify him of important events whenever he’s running an errand or visiting a client.

To start introducing the product into the live of Isaac, I assigned a context of the time and place that he will be in when he starts to use his mobile application.

Isaac recently opened a savings account to start saving for his 13 year-old daughter’s college. He realizes that he just missed one week of depositing into the saving’s account and is worried that this might continue happening and thus, end up saving less than he could have for her daughter’s education.

In order for Isaac’s needs to be fulfilled, the following goals would need to be addressed by the product that he will be interacting with:

Isaac would need to be able to:

– Know that there is enough money to make a transfer
– Know that money was successfully transferred
– Make sure the information is saved (to prevent future mistakes)
– Avoid having to repeat steps for this repetitive task

Story & Screens: Storyboarding

With my character’s background, goals and context, I was able to create the following story, which I segmented into key areas in order to organize my storyboard . Each key moment in the story gets assigned a screen on the storyboard. This process also helped at identifying key interfaces that I will have to create for my higher fidelity screens.

Screen Shot 2017-11-06 at 6.44.48 AM


Storyboard - Banking

Low fidelity UI


Wireframe Bank

First flow:

Transferring money, setting up reminders


This week, I will get the rest of my wireframes ready for user testing which will hopefully give me a lot great feedback to iterate my product.