Author: UXPin

In the second quarter of 2022, internet users worldwide fell victim to around 52 million data privacy breaches. This clearly shows the importance of cybersecurity, and that the role of a UX designer goes beyond making apps user-friendly. It’s about finding balance between usability and security, which need to go hand in hand.

In this piece, we’re going to focus on security UX — including practices like secure file sharing — to show you how to use product design to protect your users’ data and detect vulnerabilities, as well as share a few tips on designing for data privacy and building security features.

Need to design a functionality that can be prone to data breach? UXPin is an end-to-end design tool that will help you with that and much more. You can design wireframes, interactive prototypes, and handle design handoff. Try it for free.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What Should Designers Know about Cybersecurity?

A designer’s job is to make sure that navigating through a digital product is easy and pleasant. They always put users’ needs at the front. However, if we add cybersecurity to the equation, creating a frictionless experience becomes a challenge. At least that’s what a lot of designers might think. 

The truth is, designers don’t have to choose one over the other. Making a product secure doesn’t mean it will be hard to use. Usability and security can co-exist, instead of competing. Let’s take a look at three statements that will help us debunk the myth about the relationship between the two. 

• Most people don’t know what cybersecurity risk is – If you make a product too secure, for example, by including geolocalization to services or notifying that an HTTPS certificate on a site they really want to visit has expired, it will push people into finding a way to bypass it. Think of things like VPNs for the former, download a VPN for every device, for example, or just heading over to the site despite Google’s instructions, for the other.
• Security doesn’t mean locking everything down – If you want people to stick to your security measures, you should ideally make them invisible. If a user is blocked from executing simple tasks such as secure file sharing – adoption may crumble. Instead, use UX design to make them feel less like obstacles blocking users on their user journeys, and more like advocacy for their data security.
• Design isn’t only about making things easy – If you find yourself making everything fast and easy, you probably need to understand users’ intent deeper. Sometimes you need to slow people down to highlight what’s important.

How can you protect your users’ data with design?

We’ve already clarified that both design and UX security are two important elements in the product development process. Still, it might initially seem that they are isolated from one another. After all, doesn’t security relate to the coded app itself, while design in the prototyping stage has nothing to do with security execution? Not quite. 

Let’s take UX copy, for one.

With the right prototyping tool, instead of displaying the ubiquitous “lorem ipsum” on your wireframes, you can use real-life copy to inform your user about a number of security areas, like the reason why you require two-factor authentication. 

Just think of how important 3DS verification has become for bank apps in recent years. This extra security level isn’t something happening in the backend of the app or website. It requires human action. When you design a 3DS verification module, the screens should show the exact message you want to display to users.

What it says depends on a number of factors – like, whether you’re legally obliged to conduct double identification, or it’s just recommended. In the case of the former, you’ll have to build out a user flow that blocks access unless the user completes the verification process. While, in the latter, you can simply encourage them to use a tool like Google Authenticator for that extra, recommended security layer.

By creating a well-thought-out ID authentication flow and providing the actual copy for it, you’ll collect accurate feedback. You’ll also understand whether the instructions and reasons for each step were clear. If you detect any bottlenecks, you’ll be able to improve your future iterations. 

With that in mind, here’s a breakdown of seven tips that will help you ensure the highest cybersecurity and UX security standards in your designs.

7 tips on designing for data privacy and cybersecurity

1. Make authentication simple  

No one likes all the formalities related to signing up or logging into an app. Among others, we can fail to remember the password, and might not be able to find our phones when there’s an SMS code we need to enter. Or even CAPTCHA, asking you to click on all images with ships or traffic lights. As mentioned in the previous section, a lot of how frustrating this process is comes down to your design.

Think of how you can simplify two-factor authentication or single sign-ins with the least possible effort.

If you’re designing a web or mobile app, then you could generate a unique URL and deliver it to your user’s email. Once they’ve clicked on it, they’ll already be logged in. No passwords necessary.

Another way to go about it is leveraging what the user always has on them, quite literally. A person who wants to switch on their phone or other device faces the camera, so you could go with Face ID or the simpler fingerprint authentication. 

Or, better yet, you can explore automation to run two-factor authentication for the user. A great example comes from the Revolut app. When you want to see your credit card details, the app sends a verification SMS.

Still, you don’t have to do any copy/pasting, because – as soon as your phone receives the message – Revolut automatically draws up the code into the app. This means zero effort on the user’s end. As you can see, there are ways to guarantee the highest security standards while retaining good UX.

2. Let users know that phishing attacks happen

Data privacy plays an important role in preventing phishing. An online fraud where criminals pretend they’re a legitimate business and undertake steps to steal sensitive information. This can be done via email, phone, text, advertising, or other means.  Education is the first step to addressing this problem. UX designers can prevent or at least reduce the probability of security risks by using pop-ups that would inform users of potential security threats. This, however, has to be done in a non-obtrusive way. 

Along with these precautions, personal dark web monitoring can further help by alerting users if their credentials have been compromised and are circulating online, helping them take immediate action before damage occurs.

