usability guidelines for yoti app integrations...ktu s'ut hif.110 rivacy policy contact hare...

Usability guidelines for Yoti app integrationsVersion 2.016 August 2019

© 2019 Yoti. All rights reserved.

Contents

1. Integrating the Yoti app 3How Yoti app integrations work 4What your users will see in their browser 6What your users will see in the Yoti app 7How to use Yoti responsibly 8

2. Where Yoti can be used 9Use case example 1: Enabling KYC checks and identity verification 10Use case example 2: Proving age to access age-restricted websites 11Use case example 3: Proving age for age-restricted goods online 12Use case example 4: Creating verified user accounts to enhance trust and safety 13

3. Ensuring a good experience 14Anatomy of a user-friendly Yoti integration 15Yoti button: dos and don'ts 17Yoti button: contextual labels 18How to talk about Yoti 19Rules when addressing Yoti 20Text templates for providing information about Yoti 21How we support your users 23

Usability guidelines for Yoti app integrations – Version 2.0


2

1. Integrating the Yoti app

Our app can be seamlessly integrated with your website, app or custom product so you can perform secure identity checks. This is what we call a Yoti app integration.

You'll be able to request specific details from a user's Yoti app directly from your website or app.

So, what does a Yoti app integration include? Let's cover the basics.



3

Integrating with Yoti lets your users securely share specific details using their Yoti app.

To get started, users need to click a

Yoti button on your website or app. This button opens a full-page overlay on the webpage, showing the details users are about to share.

On a desktop browser, this overlay has a two-dimensional barcode that we ask users to scan with the Yoti app to continue. We use these codes to securely pass on bits of information; they're called Yoti QR codes.

On a mobile browser, users simply need to tap the Share details button to continue.

Both methods prompt the Yoti app to display the details users are about to share and button to confirm this.

If a user doesn't have the Yoti app, they'll be redirected to a mobile website with more information and links to download it.

Once they confirm the share, their details are securely sent to your organisation. You can access them through a backend integration or from your Yoti Hub.

How Yoti app integrations work (1/2)



4

How Yoti app integrations work (2/2)

User taps Yoti button on your website.

User taps Share details to launch Yoti app.

User clicks Yoti button on your website.

User scans Yoti QR code using Yoti app.

User consents to sendtheir verified details. This concludes a Yoti share.

User consents to sendtheir verified details. This concludes a Yoti share.

Using a desktop browser

Using a mobile browser



5

1

3

4

2

When your user clicks the Yoti button on your website or app, a full-page overlay appears. This tells them exactly what details they'll be sharing and who they'll be sharing them with.

Your application's logo and name. Make sure they match what's on the website or app your user has come from.

The specific details you're requesting users to share.

On desktop browsers: a Yoti QR code that users scan with their Yoti app.On mobile browsers: a share button that will automatically open the Yoti app. Your application's contact details and privacy policy. Make sure you provide these.

More information for users to find out how Yoti works and how to share details.

1

2

3

4

5

What your users will see in their browser

2

4

1

3

5

5



6

Once your user has scanned the Yoti QR code on their desktop or tapped the Share details button on their mobile, the Yoti app automatically presents a share request screen.

Your application's logo and name. Make sure they match what's on the website or app your user has come from.

This will only show if you've requested photo authentication in your Yoti Hub. When a user taps Allow, this prompts them to scan their face with their front-facing camera.

The specific details you're requesting users to share. Any details with a blue tick are verified by Yoti.

Tapping Allow shares the requested details with your organisation. The user will then receive a share receipt in their Yoti app.

1

2

3

4

What your users will see in the Yoti app

Remember Me ID

Full Name

Photo

Share request

What does this mean?

Verified

Yoti wants you to share your:

(Photo authentication required)

ALLOW

DENY

2

1

3

4



7

We pride ourselves on how we handle our users' data. We use tech for good and enable users to securely prove their identity, always being transparent about what happens to their details. We hope you believe in this too.

Be transparent about why you're collecting data and only use this data for those reasons.

Only collect the information you actually need. Data minimisation is one of the main benefits of Yoti, giving users ownership of their data.

Make sure the data you collect is stored safely. Data security is at the heart of what we do and we think it should be important to every organisation.

How to use Yoti responsibly



8

Yoti applies to many different situations. It can be used in scenarios where someone would usually share personal, often private, information with an organisation or another person.

2. Where Yoti can be used



