Customization

This section outlines the elements you can customize within the Selfie Capture module to match your brand while preserving Incode’s core UX. It clarifies which areas are flexible, such as text, illustrations, and brand colors and which elements remain fixed to ensure consistency, accessibility, and optimal capture performance across platforms.

Tutorial Screen

The Tutorial Screen prepares the user for the Selfie Capture step. It introduces the action, provides the necessary context, and sets expectations before the camera is activated.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• Keep copy short to minimize cognitive load.
• The illustration uses brand 50 and brand 500 to reinforce brand identity without overwhelming the UI.
• Ensure tap targets meet accessibility guidelines.
• Maintain clear focus states for keyboard and screen reader users (Web).

---

Fake Permission Screen

The Fake Permission Screen is shown before the operating system displays its native camera permission modal. It prepares the user, explains why camera access is required, and significantly reduces the likelihood of users denying permission. This step increases trust and prevents interruptions during the selfie flow.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• The pre-permission modal reduces drop-off by providing context before the OS permission.
• Maintain a clear hierarchy between primary (Allow) and secondary (Don’t allow) actions.
• Keep the dim overlay consistent to align with OS modal expectations.
• Ensure high contrast between modal, text, and background elements.
• Avoid adding extra steps or interaction on this screen.

---

Capture Screens

During capture, the user aligns their face within the silhouette, and the system evaluates real-time conditions such as lighting, alignment, and distance. Once requirements are met, the photo is taken automatically. Colors and on-screen text can be customized to match your brand, while the silhouette itself is fixed, as it plays an essential role in helping users position their face correctly.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• The silhouette cannot be altered in shape, only color, as it ensures correct face alignment.
• The progress arc represents detection readiness; its behavior should remain consistent to avoid confusing users.
• Use brand colors subtly to avoid distracting from the user’s face.
• Keep instruction text short and focused to reduce cognitive load.
• Maintain clear focus states and large tap areas (for accessibility on Web).

---

Manual Capture

Manual capture is triggered after a period of inactivity (default: 30 seconds) when automatic detection conditions are not met. In this mode, the user aligns their face within the silhouette and presses the capture button manually. This ensures the user can still complete the verification even in low-light, complex backgrounds, or edge-case scenarios.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• Manual mode provides a fail-safe capture method when automatic detection is not possible.
• Ensure the camera button remains highly visible against any background.
• Keep instructional text concise and actionable to reduce friction.
• The silhouette must remain visible at all times; avoid color changes that reduce contrast.
• Button must preserve accessible tap size (minimum 44×44 px on mobile).

---

Capture Complete (Uploading & Success)

Once the selfie is captured, either automatically or manually, the user transitions into the Uploading and Success states. These screens reassure the user that the capture is being processed and provide a clear confirmation when the image is accepted. Both the loading ring and the confirmation colors can be branded to match your product’s identity.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• Keep messaging short and neutral, users should feel reassured, not overwhelmed.
• The green ring color communicates a positive state; ensure it remains accessible and high-contrast.
• Background should remain clean and unobtrusive to keep focus on the processing state.
• Avoid adding interaction in these screens; the user should not be able to interrupt this step.
• Maintain consistent ring thickness and spacing to preserve visual rhythm across modules.

---

Error Screens

Error screens appear when an issue occurs during capture, such as face misalignment, incorrect lighting, occlusions, or when all attempts have been exhausted. These screens help guide users back into the flow by providing corrective instructions or informing them that manual review will be needed. While text and styling can be branded, error types cannot be removed, as they correspond to specific detection events within the experience.

Customizable Elements

Fixed Elements

Token Reference

Design Notes

• Error messaging should remain clear, direct, and action-oriented.
• Use meaningful icon colors (yellow for warnings, red for errors).
• Maintain consistent spacing and visual hierarchy for readability.
• “Try again” should always feel like the primary action when applicable.
• Final error screens should not offer a retry, only a “Continue” action guiding users into manual review logic.
• Avoid long or overly technical messages; users should understand the issue at a glance.