Design and UX
Overview
In this section, you'll find:
- Behavior Descriptions: Module-by-module breakdowns of how each Incode module behaves
- Experience Architecture: Screens, flows, and the structure of user journeys
- Customization Options: Visual and behavioral guidelines to help you match your brand and onboarding flow
- User Pattern Descriptions: High-level design and interaction specs
- Accessibility Considerations: Guidance on designing seamless verification experience for all users
This introductory page provides the section overview and structure. Full component specs, tokens, spacing, and prototypes are maintained in our Figma Design System.
Table of Incode modules
Incode modules, sometimes called components, provide the functionality that makes up the Incode onboarding experience. The following table shows the modules covered in this section.
| Module | Category | Description |
|---|---|---|
| ID Capture | Document & Data Capture | Captures front and (if applicable) back ID images and extracts document data. |
| Face Capture | Identity & Biometrics | Captures a live selfie to verify presence and enable biometric checks. |
| Face Match | Identity & Biometrics | Compares the live selfie with the portrait extracted from the user’s ID. |
| DMV Face Match & Reusability | Identity & Biometrics | Performs facial comparison using DMV sources when available, enabling identity reuse. |
| Video Selfie | Identity & Biometrics | Captures video-based presence and face for high-security flows. |
| POA / Document Capture | Document & Data Capture | Captures documents for proof of address or additional validation. |
| Upload Digital ID | Document & Data Capture | Enables user upload of supported digital identity files for verification. |
| NFC | Document & Data Capture | Reads encrypted chip data from compatible IDs via NFC (near-field communication). |
| OCR (Review OCR) | Document & Data Capture | Shows ID data extracted by OCR (optical character recognition) for confirmation or correction before submission. |
| Input Modules ( Phone, Email) | Inputs & Attributes | Collects structured personal information. |
| Geolocation | Inputs & Attributes | Retrieves approximate user location for fraud and jurisdiction checks. |
| CURP | Inputs & Attributes | Collects and validates the Mexican CURP identifier. |
| eKYC / eKYB | Inputs & Attributes | Performs KYC (Know Your Customer) or KYB (Know Your Business) checks for identity or business validation. |
| Signatures ( Electronic, Advanced, Qualified, Checkbox) | Signatures | Collects different levels of electronic signatures. |
Section content for each module
The section includes a set of pages for each module. These pages cover:
- Documentation: What the module does, where it fits in the flow, its screens/states, short customization notes, accessibility notes, and best practices.
- Flows: Full visual flow maps and happy paths, including light/dark mode previews.
- Customization Guidelines: For each module, both what can be customized and what is fixed (cannot be changed).
- General Specs: Short design guidelines with:
- Screens specs and localization notes
- Desktop & tablet behavior
- Prototype and transition guidelines with a short description and a direct link to the detailed Figma source.
Accessibility details for Incode modules
Accessibility is an important part of the Incode onboarding experience. We maintain a dedicated accessibility section that includes:
- Contrast, typography, and focus rules
- Screen reader behavior
- Keyboard navigation
- Motion and interaction guidelines
The documentation for each module has its own accessibility notes. To see the full accessibility principles we follow, View the Accessibility Overview.
How to use the Design & UX section
When you're working on an onboarding or verification flow, follow these steps for the best experience:
- Open the module you plan to integrate.
- Review the module Documentation page to understand its purpose, flow, and states.
- Check the Flows information to see how the module behaves visually.
- Review the Customization Guidelines to understand your options for branding.
- Refer to the General Specs to get a feel for the high-level module rules.
- Navigate to Figma for full details on adding the module to your flow.
If you need help locating a module or want to confirm something about a flow, reach out to your Incode representative.
Updated 2 months ago