Additionally, design teams can go one step further and build security forums and team collaboration tools, which would allow users to report spam. These would help with protecting others from falling victim to cybersecurity and phishing attacks. 

3. Introduce easy navigation 

An intuitive desktop, mobile app or website is also more likely to be a secure one. After all, if your users know what each step does and are shown alerts for any cybersecurity threats, they’ll be more aware of the risks and use the digital product responsibly. Since intuitiveness is also one of the guiding principles of great UX, you’ll not only make it more secure but also enjoyable for the user.

After you’ve created a step-by-step user journey, try to fill the screens with copy that is both simple and specific about the end result. Anticipate user questions and concerns. Whenever you ask for an atypical piece of personal information, like “what was your mother’s maiden name?”, tell the user why. For example, that you’re only going to use the data to verify your identity if you ever talk to customer service outside the app.

This pledge to transparency will help put the user at ease and make them appreciate your dedication to their data protection. Simple tools like an IP lookup can also help users spot unusual access patterns and if your app serves users across regions, routing checks through an ISP proxy can help verify how content and access controls appear from different network environments.

4. Create a prototype before releasing your app 

We know that making design both user-friendly and secure isn’t a piece of cake. That’s why to minimize the risk of getting it wrong, it’s good practice to test your app prior to releasing it. And this involves creating a prototype. 

By using a tool like UXPin you will be able to quickly design an app prototype along with a login sequence. You can include features that will positively contribute to security UX such as authentication, and verify how users will respond to them.

Instead of making assumptions, you can observe how users interact with your design, and make adjustments if necessary.  UXPin also helps with maintaining UI consistency, which positively impacts user trust. 

5. Track long login times 

Among others, cookies observe and count the duration of each individual user session. When a user agrees to cookies, they allow to be identified every time they visit your product or website. When it comes to session duration, the rule of thumb is that the longer you’re logged into a service, the bigger the threat of someone hacking into it. 

The risk is particularly high whenever you’re idle in an app, i.e., it’s still running in the background, but you’re not using it. If there’s no automatic logout, then you could stay in the service for weeks on end. 

For this reason, designers should create a pop-up or timer that shows when the end user is going to be logged out unless they confirm they want to stay on. An app or website could have an automatic logout timer (for example, 24 hours for an e-commerce store, or even just a few minutes for bank accounts). 

If a hacker is successful in breaking into your user’s device, but your app has an automatic logout, then they’re much less likely to access the data stored in your product. It’s a win-win for both you and your user. While you’ll avoid any security breach penalties, your user – if they ever become a victim of an attack on their device– will be grateful that you’ve limited the fallout of the attack.

6. Collect only necessary data 

To guarantee data privacy, you should aim at collecting necessary data only. And when you no longer need it, make sure to destroy it. There is a common belief that the more data you collect, the more personalized user experience you can create. While this statement is true, you should always put data security first. Pay a lot of attention to your data collection methods, and how you frame your questions. 

In terms of notifications and permission requests, you should only consider them when you’re certain that end users will accept them. Also, make sure that both opening a user account as well as closing it is easy. 

UX designers should also keep an eye out on what data is collected by third parties, and if possible, anonymize personal data. However, in order to do that they have to be aware of data privacy regulations including GDPR, HIPAA, and any other industry-specific ones. 

7. Test security UX

Last, but not least, you should audit your security regularly. This will mean looking at two things – whether you’re compliant with the highest cyber security standards, and how each element of your interface is advocating for user data protection. Alongside these audits, incorporating user access review tools helps teams regularly evaluate who can access sensitive features and data, reinforcing strong security standards without compromising the user experience.

One of the methods you should apply is called regression testing. It’s a quality assurance process that helps you detect any bugs or usability glitches in an app. These might happen after you’ve changed a piece of code or altered an element of the interface. Generally speaking, the more contributors there are to your app’s design and code, the more likely the occurrence of these issues.

Running security audits and so-called bug bash sessions will help you ensure that your product is always easy to use, free of broken elements, and as efficient as can be. 

Design Secure Apps in UXPin

Security and design are not only two important factors in the product development lifecycle – they’re connected in more ways than one. While the roles of software developers and system administrators in security are well established, this can’t be said about the designer. And unrightfully so, as they’re one of the first product team members to set the tone for the app’s security standards, as early as in the wireframing stage.

Designers are not only responsible for building out the security module layout. They’re also in charge of explaining the importance of security to users, and even educating them about how they can minimize the risk of unauthorized access through responsible use. Internally, design teams should adopt secure practices too – such as using a password manager for teams to protect and manage shared credentials across collaborative projects.

For this reason, it’s important for designers to use a prototyping tool that allows them to test UX. One of such tools is UXPin. It allows you to create designs with real-life UX copy, collect feedback in an iterative approach, and facilitate better design-developer handoffs. Give it a try, and see how you can set your app for success! Sign up for a free UXPin trial.