Design in Security

Knowledge / Inspiration

Design in Security

Continuous Design
UXDX EMEA 2021

What if you're working on a product where ease of use for users might actually not be the best thing for them? What if adding frictions is not just important, but essential? Where do you even begin to start designing then?

In this talk, Jane will share the ups and downs of working with the security team for a banking app, as well as learnings she has experienced so far..

As young designers, we were often told that the best designs are the ones that are easy to use. One that does not require our users to think, if possible, at all, and are usually completed with just one click or maybe less. And while it's not entirely wrong, today, I wanted to talk to you on how easy designs aren't always a good thing and that sometimes adding a bit of friction in your designs and user journeys can be very beneficial. And really, it's not just for the users; it's also beneficial for the business.

So, my name is Jane Haezer Saputra and I'm a Product Design Lead for HSBC. I started my career as an Information’s Architect in design agencies in Canada, before joining a startup in Indonesia and now I'm in London. At HSBC, I lead their security and anti-fraud platform. So believe it or not, the sole existence of the product I'm working with right now, which is a security and anti-fraud platform, is actually to create friction in the design. And over the last years that I worked closely with it, it actually changed a lot of the way I'm thinking. It made me question a lot of things that I learned as a designer, and it shows me a very different side of the design coin. And today I wanted to share with you what I have learned so far and how I've realized that adding that bit of friction can actually be very beneficial despite what we have been taught.

So, what is friction and how does it affect design? And is it really all that bad? Now, think of your house or more specifically think of your front door. Your front door acts as a barrier against the outside world really. And to enter your house, you have to take additional step or steps. So, you need to turn the key. You need to open the door and get out. You close the door and for extra security, jiggle the door handle, making sure that the key words or you don't forget to actually lock the door. So, we all have our own rituals and it takes a bit of a time to do all these rituals every single time you try to go in and out of your house. But I can still assume that every one of us would still prefer having a front door rather than not. And this really brings me to lesson number one, which is that adding friction could be equal to security. Now, think of your bank account and your log in page as your front door. Adding a log in as part of your user journey is technically speaking a friction. It adds an extra step before you can see your bank account balances or any account really. And sometimes it takes a little bit of a time to get this step right. Maybe you entered a wrong character in the log in details or in my case, forgotten my password all the time. But overall, no one would not want a log in step for their bank account. Having this edit step or fiction strengthened the feeling of security for your users. What it does is ensures that nobody would be able to access their accounts and also a strong log in protections, increase your users trust in the product, in my case, the bank. And ultimately, I think that could only be a good thing. And it brings us to lesson number two, that I've learned so far, which is to add friction to make users stop and think. So, especially when one is working with the banking industry, sometimes we want our users to actually stop and think before they give their consent. And this is, I think, where friction really can help. For example, if we take into account the money transfer situations. If we are following the thought process that no frictions are always the best for uses for example. It might go like this; users select who they want it to send to from their bank account and then they enter the amount of money to get transferred. And then they press send and viola, it's all done. Except they just accidentally press an extra zero and send 400 pounds instead of 40 pounds. So, frictions in this case could be an edit confirmation screen that let's users review and consents all the information written that they have input, making sure that everything is correct before they send it over to the bank. It can save the users from accidentally pressing an incorrect amount or sending money to the wrong person. And for the company, it actually saves a call to the customer centers.

