02 /2020 — 202218+
Реальний проєктNeural WebCam
Соціальна платформа для авторів, контенту й живої взаємодії: ролі, архітектура, сценарії, монетизація та айдентика.
- #Product Design: усі кейси з цим тегом
- #UX-архітектура: усі кейси з цим тегом
- #Айдентика: усі кейси з цим тегом
- Product Design
- UI/UX
- Brand Identity
Згодом продукт продовжив роботу під іншим брендом. У кейсі — лише моя робота над Neural WebCam.
01 /18
Про продукт
Neural WebCam — цифрова платформа для взаємодії між користувачами та контент-кріейторами.
Продукт об'єднував профілі, публікації, приватний контент, підписки, повідомлення, live-сценарії, внутрішню валюту та монетизацію в єдиній екосистемі.
Одним із головних викликів було не створення окремих красивих екранів, а проєктування складної системи ролей, станів, платежів і сценаріїв взаємодії так, щоб продукт залишався зрозумілим для користувача.
- Категорія
- Соціальна платформа · Creator economy · Live video · 18+
- Продукт
- Вебзастосунок, адаптивний
- Ролі
- Гість · Клієнт · Модель / автор · Медіаменеджер
- Моя роль
- Product / UI/UX Designer, айдентика
02 /18
Моя роль
Від архітектури продукту й сценаріїв до інтерфейсу, логотипа й передачі в розробку.
- Product Design
- UX-архітектура
- User flows
- Інформаційна архітектура
- Interaction design
- UI design
- Дизайн-система
- Адаптивний дизайн
- Прототипування
- Логотип і айдентика
- Handoff розробникам
03 /18
Один продукт для багатьох ролей
Основною UX-задачею було об'єднати в одному продукті різні моделі поведінки.
Інтерфейс мав залишатися послідовним, але змінювати доступні можливості залежно від ролі, статусу, підписки та доступу користувача.
- 01
Клієнт
приходить за контентом і взаємодією.
- 02
Автор
приходить за аудиторією та монетизацією.
- 03
Медіаменеджер
потребує окремого робочого процесу: керування контентом і публікаціями.
04 /18
Екосистема продукту
П'ятнадцять повʼязаних областей навколо одного ядра — масштаб, з яким мав впоратися інтерфейс.
Neural WebCam
- Discovery
- Профілі
- Контент
- Підписники
- Месенджер
- Live
- Підписки
- Кредити
- Чайові
- Подарунки
- Преміум
- Верифікація
- Транзакції
- Реферали
- Безпека
05 /18
Ролі користувачів
Від гостя до автора: кожна роль бачить той самий продукт, але з іншим набором можливостей.
- 01
Гість
Неавторизований відвідувач.
- переглядає публічний контент
- бачить профілі
- реєструється й входить
- читає довідкові та юридичні сторінки
- 02
Клієнт
Учасник платформи.
- створює профіль і стежить за авторами
- купує преміум-контент і кредити
- надсилає чайові й подарунки
- користується месенджером і live
- керує підписками, історією покупок, безпекою й приватністю
- 03
Модель / автор
Роль кріейтора; клієнт отримує її після верифікації.
- веде профіль і публікує контент
- дає доступ підписникам і за оплату
- спілкується з користувачами
- отримує чайові
- проводить приватні та групові live
- 04
Медіаменеджер
Окрема роль із власною реєстрацією та верифікацією.
- працює з контентом і публікаціями авторів
- діє в межах прав, які дає продукт
06 /18
Інформаційна архітектура
Десятки розділів з UML-схем, згруповані у шість областей замість однієї нечитабельної карти сайту.
Акаунт
01- Реєстрація й підтвердження пошти
- Вхід і відновлення пароля
- Профіль і особисті дані
- Налаштування: безпека, конфіденційність
- Сесії та сповіщення
Контент
02- Публікації
- Преміум-публікації
- Платний контент
- Підписники: безкоштовні та платні
Комунікація
03- Месенджер
- Приватний live
- Груповий live
- Чат-кімната
Монетизація
04- Купівля кредитів
- Преміум
- Чайові
- Подарунки
- Історія транзакцій
- Реферальна програма
Інструменти автора
05- Верифікація моделі
- Реєстрація й верифікація медіаменеджера
- Промо: банери, лендинги
- Субакаунти
- Посилання для аналітики
Підтримка й правила
06- FAQ, допомога, контакти
- Умови використання
- GDPR і cookie
- Відповідність 18+
- Як розпізнати шахрайство
07 /18
Ключові сценарії
Сім сценаріїв, на яких тримається продукт. Кожен — у кілька кроків, без зайвих розгалужень.
- FLOW 01
Реєстрація
- Гість
- Реєстрація
- Підтвердження пошти
- Профіль
- Заповнений профіль
- FLOW 02
Стати моделлю
- Клієнт
- «Стати моделлю»
- Дані профілю
- Пошта
- Документи
- Роль «Модель»
- FLOW 03
Медіаменеджер
- Реєстрація
- Підтвердження пошти
- Документи
- Верифікація
- Профіль медіаменеджера
- FLOW 04
Платний контент
- Автор
- Профіль
- Публікація
- Закритий стан
- Доступ
- Перегляд
- FLOW 05
Кредити
- Платна дія
- Бракує кредитів
- Купівля кредитів
- Оплата
- Повернення до дії
- FLOW 06
Повідомлення
- Профіль автора
- Написати
- Месенджер
- Безкоштовні й платні медіа
- FLOW 07
Live
- Профіль автора
- Приватний / груповий live
- Ціна й доступ
- Кредити
- Сесія
08 /18
Система монетизації
Кілька моделей заробітку на одній внутрішній валюті: користувач один раз розуміє механіку — і вона працює всюди.
Реальна оплата
Кредити
- Контент
- Чайові
- Live
- Подарунки
Кредити
Внутрішня валюта для всіх платних дій у продукті.
Платний контент
Окремі публікації відкриваються за оплату.
Преміум-підписка
Доступ до контенту автора для платних підписників.
Чайові
Пряма підтримка автора з профілю, чату чи live.
Подарунки
Ще один спосіб висловити підтримку під час взаємодії.
Приватний live
Сесія один на один за кредити.
Груповий live
Спільна сесія з доступом за кредити.
09 /18
UX-принципи
- 01
Ясність
Складна монетизація не повинна ускладнювати базову навігацію.
- 02
Послідовність
Ті самі патерни працюють у профілях, публікаціях, повідомленнях і покупках.
- 03
Поступове розкриття
Розширені можливості з'являються тоді, коли стають доречними.
- 04
Довіра
Платежі, верифікація, безпека й приватна взаємодія мають явні стани та зворотний зв'язок.
10 /18
Адаптивність
Продукт складається з медійних сторінок, профілів, повідомлень і сценаріїв оплати, тож адаптивність не зводилася до стискання десктопних макетів.
На малих екранах змінювалися пріоритет контенту й навігація: що показати першим, що сховати за дією, як не загубити платний стан.
- Медіа й публікації
- Профілі
- Месенджер
- Оплата й кредити
- Навігація
- Модальні вікна
11 /18
Система, а не екрани
Продукт вимагав системного підходу: десятки сценаріїв використовували спільні компоненти, стани та правила поведінки.
Навігація
- Шапка й меню
- Вкладки
- Профіль і аватар
Контент
- Картка публікації
- Закритий / преміум-стан
- Медіа
Комунікація
- Месенджер
- Live-сесії
- Чат-кімната
Оплата
- Кредити й баланс
- Купівля
- Чайові й подарунки
Зворотний зв'язок
- Сповіщення
- Помилки
- Порожні стани
12 /18
Айдентика
Логотип — логічне продовження роботи над продуктом: знак, який живе в інтерфейсі, а не на візитці.
Потрібен був продуктовий знак, що працює всюди: від повного логотипа на сайті до аватара, сповіщення й фавікона, у світлій і темній темах.
Знак зведено до трьох простих форм. Їхні значення нижче — обґрунтування дизайну, а не історичний факт.
Коло
камера, об'єктив, відео, профіль
Основа
силует людини, опора вебкамери
Точка
активний статус, звʼязок, вузол мережі
Людина + камера + цифровий звʼязок
13 /18
Як народжувався знак
- 01
Дослідження
Продукт, аудиторія, цифровий контекст.
- 02
Ключові слова
Людина, звʼязок, відео, live, цифрове, мережа.
- 03
Пошук форми
Асоціації камери, людини й мережі — у просту геометрію.
- 04
Побудова символу
Коло, основа й окремий вузол.
- 05
Баланс
Товщина кільця, розмір точки, візуальний центр, нижня дуга, відступи.
- 06
Типографіка
Заокруглені літери продовжують мʼяку геометрію знака.
- 07
Колір
Синій — технологічність, довіра, ясність.
- 08
Перевірка розмірів
128, 64, 32, 24 і 16 px.
14 /18
Побудова
Модуль X — діаметр точки. Від нього будуються пропорції знака, захисне поле (X з кожного боку) і відступ до назви. Пропорції логотипа не змінювалися.
15 /18
Версії логотипа
Основна, горизонтальна, знак окремо, компактна, монохромна, інверсна й темна. Знак перевірено від 128 до 16 px — на світлому, темному й синьому фоні.
16 /18
Довіра й безпека
Для платформи 18+ довіра — частина UX: кожен чутливий крок має зрозумілий стан і наслідок.
Вікове обмеження
Перевірка 18+ до будь-якого контенту.
Верифікація особи
Документи для автора й медіаменеджера.
Безпека акаунта
Пароль, сесії, вхід з нового пристрою.
Приватність
Окремі налаштування конфіденційності.
GDPR і cookie
Прозорі правила обробки даних.
Розпізнавання шахрайства
Довідка про типові схеми.
Стани оплати
Успіх, помилка, недостатньо кредитів.
Обмеження доступу
Закритий контент пояснює, як отримати доступ.
17 /18
Передача в розробку
Дизайн включав логіку, готову до реалізації: не лише «щасливий шлях», а всі стани, від яких залежить поведінка продукту.
- Стани й варіанти
- Адаптивна поведінка
- Логіка модальних вікон
- Права доступу
- Платні / закриті стани
- Помилки
- Порожні стани
- Стани верифікації
18 /18
Результат
Масштабована продуктова система: соціальна взаємодія, контент, live і монетизація в одному інтерфейсі.
Системний підхід до UX, ролей і компонентів дозволив підтримувати велику кількість сценаріїв без створення окремого продукту для кожного типу користувача. **
Наступний кейс · 03 / 06
Volta — від енергоспоживання до зрозумілих бізнес-рішень
Розкажіть коротко про продукт і терміни — відповім протягом доби.