9

Use case example 1: Enabling KYC checks and identity verification

App

App

20 Sep 2019

Heathrow (LHR)

Schiphol (AMS)

From:

To:

Your flight:

£72.00Total

£72.00

SHOW ID WITH YOTI

UPLOAD PHOTO OF ID

Learn more about YotiPrivacy policy Contact

Scan with Yoti app to continue

Photo

First Name

Last Name

Date Of Birth

Passport Details

is asking you to share:

Application name

Identity confirmed

PROCEED

Privacy policy Contact


YES, CONTINUEYES, CONTINUE

NO, CANCEL

www.website.com

Is this the website you want to

share your details with?


NO, CANCEL

www.website.com



20 Sep 2019

Heathrow (LHR)

Schiphol (AMS)

From:

To:

Your flight:

£72.00Total

£72.00

SHOW ID WITH YOTIPROVE IDENTITY WITH YOTI

UPLOAD PHOTO OF ID

Learn more about Yoti

Identity confirmed

PROCEEDPrivacy policy Contact

SHARE DETAILS

This will open the Yoti app

Photo

First Name

Last Name

Date Of Birth

Passport Details


Application name

‘Application name’ wants

you to share your:

Photo

Email Address

Last Name

Date Of Birth

Passport Details

ALLOW

CANCEL

‘Application name’ wants

you to share your:

Photo

Email Address

Last Name

Date Of Birth

Passport Details

ALLOW

CANCEL

Scan code using camera

Opens Yoti app

User needs to provide ID details to continue. They choose to share their details using the Yoti app.

User sees the Yoti overlay showing the details they're

about to share.

They consent to sharing these details using their Yoti app.

User's details are shared with your organisation. You have now

verified their identity.





10

Use case example 2: Proving age to access age-restricted websites

App

App

Verify your age:

DD/MM/YY

OR


PROVE AGE WITH YOTI



18 or over?


Application name

Age confirmed

PROCEED



www.website.com



YES, CONTINUE

NO, CANCEL

www.website.com



YES, CONTINUE

NO, CANCEL

Verify your age:

DD/MM/YY

OR


PROVE AGE WITH YOTI

Age confirmed


SHARE DETAILS


18 or over?


Application name

‘Application name’

wants you to share your:

ALLOW

CANCEL

18 or over?



ALLOW

CANCEL

18 or over?


Opens Yoti app

User needs to provide their date of birth to continue. They choose

to prove their age privately using the Yoti app.


about to share.

They consent to sharing only that they're over 18 using their Yoti app.

User's details are shared with your organisation. You have now

verified their age.





11

Use case example 3: Proving age for age-restricted goods online

App

App

PROVE AGE WITH YOTI

UPLOAD PHOTO OF ID


Red wineRequires age ID

£8.50Total

£6.00

Your basket:



18 or over?


Application name

Age confirmed

PROCEED



www.website.com



YES, CONTINUE

NO, CANCEL

www.website.com



YES, CONTINUE

NO, CANCELPROVE AGE WITH YOTI

UPLOAD PHOTO OF ID


Red wineRequires age ID

£8.50Total

£6.00

Your basket:

Age confirmed


SHARE DETAILS


18 or over?


Application name



ALLOW

CANCEL

18 or over?



ALLOW

CANCEL

18 or over?


Opens Yoti app

User needs to prove their age to buy an age-restricted item. They choose to privately prove their age using

their Yoti app.


about to share.

They consent to sharing only that they're over 18 using their Yoti app.

User's details are shared with your organisation. You can now verify their age so they can buy their age-restricted item.





12

Use case example 4: Creating verified user accounts to enhance trust and safety

App

App

Log in:

Email

Password

OR

LOG IN WITH YOTI

Learn more about YotiPrivacy policy Contact


Photo

Email Address

Remember Me IDWhat is this?


Application name

Welcome




NO, CANCEL

www.website.com




NO, CANCEL

www.website.com



Log in:

Email

Password

OR

LOG IN WITH YOTI


Welcome


SHARE DETAILS


Photo

Email Address

Remember Me IDWhat is this?


Application name



ALLOW

CANCEL

Photo

Email Address

Remember Me ID



ALLOW

CANCEL

Photo

Email Address

Remember Me ID


Opens Yoti app

User signs up to your website using their Yoti app.


about to share.

They consent to sharing these details using their Yoti app.

