Banking mobile application: scenarios and wireframes

The second phase of the project for Rapid Ideation and Creative Problem Solving course (see a post about the first step) was to craft scenarios, storyboards, and wireframes.

I started with scenarios, written stories, that explain how a person will use a product or service to achieve a goal. Each scenario includes the person involved with a brief background, the person’s starting state/context for where they are using the product or service, their goals (want or need) in using the product or service, and stories that explain how a person uses a product or service to achieve their goals.

I developed three characters across age-bands so that I can better understand different types of customers who use banking applications.

Characters and backgrounds

Allie: A 38-year-old physician at a local hospital. She lives in an affluent Austin neighborhood. Mother of three and balances a busy home/work schedule. Allie uses a computer and smartphone daily.

Timmy: A first-year student at the local university majoring in International Relations. Parents supplement his part-time campus bookstore income with a weekly allowance. Opened his checking account before going away for college. Grew up with technology and got his first smartphone for his 12th birthday.

Connie: A 59-year-old human resources professional at a midsize company in Austin with offices spread across the country. Her first grandchild was born a year ago, and she enjoys visiting them on the East Coast whenever possible.

Sample scenario


 The written stories were helpful for me to understand what a customer might want to accomplish with a banking application, to consider new mobile services, and to develop a list of screens to create.

Scenario to screen mapping

I created several rough storyboards of the written stories to help illustrate ideas and the customer needs. I moved onto sketching wireframes of screens and used Adobe Xd to enhance the fidelity.

Wireframes: deposit check

Sample wire frame: deposit check


Wireframes: view checking account debit transaction

view checking account debit transaction


Wireframes: pay existing account

pay existing account


Wireframes: send someone money

send someone money

My next steps in the project are to begin usability testing, to develop additional screens, and to revise the screens and flow based on critique and testing. Usability testing will be essential to iteration and improving the design.