Wireframes

20171106_212102

The second assignment in Rapid Ideation and Creative Problem solving was creating wireframes. I started this process by creating three distinct people. John, Elle and Frank. By creating three individuals with individual backgrounds and characteristics I was able to understand what goals they (and potential users like them) may have in interacting with the mobile app.

John is a Freshman at the University of Texas and works a waiter at Red Lobster. He has students loans that give hime funds for books, tuition and school related materials. All other expenses are funded through his job’s income. He has used mobile banking for many years but just signed up for account at New bank and does not have knowledge of this particular mobile baking app.

Elle is a middle aged woman working as an RN with two kids and a husband that works for IBM. They have a joint checking account. She has used mobile banking for years.

Frank is an elderly man who is retired and living on a fixed income from his retirement accounts. Does not use mobile banking often and instead relies on in person interactions with banking personnel for many of his banking needs.

20171102_130818

I was able to understand and identify key goals that each person might have in using the app and I used those goals to create stories that played out many different scenarios for each person. I chose to focus on seven scenarios

John:

  • Learn how to make monthly payments to landlord.
  • Edit and change recurring payment
  • Pay a friend for dinner

Elle:

  • Deposit a check
  • Check account balance

Frank:

  • Report stolen phone
  • Sign up to get fraud alerts

The next step in the process laid out in the assignment sheet was to create UI Storyboard, however, as I began this process I found that sketching the screen flows out proved to be more beneficial for me. I decided to write out my scenarios as a screen by screen dialog. An example scenario is the “Pay a friend for dinner” story written for John. It reads,

  1. John opens app,
  2. Fingerprint login comes up
  3. Puts finger on sensor
  4. “Validating” screen
  5. “Home Page”
  6. John clicks “Menu”
  7. “Menu”
  8. John clicks “Bill Pay”
  9. “Bill Pay”
  10. John clicks “Send $ to Friend”
  11. “Pay amount screen”
  12. John types in 30
  13. John presses pay
  14. “To” “For” “account” screen comes up
  15. John types in HIs friend’s first and last name.
  16. Results comes with nothing. Shows “Add to Contacts”
  17. Shadow box comes up with “add to contacts” “Create Contact” and Update existing
  18. He clicks Create contact
  19. Edit contact page comes up and asks for mobile phone number, person or company drop down
  20. John types in phone number
  21. Chooses “person”
  22. Clicks “Save contact” at top of page.
  23. “To” “For” “What account” screen comes up
  24. Clicks “Savings x55655” drop down
  25. Savings and Checking shadow box comes up
  26. Chooses Account “Checking – X5656”
  27. Shadow box goes away
  28. clicks “For:”
  29. Types in “Dinner”
  30. Clicks “Send $30”
  31. Check mark screen saying “Sent! $30 will be deposited once [Friends name] accepts this payment.

I felt that by laying out each screen in a plain way I was able to then transfer those dictations into sketch wireframes that I used to create the flows. From the flows I created through sketching on graph paper I then had a clear, concise idea of what I needed to create in Adobe XD.20171105_230307

I found the most useful tool in this process was mapping the screens out with each action taken. It made the transition from ideas and concepts to artifacts by way of digital wireframes. In the future I will attempt more of the storyboarding technique to see if there is value in that part. Wireframing is a difficult task because there are so many screen and scenarios, and often it can see overwhelming to start crafting screens. These tools: sketching, writing scenarios, creating people, and giving them goals, is a very useful tool to wrap your brain around the subject when things seem very scattered.

20171106_225602