Security X Usability

Our goal was to improve the overall experience of the activation flows for online banking.

Any time you sign up for an online service, there is an activation process you need to complete to set up your account. Sometimes this process is simple and delightful with easy to read instructions or illustrations explaining what is happening, but other times it is long and complicated and can stop people from completing the task altogether. In this digital age, many people are turning to online banking because going into a branch is an inconvenience. 

What was the current experience?

The activation process was complicated with many steps, scenarios and systems that connected to it. I began understanding this process by working with my team members who knew it inside and out. Together, we flowed out the current experience on the whiteboard. With the flow documented on the wall, I was able to begin asking questions about why something was built in a particular way, how it worked, what systems were called when, what happened if something failed and why was one step before the other etc. 

IMG_6121 copy.JPG
 

What we were up against

  1. Most steps in the process were required for security reasons but could be annoying to users to complete. 

  2. The process was built around systems rather than users. (e.g. two steps might be displayed on the same page because it was easier to code.)

 

We needed to take a fresh look at this process from the end user's perspective.

The flow was long and we didn’t have much flexibility on how many steps we had due to legal requirements. We had to try to balance the interruption of security requirements by making every other aspect on the experience easy.

  • Can we group steps that belong together logically? (profile info, login credentials, preferences etc.)

  • Should multiple steps be combined on one page or would it be simpler to break steps up on to individual pages?

  • What steps caused the most friction and why?

  • Could we improve the written content?

 
IMG_0552 copy.JPG
 
Flows.jpg

Keeping things lean

In our scrum area, I always have our experience flows drawn up on the walls so that the PO, developers, BA etc. could come and discus problems or changes that needed to be made.

Having one visual representation of our experience on the walls for everyone to refer to made communication and collaboration faster and easier.

 

Lean user testing

User testing was set up in two rooms. One room for people to observe the test and another for the test facilitator and Scotiabank customers to sit privately. I would manage the viewing room for the test.

People are motivated when they see the impact they it has on users. It's especially motivating for the team to see how happy users are with the improvements they are working on.

IMG_9514.JPG
 
  • Always try to make the testing sessions as inclusive as possible.

  • Print an image of each screen in the process and post it on the wall to make it visible to everyone.

  • While observing the user testing viewing sessions, provided everyone with post-it notes and markers and encourage them to take notes on their observations about what was working, not working and any opportunities they could see. I then got everyone to stick their notes under the image so they could be shared by everyone. As teammates would filter in an out of the test viewing room, they would be able to review the notes that others had observed. This would often spark ideas and wonderful conversations within the group about problems and solutions.

IMG_2397.jpg
 

Mapping the user's journey

A journey map makes it clear to see where the problem areas are in your experience and can help you focus your team resources accordingly. I created a journey map for our team to use to identify what areas were most problematic. We also used this to share our team objectives with external stakeholders.

Screen Shot 2018-10-21 at 8.45.04 PM.png
 

Technical user flow diagram

As the final flow became more defined, I worked with the team to document the entire process in a technical flow diagram for everyone to reference.

Flow screenshots

IMG_5498.PNG
IMG_5499.PNG
IMG_5500.PNG
IMG_5501.PNG
IMG_5505.PNG
IMG_5511.PNG