These details are shared with your organisation and the user's account is created. The next time they log in to your website, they'll only need to share their unique Remember Me ID.





13

We want to make Yoti available to anyone. So it's important that everyone has a smooth experience of Yoti, from start to finish.

Let's take a look at how to create a clear and simple experience for your users.

3. Ensuring a good experience



14

Anatomy of a user-friendly Yoti integration (1/2)

We recommend you follow these basic guidelines when you integrate the Yoti app. This is so you can reduce friction, provide your users with valuable information and create a seamless user experience.

Clearly say what the Yoti button is for There's a reason you're integrating with Yoti and we'd like you to communicate that with your users. Proving identity online, especially using new technology, can make people nervous. Display the Yoti button prominently The button should be in clear view. Ideally, you won't need to scroll to see it.

Link to the Yoti website This provides users with more information about what Yoti is; everything is explained on our own website. There should be a link wherever the Yoti button is. It should direct users to: https://www.yoti.com

1

2

3

2

1

3

Prove you're 18+ to pay with debit card


PROVE AGE WITH YOTI



15

Anatomy of a user-friendly Yoti integration (2/2)

Explain why you're using Yoti Add an explanation about what our partnership means for your users. For example, if you’ve partnered with Yoti for secure identity verification, let your users know. It will be difficult to build trust if they don’t know who we are. Find the best medium to inform users about how Yoti is used within your service. This can be a paragraph of text, imagery, a list or even an explainer video (please contact [email protected] for assets).

More information about Yoti It's okay to give your users more insight into how Yoti works. Whenever you think it's appropriate, use one of the copy templates from 'page 21, "Text templates for providing information about Yoti".

4

5

Yoti and our company have teamed up to help you do just that. Download the free

Yoti app and add an ID document to prove your age and checkout of our online shop

with debit card.

What is Yoti?Yoti is a digital identity platform that gives

you a simple, fast and secure way of proving who you are online and in person.

Yoti lets you prove your age, verify people you meet online, prove your identity to businesses, log in to websites without

passwords and more.

Prove you're 18+ to pay with debit card

PROVE AGE WITH YOTI


1

4

5

2

3



16

mailto:sdksupport%40yoti.com?subject=Assets%20support

Users know and trust the Yoti button. So, it should always be easy to recognise on your website.

Please use the provided button design without making any visual changes.

The frontend code snippet we provide must be used as shown in the developer documentation. Don't modify the code or how the button should work. See the exceptions to this on page 18, "Yoti button: contextual labels".

Yoti button: dos and don'ts

Don't use your own custom labels, only the ones recommended

Don't replace the button with a custom design

Don't place the button on low contrast backgrounds

Don't override the font inside the button

Don't change the background colour of the button

Don't change the provided button size

USE YOTI

VERIFY ID

Use Yoti

Use on light backgrounds Use on dark backgrounds

USE YOTI

USE YOTI

Use Yoti

USE YOTI

USE YOTI



17

You should always use a relevant, contextual label with a Yoti button. You can use the following options to fit the terminology of your use case.

Prove age with Yoti Whenever Yoti is being used primarily for age verification.

Prove identity with Yoti Whenever Yoti is being used primarily for identity verification.

Log in with Yoti/Sign up with Yoti Whenever Yoti is being used for online authentication, or as an alternative to an email and password or social login. Use Yoti Fallback option for generic uses.

Yoti button: contextual labels

Log in

Email

Password

OR

USE YOTI

Log in

Email

Password

OR

LOG IN WITH YOTI

Prove you're 18+ with Yoti to pay with debit card

USE YOTI

Prove you're 18+ with Yoti to pay with debit card

PROVE AGE WITH YOTI

A contextual button label makes the action more understandable

A contextual button label makes the action more understandable



18

1. Keep it simpleWe like to keep things simple. We’re offering the world a simple and fast way of proving who they are. So, we want that to be reflected in how we talk about ourselves and how others talk about us.

Concise sentencesKeeping it simple means avoiding long-winded sentences or huge paragraphs to explain who we are.

Avoid jargonSometimes it’s necessary to use technical language. But sometimes it can be confusing. We want everyone to understand who we are and what we do. So, when possible, try to avoid jargon or complex terms that could be replaced with an understandable word or phrase.

2. Be clearClarity is important. We pride ourselves on transparency. Nothing should be ambiguous - we want users to leave with more answers than questions.

