Finally, we could start with my favourite part – Paper Prototyping!

 

Paper prototying definition

 

 

It’s recommended to do this in very early stage of the process, because it’s cheap and it will let us fix the usability problems before the money is wasted on something that doesn’t work.

Also, we can have a better focus on the core functionalities and flow rather than focusing on eg. colours that come in later stages of the process.

 

Short video showing the process of creating the prototype (credits: Rob McLoughlin)

 

When we started with creating the prototype, we did every screen as a complete one – with all the functionalities in one place. Afterwards, we realised we are wasting a lot of time to sketch the same one over and over again – so Rob suggested creating the components as a separate part (keyboard, input fields..) and reusing them when necessary. That made our prototyping process a lot easier, and we could easily apply changes after iterations as well.

 

Components
Creating the Reusable Components for our prototypes

 

1. Creating the prototype for the “Login” process


 

First, we started with prototyping the “Login” flow, into the desired one with more “Forgot PAN (Personal Access Number)” options. Having in mind our persona Ann and Scenario #1, we decided to make following changes:

  1. implement the “Touch ID” feature (because almost all the competitor banks had it, and we wanted to follow the trend. Also, a lot of reviews on Google Play and App Store were pointed in the direction: “Guys, allow us to use the “TouchID” to login
  2. reduce the number of steps and screens necessary to login (if all the other banks need only  PAN in order to login, why can’t we do that as well?)
  3. remove the password masking when entering the PAN, so our users can see which numbers they’re typing in (as Nielsen promoted in 1990’s)
  4. add more options to recover if users forgot the PAN
    We extended existing “call to recover” option with additional:

    • “use the password”
    • “face recognition”
    • “use the desktop app” (using the QR Code)
  5. we also added the “Quick Balance” feature (because many users mentioned this in online reviews on Google Play and App Store. Also because we got info from a lot of AIB customers absolutely loved this feature when we did initial research at the beginning)
  6. we also redesigned the accounts page, the first one users see after they login. Our new redesign help them to get an insight in accounts and easily switch between them.
  7. in addition to all, we added the help icon in top right corner – as Nielsen mentioned in his last usability heuristic: “Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation

 

Login
Changes we did and features we added for the “Login” flow

 

To make things easier, Rob created this user flow with solutions to the problem which helped us visualise the actual user’s path in “Forgot PAN” scenario.

Forgot PAN Process
The improved “Forgot PAN” process with 3 additional options to recover your PAN (Personal Access Number)

 

And, after all the work has been done for “Login” process – this is how it looked like:

Login
Sketched screens for the “Login” process

 

2. Creating the prototype for “Transfer funds to a new person” process


 

Second, we started with prototyping the “Transfer funds to a new person” flow, which doesn’t exist in the PTSB mobile app – just in the desktop version. Having in mind our persona Ann and Scenario #2 this time, we decided to:

  1. offer a quick link to “Transfer” from the home or every page where the user is
  2. default the “From” field to a current account(because most of the transactions come from current account. When testing with AIB app – I figured out that there wasn’t a possibility to make a transfer from your savings account)
  3. list all the saved payees below, with a possibility to slide through them (as Google did with “chips”)
  4. add an “+Add New” button in case our user wants to add a new payee which is not on the list (we wanted to make this easier for the user, without making them navigate through different screens just to add a new person)
  5. ask only for the most important information, which are:
    1. From
    2. To (when adding a new payee, then just IBAN and Name are required)
    3. Amount
      -> as Nielsen proposed in one of his design principles – Simplicity – “if design works well without an element then we can remove it”

 

Transfer to a new person
Changes we did and features we added for “Transfer to a new person” flow

 

We looked up on this scheme, which helped us focus on the flow itself and what’s the best way to present this to a user.

 

New Payee
New improved “Transfer to a new person” process

 

It took time to create this prototype, but we didn’t want to be perfect – we wanted to test and let our users point us where are we going wrong and where to improve.

Transfer funds to a new person
Creating the prototype for “Transfer to a new person” flow

 


 

After we sketched all of the screens for both of the tasks, we decided to upload them on InVision  so we can test them in a proper way, get the feedback from actual users and hear what they think about our redesign.

 

InVision
Link on InVision prototype

 

We also recorded every user testing session using either QuickTime or Screen-o-Matic, which enabled us to review more times every session and figure out where we went wrong in our designs – what to keep and what to change.

 


 

  1. References

    1. Nielsen, Jakob. “Paper Prototyping: Getting User Data Before You Code.” Nielsen Norman Group. April 14, 2003. Accessed October 29, 2018. https://www.nngroup.com/articles/paper-prototyping/.
    2. Pernice, Kara. “UX Prototypes: Low Fidelity vs. High Fidelity.” Nielsen Norman Group. December 18, 2016. Accessed October 29, 2018. https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/.
    3. Knapp, Jake, John Zeratsky, and Braden Kowitz. Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days. New York, NY: Simon & Schuster, 2016.
    4. Adiseshiah, Emily Grace. “Paper Prototyping: Your Step by Step Guide.” Justinmind. May 18, 2018. Accessed October 29, 2018. https://www.justinmind.com/blog/paper-prototyping-your-step-by-step-guide/.
    5. Cronenwett, Diane. Lynda.com – from LinkedIn. September 19, 2017. Accessed October 29, 2018. https://www.lynda.com/InVision-tutorials/UX-Foundations-Prototyping/605436-2.html?autocompleteMovieId=661973.
    6. Nessler, Dan. “A Guide to Paper Prototyping & Testing for Web Interfaces.” Medium. March 29, 2016. Accessed October 29, 2018. https://medium.com/digital-experience-design/a-guide-to-paper-prototyping-testing-for-web-interfaces-49e542ba765f.
    7. Nielsen, J. (2009, June 23). Stop Password Masking. Retrieved September 15, 2018, from https://www.nngroup.com/articles/stop-password-masking/
    8. 10 Heuristics for User Interface Design: Article by Jakob Nielsen. (1995, January 1). Retrieved September 28, 2018, from https://www.nngroup.com/articles/ten-usability-heuristics/

 

2 - Personas & Scenarios
4 - Evaluating The Prototype