Improve the usability and security of the activation flows for online banking.


We need to make the activation process is simple and easy for everyone.

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. 


First, I had to understand how the flow currently worked.

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

The experience we were working on lived in the precarious cross-section of security and usability.

There were many challenges we had ahead of us.

  1. Some steps in the process were required for security reasons but may 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.

  • What steps belonged together logically?

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

  • What steps caused the most frustration to users?

  • How might we make it more user-friendly?

IMG_0552 copy.JPG
IMG_1158.JPG

Keeping things lean

In our scrum area, I would 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.


Throughout the design process, I would create prototypes to test our progress with real users to see how we could improve the experience.

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.

I believe it is important that the entire team develops empathy for the end user. People are more passionate about improving the customer experience when they see the impact they have on users. It's also rewarding for them to see how happy users are with the improvements we make.

IMG_9514.JPG

My lean user testing process

I always try to make the testing sessions as inclusive as possible.

  • I 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, I 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 documented the entire process in a technical flow diagram for everyone to review and refer to. This is one area I get pretty nerdy. I love creating technical, detailed documentation. This is a practice that I have taught many of my fellow designers.


Flow screenshots

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