Scenario examples

In this section you’ll find visual examples of how to present the Yoti SDK. Choose what scenario you want to integrate and follow these recommendations for a better conversion.

Before you start
Make sure you understand how a Yoti integration works by looking at our guide.

Customers can use Age estimation to access age-restricted content or purchase age-restricted goods online. Customers only need to verify themselves by scanning their face.

Structure

Structure of messaging

Structure of messaging

  1. Options - Ensure you provide the Age estimation service with clear context and alongside any other ways to verify a user’s age.
  2. Education - Reassure your users by giving them the information they need to continue with age verification.
  3. Estimation - Enable your users to complete a successful age estimation by providing contextual guidance at the point of estimation.
  4. Result - Whether or not they pass your age threshold, tell them of their result clearly with as little words as possible. Follow this with actions to take.
  5. Redirect - Where applicable, increase confidence and reduce hesitation by showing on your website that they have successfully completed age verification, and provide clear actions to continue with your website’s user journey.

Layout for options

It is recommended that you present Age estimation with any other options available. If age estimation is the only form of age verification provided, then be clear what users will be asked to do to complete their current task.

Age estimation - Website layout

Age estimation - Website layout

Layout for education

We recommend serving context, guidance and reassurance information in that order to ensure a high conversion of age verifications.

Age estimation - Education layout

Age estimation - Education layout

User experience for education
Understand the reasons why your users need these pieces of information, see good examples and how to apply them on your website.

Layout for estimation

It is recommended that for desktop, you present a camera feed for image capture centrally in the available viewport. For mobile, we recommend using the full available space of the screen to ensure a high quality image capture.

Age estimation - Estimation layout

Age estimation - Estimation layout

User experience for estimation
Learn how to build your estimation page to best suit your users and capture a successful image for Age estimation.

Layout for result

It is recommended that for both mobile and desktop, you present the result with both visual and text. Be clear as to what happens next, we suggest an automatic redirect after 4 seconds to take users back to the task they want to complete on your website.

Age estimation - Result layout

Age estimation - Result layout

Type to search, ESC to discard
Type to search, ESC to discard
Type to search, ESC to discard