Companion app, где AI остаётся за сценой
My Secret — сервис общения с персонажами. Я собрал целостный путь от выбора героя и настройки внешности до чата, подписки и возвращения в продукт.
My Secret
Контекст
Пользователь приходит за отношением с персонажем, а не за демонстрацией технологии. Каталог, настройка внешности, чат, подписка и генерация должны работать как один эмоционально понятный опыт.
Задача
Нужно было оставить AI незаметной технологией, а персонажа — живой частью опыта. При этом продукту требовались ясные сценарии выбора, старта диалога и premium-состояний.
Моя роль
Сделал айдентику и дизайн-систему сервиса, спроектировал веб- и мобильную версии: каталог персонажей, пошаговое создание героя, чат, редактор бота, меню и premium-состояния. Отдельно настроил генерацию изображений так, чтобы она держалась общего визуального языка.
Результат
Целостный companion-опыт
Объединил бренд, интерфейс и генерацию персонажей в одной системе без перегрузки технологией.
1. С чего начинал
- Человек приходит за общением с персонажем, демонстрация технологии ему не нужна. Интерфейс должен показывать героя и диалог, а генерацию оставлять служебным действием.
- Платные возможности встречаются почти в каждом разделе. Показать их нужно ясно, но так, чтобы они не перебивали выбор героя и разговор.
2. Тёмный интерфейс и один акцент
Знак — это название mysecret.ai, набранное строчными и поставленное на мягкий градиент от синего к розовому. Сам интерфейс сделал тёмным, почти чёрным. На такой поверхности главным становятся цветные портреты персонажей, а кнопки и поля с ними не спорят. Акцент один, светло-сиреневый, им отмечены собственные сообщения, основная кнопка и метки premium.
3. Каталог и настройка героя по шагам
В шапке веб-версии оставил только переключатель «Explore / Chats», корону подписки и профиль. Карточка персонажа состоит из крупного портрета, имени, первой строки описания и счётчика диалогов. Первой в сетке стоит карточка «Create», так что создание своего героя не спрятано в меню. Настройку внешности разбил на экраны с одним вопросом на каждом (тип героя, цвет глаз и так далее), варианты показаны картинками с подписью, а полоса из сегментов сверху сообщает, сколько шагов пройдено.
4. Спроектировал чат и редактор бота
В шапке мобильного чата только имя и аватар героя, остальное место отдано переписке. Под каждым ответом персонажа стоит ряд небольших действий: оценить, запросить ответ заново, озвучить. Редактор бота разложил на две колонки — слева портрет с переходами к правке внешности и голоса, справа имя, местоимение, видимость «Private / Public», теги с поиском и примеры сообщений, которые задают манеру речи.
5. Меню как компонент с двумя состояниями
У гостя в боковом меню разделы «Explore», «Chats», «Create», «My characters», кнопка «Buy Premium» и «Login». После входа на месте кнопки входа появляются баланс звёзд с кнопкой «Top Up», «Profile» и «Log Out». Метку у пункта «Create» предусмотрел в полном и сжатом виде, это подпись «Premium» с молнией и значок-корона для узких мест.
6. Сложности и решения
Сложность
Генерация изображения не всегда даёт результат, которого ждёт человек, а технический язык разрушает ощущение, что перед тобой персонаж.
Решение
Убрал из сценария всё, что похоже на работу с моделью. Текстовых запросов нет, есть выбор из готовых картинок по одному признаку за шаг. Повторная генерация осталась одной кнопкой «Regenerate» рядом с «Create» на последнем экране, когда герой уже виден целиком.
Сложность
Платное есть в каталоге, в меню, в чате и в списке диалогов. Если оформлять каждое место по-своему, подписка выглядит как реклама поверх продукта.
Решение
Свёл всё платное к одному знаку, короне, и одному акцентному цвету. Корона стоит в шапке, в меню, на метке пункта «Create» и рядом с именем героя в списке чатов.
7. Продуктовые метрики
Каждое решение привязано к показателю: что на него работает и по чему это видно в аналитике.
Конверсия из каталога в первый диалог
- Что на это работает
- Каталог с типами персонажей и короткая настройка с мгновенным превью.
- Что смотреть в аналитике
- Доля новых пользователей, которые начали диалог в первой сессии.
Конверсия в подписку
- Что на это работает
- Premium-состояния появляются в момент, когда функция понадобилась, и показывают, что именно откроется.
- Что смотреть в аналитике
- Доля увидевших платный экран, которые оформили подписку.
Возвращаемость
- Что на это работает
- В чате на первом плане персонаж и сообщение, интерфейс отступает.
- Что смотреть в аналитике
- Удержание на 1-й и 7-й день, число сообщений за сессию.
8. Что получилось
- 80+ экранов веб- и мобильной версии сделаны на одной дизайн-системе.
- 5 сценариев связаны в общий путь: каталог → персонаж → настройка → диалог → premium-состояния. Генерация изображений встроена в выбор и создание героя как обычный шаг интерфейса.