So, one of the projects we worked on last year, I think would best described how having friction isn't always a bad thing, but it could be a really great thing. So, we noticed that one of our log in pages wasn’t performing well in the analytics. There was a large drop-off than we expected to happen and users took a long time to go through the journeys itself, which is not a good thing. And then so the design and product team huddled to figure out what could be the potential issues. So, we scrutinized the design and then we realize that, you know what our initial approach of providing users with a way to log in right away might actually be the problem. It's really mind-blowing, a smooth log in is a problem. That was definitely a surprise and this is because the so-called log in page didn't just contain log in. It also includes other items unrelated to the log in steps and those other users might actually go to the screens to do those tasks. So, the original designs, as you can see here, emphasize log in activity and we suspected that the drop off happens because of the cases where users weren't actually trying to log on. So, based on this hypothesis, we created an extra screen. You can think of it as an additional step really and this screen allows us to easily see all the available functions at a glance. It does not give too much dominance from one or the other. So, as expected, there were concerns with this approach because it is one extra screen. Users has to click one more time to go through before they can actually log in. So, how is this even solving user problem, the problem where they're taking a long time to log in and how is this helping with drop offs, if they were given another friction? So, we conducted user testing in several different countries to make sure that these were the solutions. This is the answers that we wanted to go through. We also tested it against all the tasks that the users coming to this page wants to do to make sure we got around he view. And to our surprise, the results were very promising. We brought the results to the rest of the stakeholders. And after a couple of discussions, it's decided to launch the new log in page to several markets. And as everyone knows, it does take a couple of months for analytic data to stabilize, especially if you're releasing it on a mobile app. So, we huddled back in the group to see the data after three months and really to our surprise, we found out that the time to log on had been slashed by 50% compared to the previous design. We also found out that drop-offs had gone down by 10%. So, the solution really does work. To this day, it's really mind boggling, really to see the addition of an extra screen makes users go through their tasks much more efficiently. And even though we now learn that friction is inherently important, I think it is also important to note that the degree of the friction itself matters. As part of security, part of our designs usually involve extra steps to ask users many questions and provide them with lots of information. And just to remind you, this is the friction we need to ensure that you are, who you say you are, and nobody's really trying to impersonate you and do bad things. If you ever opened a bank account or ask for mortgage, for example, I think you'll be very familiar with it. And of course, our initial experience looks something like this. The questions go on and on, and to no one’s surprised lots of drop-offs happens here and we went back into our analytics to see where the drops happen. And then we had a chat with our users that actually drop off and talk with the frontline agents that ended up having to help these users to see where the problems actually lay. We found out that the issue lay around our users not having the information needed handy and feeling overwhelmed, but by these important looking procedures. It is honestly comical to get these responses from the users when we actually designed this experience to do last click by providing only one page. During rounds of brainstorming and idea generations, someone said this oldie, but goodie quote by Craig and Abrams, "When eating an elephant, take one bite at a time." I think it actually perfectly summed up our situation here. We are trying to make users digest mountains of information to them in one go. Maybe what we needed to do is actually to cut it into bite sized pieces for them. The concerns that come then, and honestly, very justified is won't users get anxious because they cannot see where the end was. Because what we're trying to do is basically, we're trying to cut up mountains of information in one page into multiple different pages. So, we designed against that as well. The end design goes something like this, first, provides us with a clear step of what they're going to go through and then break the information that they need to digest into various smaller pieces. And last but not least is to indicate where they are in the process and encourage them to continue. As always, we tested the solutions first to see if it generates any red flags and concerns from users and when it didn't, we released it to the wild. And honestly the results could not be better while it doesn't necessarily speed up the process. It does get down our drop offs and increase the completion rate, which I think is the bottom line. And these two designs, the wall of questions and bite size questions, it actually delivers the same numbers of questions yet the receptions are very different.

So, what have we learned? But friction is not the enemy, but a tool. And just like any other tool in our design arsenals, there needs to be a balance in its applications. After all, we've learned that too much friction, is also not a good thing. So, how do we really balance it? When should we use frictions and how can we use this tool at its best?

And so far in my experience, I've seen it best used for 3 circumstances. Circumstances that require privacy and security, consent or any irreversible situations. In privacy and security, friction is added to keep customers and products safe. It is there to safeguard, not just informations or assets belonging to customers. But also maintaining customers trust in the product and company like our front door analogy basically. The frictions can appear in different ways such as warning messages or maybe a reminder about fraud and asking users if they really know who's this person that you're sending money to, for example, is this your friend? So, yeah. In consent, friction is added to inform users that the product needs to use something of theirs to function. Consent is not only ethical. It also shows goodwill from products to our users. An example of consent could be permission to use microphone, location, camera, or maybe terms and conditions agreement. And lastly, the most common times I've seen friction use in our day to day is during irreversible situations. Such as a confirmation checkout screen or a warning message before you leave a page for example. Its purpose is basically to inform users that this is an end to a journey that you're going through and it might be that changing anything at this point it's not always possible. So, if they want it to proceed, they should only proceed if they are sure to do so.

The strength of friction used should also then be adjusted depending on needs. So, one of the best ways to know how much friction is needed and in what form it should appear, it can be achieved by understanding the issues one is trying to solve really. And then of course, combining it with validations of solutions to actual users and monitor the results through qualitative and quantitative always helpful. But if there is only one take away that one can take from this talk is please let it be this, friction does not have to be frustrating, used in the right way and friction could be your friends in helping the users use your product.

Thank you for listening. I hope this sharing could be of use in your design journey.