User Profile Interface

1) Principles

1. One thought per screen. Profile = a set of short self-contained sections with one CTA each.
2. Default security. Visible statuses of 2FA/sessions/devices, simple paths to action.
3. Data transparency. What is stored, why, how to disable/download/delete.
4. No overload personalization. Only real settings that affect the experience.
5. Never lose context. Drafts, return to last section, predictable URL.

2) Information architecture

• Profile (avatar, name, contacts)
• Security (password, 2FA, devices/sessions)
• Payments (methods, auto-saved parts, history)
• Limits (responsible game)
• KYC (status, document upload)
• Preferences (language, currency, odds format, quick bets, topics)
• Notifications (types/channels, silence/digest)
• Privacy and data (visibility, DSAR/export, account deletion)

Never show full PAN/CVC; UX-only tokens and masks.

3) Profile header

Avatar (loading/cropping), display name, ID/username.
Status Badges: KYC: Under Review/Passed, 2FA: On/Off, Responsible Play: Active.

Quick links: "Change password," "Confirm e-mail/phone," "Set a limit."

html
<header class="profile-head">
<img class="avatar" alt="Аватар пользователя">
<div>
<h1>Имя пользователя</h1>
<div class="badges"><span class="badge">KYC: На проверке</span><span class="badge">2FA: Выкл</span></div>
</div>
<button class="btn btn--primary">Загрузить документы</button>
</header>

4) Profile section

Fields: name, date of birth, country, interface language.
Contacts: e-mail (verification), telephone (OTP).
Locale: date/time/currency tied to language and country.
Date of birth is only edited via support after KYC.

UX: format prompts, soft masks, auto save with debunking, confirmation of success.

5) Safety

Password: change by current password + quality rules (pressure gauge/prompts), do not show requirements retroactively.

2FA: TOTP/SMS; simple master stream: "Enable → QR → backup codes."

Devices and sessions: list of active inputs (device/OS/location/time), CTA "End all except current."

Social logins: binding/unlinking with confirmation.

6) Payments

Payment methods: cards (mask '1234'), A2A/wallets; Default status.
Conclusions: saved details (IBAN/wallet) with micro-transfer verification, if applicable.
Transaction history: filters by type/date/amount, CSV export.
Transparency: Commissions/ETA and In Process/Rejected/Ready states.

7) Limits (Responsible Play)

Types: Deposit, Rate, Time-outs, Self-exclusion.

UX: radio period (day/week/month) + amount, explicit text "Will take effect in...."

Change towards weakening - delayed; tightening - right away.

8) KYC

Stepper: Personal data → Documents → Sending → Under review.
Clear file requirements (type/size/clarity) + preview.
Status and terms, notification channel for readiness, history of submitted documents.

9) Preferences

The format of the coefficients is decimal/fractional/American.
Quick bets: switch + "no confirmation" warning and Undo if allowed.
Theme: light/dark/systemic; contrast mode for the visually impaired.
Geo and language: retain but remember jurisdictional requirements (content/block lists).

10) Notices

Channels: push/e-mail/SMS/in the application.
Groups: financial, gaming, social, marketing (moderately by default).
"Do not disturb": time ranges and conditions (e.g. no marketing at night).
Preview: What the notification looks like, where to turn it off.

11) Privacy and data

Profile visibility (if social functions): who sees nickname/avatar/activity.
Data loading (DSAR): request for an archive with a lead time; notification on readiness.
Deleting an account: explain the consequences, grace-period, "Freeze" as an alternative.
Consent Log: Cookies/Marketing/Terms - Dates and Versions.

12) Action history

Feed: entries/exits, password changes/2FA, changes in payment details, limits.
Filters and export; explanation of geo-IP and devices.
CTA "It Wasn't You?" → fast password change and session termination flow.

13) A11y and localization

Labels and clues are linked through 'aria-describedby'; errors - 'role = "alert" '.
Contrast ≥ AA, visible ': focus-visible', Tab order corresponds to visual.
'prefers-reduced-motion '- minimum animations.
Language expansion: 20-30% margin in width; numbers are tabular ('font-variant-numeric: tabular-nums;').