Make instructions clearInstructions should be clear and concise. For example, creating a Yoti is easy, so we don’t want our steps to be so long and complex that users think otherwise.

Break up big blocks of textWhen talking about Yoti, try to use bulleted lists or small snippets of text instead of long paragraphs.Instructions should be set out in a clear and step-by-step structure, usually in a bulleted or numbered format.

3. Be positiveA negative tone is off-putting and can be, quite frankly, scary. A positive tone is reassuring for your users and much easier to understand. Avoid ambiguityBe confident and bold when talking about Yoti. A vague tone is negative because it causes doubt. Stay away from uncertain words, like 'might' or 'may'.

Be friendlyWe are inclusive and open, so like to make sure we refer to users as 'you' and avoid rigid formality. Don't sound like a robot when explaining who we are because this can be uninviting.

Lead with positivityStart a sentence off in a positive way when talking about Yoti. Don't create fear around sensitive topics involving personal data. Instead, focus on the benefits and the solutions that Yoti can provide.

How to talk about Yoti



19

Rules when addressing Yoti

Describe Yoti correctly Yoti advisersIdentity management applicationOnline tool

Digital identity platformYour digital identityThe new way to prove your identity

Yoti is a single entity Yoti are a digital identity platform Our trusted partners, Yoti

Yoti is a digital identity platform Our trusted partner, Yoti

Always use Yoti as a noun, not a verb Just go and Yoti this Yotify your ID

Use Yoti

Name Yoti QR codes correctly Yoti codeYoti QRQR code

Yoti QR code

Don’t make exaggeratory claims Yoti is the BEST digital identity platform Yoti is a digital identity platform

Don't mention the Yoti app's number of downloads, as it is always increasing

3 million downloads already –

Refer to the Yoti app as free to download and use Download the Yoti app Download the free Yoti app

Write Yoti correctly YOTI Yoti

Don’t use Yoti's typographic style or the logo in your writing Yoti

Use a positive tone Yoti doesn't let hackers attack your data. Yoti protects your data, keeping it safe with 256-bit encryption.



20

Text templates for providing information about Yoti (1/2)

Please use the following text snippets when you want to share more information about Yoti. Don't rephrase the information already provided.

See an example in use on page 16, "Anatomy of a user-friendly Yoti integration (2/2)"

Topic: Yoti in general

Heading:What is Yoti?

Body copy: Yoti is a digital identity app that gives you a simple, fast and secure way of proving who you are online and in person.

Yoti lets you prove your age, verify users you meet online, prove your identity to businesses, log in to websites without passwords and more.

Text link: Learn more about Yoti(insert https://www.yoti.com/personal/)



21

Text templates for providing information about Yoti (2/2)

Topic: How to create a Yoti

Heading:Creating your Yoti is easy

Body copy: Download the free Yoti app from the App Store or Google Play Store and create your secure digital identity in minutes.

1. Secure your accountAdd your phone number so we know you're in control your phone. Set a 5-digit PIN to keep people out of your account.

2. Prove it's youTake a quick 3D scan of your face to prove you're a real person.

3. Add your details Scan your ID document, like a passport or driving licence, to add its details to your Yoti. Your details are encrypted into unreadable data that only you can unlock.

Topic: How it works

Heading:How does Yoti work?

Body copy: Yoti combines your unique facial features and ID document, like a passport or driving licence, to create your secure digital identity.

Text link: Learn more about Yoti(insert https://www.yoti.com/)

Topic: Security

Heading:Your details are safe

Body copy: Your Yoti app is the only key to your personal data.

Your details are encrypted into unreadable data that can only be unlocked by your Yoti. Nobody else can access or decipher it, not even Yoti.

You're in control to securely share specific details, never your whole identity.

Text link: Learn more about Yoti(insert https://www.yoti.com/)



22

Transparency is one of our core values at Yoti. If your users ever have any questions about what Yoti is and how to use it, then we're here to help.

We recommend that you give guidance to your users in the following ways.

Send them to the Yoti website where we explain what we're all about.

Get in touch with our 24/7 support team.

Direct them to our FAQs.

How we support your users



23

http://www.yoti.com

https://www.yoti.com/contact/

https://yoti.zendesk.com


For more information contact:Yoti SDK support

[email protected]

mailto:sdksupport%40yoti.com?subject=

usability guidelines for yoti app integrations...ktu s'ut hif.110 rivacy policy contact hare...

Documents