UX - Initial Guidance

Initial guidance

Before the scan begins, show the user an instructions screen in their language. The goal is to set expectations, surface common failure causes upfront, and reduce first-attempt failures before a token is ever minted.

iProov provides assets to help: template instruction screens, localised text strings, best-practice examples and animations. Use them rather than starting from scratch.

Technique	Why it helps
Clear localised instructions	Explains the process and do's/don'ts in the user's own language.
"What to expect" video or animation	A short 15–30 second clip demonstrating the steps sets expectations and reduces first-attempt failures.
Environment checklist	Advises on good lighting, a quiet area and stable internet before starting.
Device readiness check	Reminds users to clean the camera lens and keep the app up to date.

Important. Dynamic only: instruct the user to raise screen brightness to maximum. Unlike the native SDKs, iProov Web cannot control screen brightness. Before the scan begins, clearly tell the user to turn brightness up to maximum and remove any privacy filter; this materially improves success rates.

---

Scanning tips carousel

The recommended pre-scan UI is a 4-step scanning tips carousel — one step per common failure category. Each step names the issue, shows a short animation of what to avoid (or allow), and uses clear do/don't labels. The user taps through at their own pace before starting the scan.

Use the toggle below to preview the carousel in mobile app and web contexts:

Scanning tips

1

Lighting

Too little light, or too much back lighting can cause issues.

❌Avoid darkness

❌Avoid strong backlight

---

Carousel design notes

The four tips are ordered by frequency of failure: Lighting → Glasses → Coverings → Movement.

Step	Title	Key message
1	Lighting	Avoid darkness and strong backlight.
2	Glasses	Clear glasses are fine; remove sunglasses.
3	Coverings	Remove hats, helmets, masks and anything obscuring the face.
4	Movement	Stay still, keep eyes open, avoid talking.

Navigation:

• Provide Previous / Next buttons between steps, or ← → arrow icons on mobile.
• The final step uses a Close button returning the user to the pre-scan screen.
• Dot indicators at the bottom show position in the carousel.
• Do not auto-advance — let the user move at their own pace.

Assets: Lottie animations and mp4 videos for each scenario are available to use directly:

• Download UFC animations (.zip — mp4 + Lottie)
• Download guidance illustrations (.zip — SVG + PNG)

---

UX requirements checklist

These are the certified UX requirements across three areas. All items in sections A and B are required for certification.

A — Pre-transaction user preparation

Requirement	Detail
Clear localised instructions	Show instructions in the user's language explaining the process and do's/don'ts (e.g. "Keep your face still", "Ensure good lighting", "Remove glasses/hats"). Use provided template screens, localised strings, and default assets.
"What to expect" video/animation	Show a short 15–30 second video or animation demonstrating the transaction steps before the scan begins.
Environment checklist	Advise users on ideal conditions: good lighting, quiet area, stable internet.
Device readiness check	Guide users to ensure their device camera is clean and the app is up to date.
Web: screen brightness instruction	Dynamic / Web only. iProov Web cannot control screen brightness. Clearly instruct the user to raise brightness to maximum and remove privacy filters before the scan. See the provided sample animation.

B — Post-transaction user feedback

Requirement	Detail
Specific failure reasons	Display clear, concise reasons for failure (e.g. "Too much movement detected", "Multiple faces detected").
Specific error reasons	Display clear, concise reasons for errors (e.g. "Network error", "Camera permission denied").
Retry guidance with visuals	For each failure reason, suggest concrete next steps (e.g. "Please hold still", "Move to a brighter area"). Use the UFC animations to illustrate the guidance.
Link to troubleshooting/FAQs	Provide an easy way for users to access more in-depth help.

C — Seamless integration and experience

Requirement	Detail
Consistent branding	Incorporate feedback assets into your brand and design language so the biometric step feels native to your product.
Progress indicators	Show qualitative updates during processing (e.g. "Streaming", "Analysing", "Validating") to reduce drop-off.
Alternative/fallback flow	Provide a fallback for users who cannot complete biometric verification (e.g. manual review). Trigger from the Support Checker, the unsupported event, and after the retry limit is reached.