14) Mobile patterns

Profile menu as drawer; key statuses/CTA - at the top.
Sticky-CTA at the bottom for long forms ("Save Changes").
Scaling of fields, keyboards by type ('inputmode').
Notifications/history - tape with endless loading and sentry-observer.

15) Empty, errors, states

Empty: friendly hint and "what's next" (add method/include 2FA).
Error: cause + how to fix + Retry; Do not reset input.
Busy: local bootloaders, without locking the entire screen; TTFF ≤ 100 ms.

16) Metrics

Completion Rate by key settings (2FA, KYC, payment methods).
Time-to-Complete sections (password/2FA/KYC/limits).
Error Rate of forms + Retry success rate.
Adoption preferences (topic, quick bets, odds format).
Security posture: the proportion of users with 2FA, the number of completed foreign sessions.

17) Anti-patterns

Hidden critical settings (2FA/limits) in depth.
Long questionnaires in a modal; no auto save.
Silent sending without busy/confirmation.
Reset focus and "jump" layout; CLS due to pictures.
Prohibition on copy of 2FA/OTP code.
Mix marketing and default critical notifications.

18) Design system tokens (example)

json
{
"profile": {
"sectionGap": 20,
"fieldHeight": 44,
"radius": 12
},
"security": {
"badge": { "radius": 8, "px": "4 8" },
"focusRing": { "width": 2, "offset": 2 }
},
"lists": {
"row": { "py": 12, "px": 16 },
"divider": 1
},
"motion": { "hoverMs": 160, "pressMs": 90 },
"a11y": { "contrastAA": true, "reduceMotion": true }
}

19) Snippets

Device/Session List (HTML)

html
<ul class="sessions" role="list">
<li>
<div>Chrome · Windows · Киев</div>
<small>Последняя активность: 14:32</small>
<button class="btn btn--ghost">Выйти</button>
</li>
<li aria-current="true">
<div>Safari · iOS · Текущая сессия</div>
<small>Последняя активность: сейчас</small>
<button class="btn btn--ghost" disabled>Текущая</button>
</li>
</ul>
<button class="btn btn--secondary">Завершить все сеансы</button>

Coefficient format switch (radio)

html
<fieldset>
<legend>Формат коэффициентов</legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичные</label>
<label><input type="radio" name="odds" value="fractional"> Дробные</label>
<label><input type="radio" name="odds" value="american"> Американские</label>
</fieldset>

Payment method card (masking)

html
<article class="pay-card">
<h4>Visa •••1234</h4>
<small>По умолчанию</small>
<div class="actions">
<button>Сделать основным</button>
<button class="danger">Удалить</button>
</div>
</article>

20) QA checklist

Meaning and flow

• Sections are logical; each screen has one main CTA.
• URL/navigation restores the last section.

Forms

• Correct 'type/inputmode/autocomplete'; soft masks, predictable caret.
• Asynchronous checks with debunking; saving does not lose data.

Safety

• 2FA flow is understandable; backup codes are available for download.
• Sessions/devices are terminated, events are logged.
• Sensitive fields are not logged/cached.

iGaming-specifics

• Limits with delayed entry and different periods.
• KYC statuses and documents are clear; deadlines and notification channel are visible.
• Odds format and quick bets work as advertised.

А11у/Localization

• Contrast ≥ AA; ': focus-visible' see; Tab order is correct.
• Texts and numbers are adapted to the language/currency; RTL is supported (if necessary).

Performance

• TTFF ≤ 100 ms; no CLS; images load lazily.
• Large lists (history) are paginated/virtualized.

21) Documentation in the design system

Компоненты: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.
Tokens: fields/radii/focus/badges, CUS/limit statuses, success/error/attention colors.

Patterns: "One CTA per partition," "Undo/Confirm for risk," "Export/delete data (DSAR)."

Do/Don't: hidden security settings, overloaded forms that mask marketing inclusions.

Brief summary

The profile interface is a trust center: it must be simple, honest and secure. Clear architecture, fast and predictable flow (2FA/KYC/limits/payments), neat forms and transparency of work with data turn the profile into a product support and reduce the load on support - especially critical for iGaming.